Membuat Blok Note dan Warning Keren di Blog

Hallo semua, gimana kabarnya? semoga selalu diberikan kesehatan ya. Pada halaman ini saya akan membagikan cara membuat blok note dan warning.

Sebenarnya cara ini cukup mudah dan pasti banyak yang tahu, karena hanya perlu meletakan kode css pada template. namun tak dipungkiri masi banyak blogger pemula yang belum mengerti.

Bagi pengguna median ui ini sudah menjadi fitur bawaan template, jadi tinggal menggunakan saja. Akan tetapi jika kamu menggunakan template yang lain dan ingin membuat note box atau warning, silahkan simak dibawah ini:

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 Penggunaan

Untuk menerapkannya silahkan masukan kode dibawah ini dalam tampilan html ketika membuat postingan atau menulis artikel.

/* Kode note box */
<p class="notes">Tuliskan teks disini...</p>

/* Kode warning box */
<p class="notes wr">Tuliskan teks disini...</p>

Tampilan note box

Tampilan warning box

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.