Bangiz - Halo semua... Setelah lama tidak update, kali ini Bangiz mau berbagi tips dan trik blogging. Yang akan kita bahas kali ini adalah tentang blockquote. Blockquote ini biasanya digunakan untuk memblok kata-kata atau kalimat yang dianggap penting yang mana akan terpisah dari kata lain yang tidak menggunakan blockquote. 


Jika dulu saya membuat tutorial dengan judul diatas, untuk kali ini adalah cara membuat blockquote dengan hover background. Caranya mudah saja, tinggal ikuti cara berikut ini:
blockquote hover
Blockquote hover background
1. Masuk Dasbor Blogger > Template > Edit HTML.

2. Cari kode ]]></b:skin> (gunakan Ctrl+F) kalau belum tahu letaknya.

3. Copy kode berikut dan Paste sebelum/diatas kode ]]></b:skin>:
.post blockquote{max-height:350px; background:url(http://2.bp.blogspot.com/-MrAb-W-UQXs/UfspEYr9szI/AAAAAAAAGpg/nPJ01Z2UG2g/s1600/1.jpg);border-top: 2px solid #000000;border-left: 2px solid #000000;border-right: 2px solid #000000;border-bottom: 2px solid #000000;border-radius: 5px;margin:1em 20px;padding: 5px;}.post blockquote:hover {background-image:url(http://3.bp.blogspot.com/-IpZf-Ywtymc/UfspEfUhxvI/AAAAAAAAGpk/YRsnK0liEco/s1600/4.jpg);background-position:center;background-repeat:repeat;-moz-box-shadow: 0 0 10px #ff55cc;-webkit-box-shadow: 0 0 18px #ff55cc;}
Keterangan: 
-> Warna merah adalah URL gambar silahkan ganti dengan URL gambar yang Anda inginkan

4. Simpan Template dan lihat hasilnya

Selesai, happy blogging.
Loading...

 
Top