Cara Membuat Kotak Catatan (Note Box) Keren Di Postingan Blog #2

Cara Membuat Kotak Catatan Info atau Tips (Note Box) Keren Di Dalam Postingan Blog - Kotak catatan info atau tips ini salah satu fitur penting yang wajib dimiliki setiap blog ataupun website. Dengan adanya fitur catatan info atau biasa dibilang note box dapat membantu para pembaca artikel blog kamu untuk membedakan paragraf bagian mana yang penting dengan paragraf biasa atau paragraf inti pembahasannya.

Di artikel sebelum ini sebenernya saya sudah pernah membagikan juga tutorial mirip dengan ini. Tapi artikel yang sebelumnya lebih lengkap dari artikel yang ini. Anggap saja sebagai pelengkap yang kurang dari artikel kemarin. Kamu bisa lihat perbedaannya antara note box ini dengan yang sebelumnya 

Catatan info atau note box ini menggunakan kode CSS yang disisipkan ke dalam template HTML. Dan CSS ini pastinya sudah di minifier agar tidak memberatkan loading blog yang berlebih. Untuk tutorial lengkapnya kamu bisa ikuti langkah-langkah dibawah ini.

Cara Membuat dan Memasang Catatan Info atau Tips (Note Box) Keren Di Postingan Blog

1. Buka dashboard blogger
2. Masuk ke menu Theme » Edit HTML
3. Lalu taruh CSS dibawah ini sebelum kode CSS yang ada di template kamu. Bisa ditaruh sebelum ]]></b:skin> atau </style>

   .info{font-size:16px;line-height:1.65em;color:#333333;border-left:5px solid #f1c40f;background-size:35px;background-repeat:no-repeat;min-height:50px;padding:12px 12px 12px 60px;background-color:#edf10f;background-position:12px 17px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%235dbeaa' d='M13,13H11V7H13M13,17H11V15H13M12,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' /%3E%3C/svg%3E")}

4. Kemudian klik simpan dan selesai.

Sampai di tahap ini CSS kotak catatan info atau note box ini sudah berhasil dipasang di template blog kamu. Untuk cara menggunakan CSS ini kamu hanya perlu menambahkan class="info" di setiap paragraf yang ingin dibungkus dengan kotak catatan info ini. Contoh penggunaan lengkapnya seperti dibawah ini :

<div class="info">Tulis beberapa paragraf penting disini</div>

<!-- [ Atau ] -->

<P class="info">Tulis beberapa paragraf penting disini</p>

Dan hasilnya akan terlihat seperti note box dibawah ini :

Hasil kotak catatan (note box) info dalam postingan blog ala Dzuhalah

Nah, itulah tutorial cara membuat kotak catatan info dan tips (note box) yang bisa saya sampaikan di artikel kali ini. Semoga membantu bagi yang membutuhkan.

Baca Juga