Friday, April 19, 2013

Cara Menambahkan Blockqoute Hover Icon

Tutorial : Blockquote hover ada icon

1. Dashboard>Design>Edit html>Tick Expand Widget Templates
2. cari code .post blockquote {.
3. copy code nih dibawah ini dan letakan dibawah .post blockquote {
.post blockquote {
background: url(http://i1243.photobucket.com/albums/gg546/alice4ja/wall03_n_ribbon02_0003.gif);
;padding: 5px;-moz-border-radius: 25px;border-radius: 25px;border: 1px dashed #FFC1E0;border-left: 5px solid #FFCBB3;colour:#FFFFFF;}
atau akan jadi seperti ini : Contoh coding punya saya
.post blockquote {
background: url(http://i1243.photobucket.com/albums/gg546/alice4ja/wall03_n_ribbon02_0003.gif);
;padding: 5px;-moz-border-radius: 25px;border-radius: 25px;border: 1px dashed #FFC1E0;border-left: 5px solid #FFCBB3;colour:#FFFFFF;}

  blockquote:hover {
-webkit-transition-duration: 2.5s;
background-image:url(http://sl.glitter-graphics.net/pub/1126/1126484q1ohs6clot.gif);
background-position:bottom right;
background-repeat:no-repeat;
margin:1em 20px;
}
Warna Biru merupakan url icon sesuai yang kita inginkan. kalian dapat mengunjungi situs
http://www.glitter-graphics.com
cara untuk mendapatkan url gambar pada situs diatas adalah. pilih salah satu gambar yang kalian inginkan.
kemudia tekan download image. setelah itu akan muncul tab baru yang isinya adalah gambar yang kalian pilih. kemudian klik kanan pada gambar dan copy link location. baru kalian pastekan pada kode diatas. selamat mencoba guys :)


No comments:

Post a Comment

Kebahagiaan sejati bukanlah pada saat kita berhasil meraih apa yg kita perjuangkan, melainkan bagaimana kesuksesan kita itu memberi arti atau membahagiakan orang lain.