Cara Membuat Blok Tips, Peringatan, dan Catatan di Blog dengan CSS & HTML (+Ikon SVG)

Daftar Isi

Salah satu fitur yang saya selalu gunakan dari dulu hingga sekarang adalah Blok Tips, Peringatan dan Catatan ini berguna untuk membuat lebih menarik artikel yang kita buat, dan kode ini juga sudah menggunakan svg image untuk iconnya, dan lebih menarik lagi ada garis yang mengikuti tinggi dari konten yang ada. Tampilannya kurang lebih seperti JSFiddle berikut :

---

Kode CSS

Tambahkan kode CSS berikut ini pada template blog kamu:

/* Base note styles */
.note {
  padding: 16px 20px;
  padding-left: clamp(3.25rem, calc(3.1019rem + .6481vw), 3rem);
  background-repeat: no-repeat;
  background-size: clamp(1.35rem, calc(1.2315rem + .5185vw), 1.25rem);
  background-position: left clamp(1.15rem, calc(1.0648rem + -.0648vw), 1rem) top 1em;
  border-radius: 10px;
  color: #3a4a68;
  position: relative;
}

/* Note variants */
.note {
  background-color: #fcfce4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23ecb621'/%3E%3C/svg%3E");
}

.note.tp {
  background-color: #e7f2ff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%2300a7e6'/%3E%3C/svg%3E");
}

.note.wr {
  background-color: #ffe7eb;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.2,16.06L3.88,12L2.2,7.94L6.26,6.26L7.94,2.2L12,3.88L16.06,2.2L17.74,6.26L21.8,7.94L20.12,12L21.8,16.06L17.74,17.74L16.06,21.8L12,20.12L7.94,21.8L6.26,17.74L2.2,16.06M13,17V15H11V17H13M13,13V7H11V13H13Z' fill='%23c00827'/%3E%3C/svg%3E");
}

/* Vertical line styles */
.note::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: clamp(1.75rem, calc(1.6759rem + .3241vw), 1.25rem);
  top: clamp(2.65rem, calc(2.5rem + .3241vw), 3.25rem);
  height: calc(100% - (2.85rem + 1rem));
  border-left: 1px solid;
}

.note::before { border-left-color: #ecb621; }
.note.tp::before { border-left-color: #00a7e6; }
.note.wr::before { border-left-color: #c00827; }

---

Kode HTML

Untuk kode HTML nya sebagai berikut, sesuaikan dengan kebutuhan kamu:

<!--[ Membuat Standar Note dan Warning Note ]-->
<p class='note'>text_paragraph</p>
<p class='note tp'>text_paragraph</p>
<p class='note wr'>text_paragraph</p>

Agar memudahkan kamu dalam penerapannya pada saat kamu membuat artikel kamu bisa memanfaatkan fitur dari blogger dan masuk ke Setelan - Postingan - Template Entri (opsional), masukkan kode HTML nya pada kolom tersebut.

Pelajari cara membuat blok tips, peringatan, dan catatan di blog menggunakan CSS dan HTML. Tambahkan ikon SVG dan garis vertikal untuk tampilan yang lebih menarik. Panduan lengkap dengan kode siap pakai untuk meningkatkan visual artikel Anda.