Kali ini saya akan membahas tentang cara membuat blockqoute efek hover biat lebih keren...wkwkwk
sebagai contoh bisa lihat di gambar di bwah nih. wekxixixixi XD
blockquote efek hoverlogin dulu ke blogger, terus pergi ke EDIT HTML, terus cari kode blockquote jika tidak ditemukan berarti blog agan belum pernah di modif blockqoutenya....
klo gitu, selanjutnya cari kode ]]></b:skin> kemudian taruh kode berikut di atasnya :
blockquote{margin:20px; padding: 15px 15px 15px 15px; color:#666; border-left:6px solid #c0c0c0; border-top:1px solid #c0c0c0; border-right:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s;} blockquote:hover{transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-color:green; background:#E6FFB1; -moz-box-shadow:0px 1px 5px #000000; -webkit-box-shadow:0px 1px 5px #000000;}
keterangan:
- blockquote:hover itu maksufnya adalah kodeisi blockquote ketika pinter berada di atasnya
- margin:20px; jarak dari titik luar.. CMIIW
- padding: 15px 15px 15px 15px; jarak teks yang ada di dalam blockquote tersebut, jrak atas bawah kiri kanan, sepanjang 15 px
- border-left:16px solid #c0c0c0; ini adalah garis kiri, dengan ukuran 6px jenis solid warna #c0c0c
- transition-duration:1s; ini adalah durasi berubahnya..
- border-radius:6px; ini untuk membuat pojok border tidak lancip
- border-color:green; ini warna bordernya
- background:#E6FFB1; ini adalah warna backgroundnya
- -moz-box-shadow:0px 1px 5px #000000; ini adalah effek bayangan..
- -moz- dan -webkit- supaya browser mozilla dan browser lain seperti chrome bisa baca tuh kode
NB : kalo mau muncul blockquote'nya harus memasukan ke HTML postingan.
tulisan kamu ..
Backlink Please !
| URL |
| Code For Forum |
| HTML Code |

Artikel yg menarik sob
BalasHapus@cilegehcitymkasih..
BalasHapusNice info gan..
BalasHapusbtw berat gak di blog ?
reply :)
nice bro.. sangat bermanfaat bagi para blogger..
BalasHapusfolback http://nendra-pp.blogspot.com
Software Penambah Saldo Rekening, Download disini http://www.softwarepsr.com/nendra
@Made Putramakasih..
BalasHapusmakdsunya?
@nendra patmanamkasih....
BalasHapusartikel yang bermanfaat terimakasih sob
BalasHapus#Salam Blogger
@Harda Muadzsama"
BalasHapusManteb deh triknya sobat :)
BalasHapus@Firman Ilhammakasih...
BalasHapusNICE
BalasHapus@Ali Hadi Rafsanjanimkasih..
BalasHapus@Ali Hadi Rafsanjanithanks....
BalasHapus@yogie firmansyahmkasih..
BalasHapussipp gan..
follow sukseess sob jangan lupa follback yah di http://republik-berita.blogspot.com/
BalasHapus@Aditia Novitsiap meluncur
BalasHapusijin coba gan
BalasHapusLakeya-Cyber4rt ™
@rhonal kadirsilahkan...
BalasHapuscara masukkinnya gimana min ??
BalasHapuspkek html apaan ?
ya html
Hapusok..
BalasHapusakhir nya nemu jg tips ini ..
BalasHapusthx gan udah share ..
Visit Me Here : Shinigami 4rt™
Ikuti Juga Kontes SEO Berhadiah Jutaan Rupiah :
- anekahosting.com Web Hosting Murah Terbaik di Indonesia
- Mau Bikin Website + Hosting Murah AbizZ? Ke Rajawebhost.com aja!
Nice post Mas Bro
BalasHapusSalam go blog dari MAHASISWA GO BLOG
ditunggu followbacknya mas bro