Cara Membuat Blok Note dan Warning Keren di Blogger (Lengkap dengan CSS & HTML)

Halo semua, di artikel ini, saya akan membagikan cara membuat kotak note dan warning keren di blog. Kotak ini berguna untuk menampilkan catatan penting atau peringatan agar lebih menarik dan mudah dilihat oleh pembaca.

Kenapa Perlu Note dan Warning Box di Blog?

Meskipun cara ini sebenarnya cukup mudah — hanya menambahkan sedikit kode CSS — kenyataannya masih banyak blogger pemula yang belum tahu cara menggunakannya.

Untuk kamu yang menggunakan template Median UI, fitur ini sebenarnya sudah tersedia secara bawaan, jadi tinggal dipakai saja. Tapi jika kamu memakai template lain dan ingin membuat note box atau warning box sendiri, tenang aja… saya bantu!

Langkah Membuat Blok Note dan Waring Keren di Blog

Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode </style> atau ]]</b:skin> dan simpan.

/* Note, Warning Box */
.notes{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden} .notes::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .notes::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .notes.wr{background:#ffdfdf;color:#48525c} .notes.wr::before{background:#e65151} .notes.wr::after{content:'\0021'}
/* CSS Darkmode Note */
.darkMode .notes{color:#3c4043}

Cara Menggunakan di Postingan

Saat kamu menulis artikel, masuk ke mode HTML (bukan Compose), lalu tempelkan salah satu dari kode berikut ini:

/* Kode note box */
<p class="notes">Tulis catatan penting kamu disini...</p>

/* Kode warning box */
<p class="notes wr">Tulis peringatan penting kamu disini...</p>

Contoh Tampilan

Catatan dengan warna biru lembut, cocok untuk tips atau info tambahan.

Peringatan dengan warna merah muda, cocok untuk hal-hal yang harus diperhatikan.

Penutup

Itu dia cara mudah untuk membuat blok note dan warning box di blog Blogger. Selain mempercantik tampilan artikel, fitur ini juga bisa membantu pembaca lebih fokus pada informasi penting yang kamu sampaikan.

Kalau ada yang ingin ditanyakan, silakan tulis di kolom komentar ya. Dan jangan lupa baca juga artikel lainnya seputar blogging, template, dan tips desain blog supaya blog kamu makin kece dan nyaman dibaca!