Cara Membuat Message Box (Dialog Box) di Blog

Cara Membuat Message Box (Dialog Box) di Blog
Sebelumnya aku sudah pernah share cara membuat message box  berwarna dengan tambahan icon 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)  sesimpel mungkin dan sesederhana mungkin 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 oleh 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) di 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.
Cara Membuat Message Box (Dialog Box) di Blog

#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.
Cara Membuat Message Box (Dialog Box) di Blog

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

Cara Membuat Message Box (Dialog Box) di Blog

 

Untuk Message Box Warna Kuning

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

Untuk Message Box Warna Biru

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

Untuk Message Box Warna Hijau

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

Untuk Message Box Warna Merah

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

Baca juga : apa sih itu seo?, terus cara cek seo di blogku gimana sih?.
Coba deh bandingin perbedaan message box 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.
Tampilkan Komentar


EmoticonEmoticon