2 Cara Membuat Kotak Info Notes dan Warning Keren Di Blog

2 Cara Membuat Kotak Catatan Info atau Tips (Note Box) Keren Di Dalam Postingan Blog - KUBIS.online - 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.

Baca juga: 2 Cara Memasang Audio Musik Mp3 Dari Google Drive Di Postingan Blog

Cara Membuat Kotak Info Notes dan Warning Keren Di Blog

Bagaimana cara membuat membuat Note atau Kotak Info di blogger? Simak penjelasan berikut ini dan jangan lupa ikuti langkah - langkahnya dengan baik!

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.

Cara Penggunaan Di Postingan

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 :

Ini adalah contoh hasil kotak catatan (note box) info dalam postingan blog KUBIS.online ini menggunakan tutorial diatas. Keren gak tuh??

 

Dari sini sebenarnya anda bisa saja mengubah tampilannya agar sesuai keinginan, misalnya dengan mengubah warna atau font SVG nya sesuai selera masing - masing.

Penutup

Nah, itulah tutorial 2 Cara Membuat Kotak Info Notes dan Warning Keren Di Blog yang bisa saya sampaikan di artikel kali ini. Semoga membantu bagi yang membutuhkan. Jangan lupa ikuti web ini dengan klik salah satu tombol subscribe dibawah ini! Terimakasih

🌐 Baca Juga

seconds.

⚠ Ikuti Kami di Blogger dan Google News Dan Dapatkan 1 Buah Smartphone dari Sponsor jika Beruntung‼

• 0comment

Mr.Surya

TEACHER | BLOGGER | CONTEN WRITER

Related Posts

BLOGGING