Loading...

Cara Membuat Blockquote Hover Background di Blogger

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.

/fa-thumbs-up/ Related Posts$hide=home

Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Blockquote Hover Background di Blogger
Cara Membuat Blockquote Hover Background di Blogger
Cara membuat blockquote keren dengan menggunakan hover background yang bisa dimodifikasi sesuai keinginan. Ada juga blockquote scroll yang bisa menghemat ruang postingan.
https://4.bp.blogspot.com/-yGXfgO3sEzI/Ugm7nVyKARI/AAAAAAAAGtQ/oIJM--9RctA/s320/blockquote+hover.gif
https://4.bp.blogspot.com/-yGXfgO3sEzI/Ugm7nVyKARI/AAAAAAAAGtQ/oIJM--9RctA/s72-c/blockquote+hover.gif
Bangiz
https://bangiz.blogspot.com/2013/08/Blockquote-Hover.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/08/Blockquote-Hover.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy