Cara Membuat Message Box (Dialog Box) di Blog

Cara membuat message box (dialog box) 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 message box (dialog box)  simpel dan sederhana pada postingan di blog kali ini.

Sebenarnya fitur message box (dialog box) sudah ada di dalam postingan blog kita, namun tampilannya masih terlalu kaku atau kurang cantik. Maka dari itu, aku akan membagikan panduan langkah-langkahnya untuk membuat message box (dialog box) yang sederhana namun menarik dan enak untuk dilihat pembaca karena memiliki warna yang bervariasi kayak lagu blackmamba, ehh salah maksud aku blackpink hehehe. Nah, untuk panduannya, silahkan ikuti langkah-langkahnya dibawah ini.

Catatan : Penggunaan message box (dialog 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 Message Box (Dialog Box) 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 hahaha.

Share this post