Home » » Blockquote efek hover dengan icon bergerak

Blockquote efek hover dengan icon bergerak

Pada posting kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang Blockquote efek hover dengan icon bergerak. Semoga dengan artikel Blockquote efek hover dengan icon bergerak akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

Blockquote efek hover dengan icon bergerak
Bentuk blockquote ini termasuk kesukaanku dan kodenya ingin aku simpan disini dan untuk berbagi dengan teman-teman kalau mau. Icon nya seperti yang ada pada gambar di atas. Oke deh mending kodenya segera aku tuliskan saja, tapi kalau sebelumnya sudah memasang blockquote harus di remove dulu. Cara membuat blockquote pada blog aku pernah menuliskan di entri sebelum ini, atau kalau sebelumnya pernah memasang blockquote  hapus dulu  untuk yang belum tahu caranya.

Blockquote efek hover dengan icon bergerak:

1.Masuk Dashboard > template > edit HTML
2.Tick expand template widget dan tekan F3/CTRL +F dan cari kode:
.post-body blockquote {  (letakkan di bawahnya)
atau
body { (letakkan di atasnya)

3.Copy paste kode di bawah ini:
 .post blockquote {
background:#FCFCFC;
border-top: 1px dotted #4F4F4F;
border-bottom: 1px dotted #4F4F4F;
colour:#FFFFFF;
}
blockquote:hover{
background-image:url(URL ICON);background-position:bottom right;
background-repeat:no-repeat;
display:block;
padding:5px;
color:#CECEFF;
border-left:12px double #FF9797;
border-top:2px dotted #000000;
border-bottom:2px solid #FF95CA;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
Warna pink itu adalah url icon cute DISINI kalau mau cari icon cute etc, silahkan mengambil kode nya kalau mau dan diedit sendiri sesuai keinginan xD

4.Tekan pratinjau dulu dan simpan template.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Blockquote efek hover dengan icon bergerak. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/blockquote-efek-hover-dengan-icon.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar