Dialog Box dengan Efek Hover

Dialog Blog dengan Hover Efek

Dialog box adalah kotak pemberitahuan atau bingkai teks dalam sebuah artikel weblog. Dialog box ini bisa berisi teks pemberitahuan, kode, atau tulisan biasa yang secara khusus di share oleh pemilik blog. Sedangkan efek hover adalah efek pergerakan aktif ketika bersentuhan cursor yang ditambahkan pada dialog box tersebut. Tampilannya cukup menarik dan cara pembuatannya tidak membuat pusing. Selain itu widget dialog box ini tidak memberatkan loading blog. Sekarang mari kita bahas tutorial membuat dialog box dengan efek hover. Ikuti langkah berikut.

DEMO

Cara Membuat Dialog Box dengan Hover Efek

• Log in ke blogger
• Click Template
• Click Edit HTML
• Masukkan kode berikut di atas kode ]]></b:skin> atau </style>

#soto-ayam{width:580px;height:auto;margin:auto;background:#222;padding:8px;text-align:center;color:#fff;font-family: "Segoe UI Light","Open Sans Light",Sans-serif;transition: all 0.4s ease-in-out;}
#soto-ikan{width:580px;height:auto;margin:auto;background:#222;padding:8px;text-align:center;color:#fff;font-family: "Segoe UI Light","Open Sans Light",Sans-serif;transition: all 0.4s ease-in-out;margin-top:8px;}
#soto-kambing{width:580px;height:auto;margin:auto;background:#222;padding:8px;text-align:center;color:#fff;font-family: "Segoe UI Light","Open Sans Light",Sans-serif;transition: all 0.4s ease-in-out;margin-top:8px;}
#soto-sapi{width:580px;height:auto;margin:auto;background:#222;padding:8px;text-align:center;color:#fff;font-family: "Segoe UI Light","Open Sans Light",Sans-serif;transition: all 0.4s ease-in-out;margin-top:8px;}
#soto-ayam:hover{box-shadow: inset 0 650px 0 0 #F78181;color:#222}
#soto-ikan:hover{box-shadow: inset  860px 0 0 0 #26A65B;color:#222}
#soto-kambing:hover{box-shadow: inset -860px 0 0 0 #FDE3A7;color:#222}
#soto-sapi:hover{box-shadow: inset 0 -650px 0 0 #2574A9;color:#222}

• Selanjutnya click Simpan Template
• Kalau anda ingin menampilkan dialog box dengan hover efek pada postingan, gunakan kode berikut sebagai pemanggilnya. Masukkan kode pada mode HTML (disebelah kanan Compose pada kiri atas). Berikut kode yang harus digunakan.

<div id="soto-ayam">
  MUNCUL DARI ATAS
        <br/>
TULISAN ANDA DI SINI
</div>
<div id="soto-ikan">
  MUNCUL DARI KIRI
        <br/>
 TULISAN ANDA DI SINI
</div>
<div id="soto-kambing">
  MUNCUL DARI KANAN
    <br/>
 TULISAN ANDA DI SINI
</div>
<div id="soto-sapi">
  MUNCUL DARI BAWAH
        <br/>
 TULISAN ANDA DI SINI
</div>

• Silahkan ganti kode merah dengan teks atau kode. Isi sesuai keperluan anda
• Kalau sudah tinggal click Publikasikan dan lihat hasilnya

Sebenarnya dialog box dengan efek hover ini dapat dimodifikasi pada beberapa atribut posting anda. Saya sarankan anda berimprovisasi sendiri sesuai keinginan. Demikian tutorial membuat dialog box dengan efek hover. Semoga artikel ini bermanfaat bagi kita semua, amin. Selamat mencoba dan semoga sukses. Salam sahabat blogger.

Share this post