Cara Membuat Pesan Keterangan Warna-Warni Seperti Blackpink di Blog

Sebelumnya aku sudah pernah share cara membuat blockquote berwarna dengan icon yang berada di sampingnya. Kalau kemarin terlihat keren seperti seorang pria. Sekarang versinya elegan seperti seorang perempuan. Jadi, pada kesempatan kali ini akan terlihat sedikit berbeda dari yang kemarin-kemarin. Dan aku akan membagikan cara membuat kotak catatan (note box)  simpel dan sederhana pada postingan di blog.

Sebenarnya fitur box quote sudah ada di dalam postingan blog kita, namun aku akan membagikan note box ini dengan tampilan warna-warni, sederhana namun menarik dan enak untuk dilihat dan tidak membosankan untuk dilihat karena memiliki warna yang bervariasi kayak lagu blackmamba, ehh salah maksud aku blackpink hehehe. Untuk panduannya, silahkan ikuti langkaha-langkahnya dibawah ini.

Penggunaan catatan (note box) berwarna pada blog ini menurut aku sangat bermanfaat, yaitu agar pembaca dapat mengetahui poin-poin penting yang tidak boleh dilewatkan untuk dibaca  pada suatu artikel yang kita buat.

Cara Membuat Pesan Keterangan atau Pemberitahuan Warna-Warni Kayak Blackpink di Blog

#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>

.note-yellow{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
.note-blue{background:#7eaecf;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
.note-green{background:#5dc698;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
.note-red{background:#fb7073;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}

#4. Jika sudah pilih simpan tema.

#5. Untuk menerapkannya di dalam postingan sobat >  pilih menu postingan > pilih entri baru.

#6. Setelah itu masuk ke tab HTML > pastekan kode dibawah, seperti gambar dibawah ini.

#7. Selesai.

 

Untuk Note Box Warna Kuning

<div class='note-yellow'>TULIS-CATATAN-SOBAT-DISINI</div>

Untuk Note Box Warna Biru

<div class='note-blue'>TULIS-CATATAN-SOBAT-DISINI</div>

Untuk Note Box Warna Hijau

<div class='note-green'>TULIS-CATATAN-SOBAT-DISINI</div>

Untuk Note Box Warna Merah

<div class='note-red'>TULIS-CATATAN-SOBAT-DISINI</div>

Demo

Baca juga : cara memasang beberapa link di artikel postingan dengan effect warna warni yang memukau.

Coba deh bandingin mana pesan keterangan atau pemberitahuan yang keren dan cocok di blog sobat. Yang pertama, atau yang kedua. Jika yang pertama keren, sobat adalah seorang pria, jika yang kedua elegan berarti sobat adalah seorang perempuan. Jika dua-duanya suka, itu harus dipertanyakan hehehe. Itu aja sih menurut aku. Terima kasih.

Share this post