Cara Membuat Callout Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 16, 2021

Di bawah ini kita akan mempelajari cara membuat pesan callout dengan CSS.

Callout

Pesan info(Callout) sering kali ditempatkan di bagian bawah halaman untuk memberi tahu pengguna tentang sesuatu yang istimewa: tips / trik, diskon, tindakan yang diperlukan, lainnya. Di bawah ini ada contoh mengenai callout yang biasa di gunakan pada website :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}
</style>
</head>
<body>

<h2>Callout Messages</h2>

<p>Konten text di tulis di sini.</p>
<p>Konten text di tulis di sini.</p>
<p>Klik pada simbol "x" untuk menutup pesan callout.</p>
<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Beberapa teks untuk mendeskripsikan pesan callout. <a href="#"> Pelajari lebih lanjut </a> atau tutup jika menghalangi jalan Anda. </p>
  </div>
</div>

</body>
</html>

Buat Callout

Langkah 1) Tambahkan HTML:
Contoh

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <div class="callout-container">
    <p>Tulis text di sini</p>
  </div>
</div>

Jika ingin mengunakan penutup callout , tambahkan elemen <span> dengan atribut onclick yang mengatakan “saat akan mengklik saya, sembunyikan elemen induk saya” – yang merupakan container <div> (class = "alert").

Tip: Gunakan entitas HTML “×” untuk membuat huruf “x”.

Langkah 2) Tambahkan CSS:
Style kotak keterangan dan tombol tutup:
Contoh

/* Callout box - posisi tetap di bagian bawah halaman */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

/* Callout header */
.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

/* container / body keterangan */
.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

/* Button Close  */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Ubah warna saat mengarahkan mouse */
.closebtn:hover {
  color: lightgrey;
}