19 February 2008

Tutorial | Blockquote Style 3

Assalamualaikum.

Kali ni aku nak ajar korang buat blockquote style canggih punya! KIHKIHKIH T__T Canggih sangat ke Mak Jemah? Takdela canggih mana, cuma bagi aku agak canggihla sebab blockquote ni bila cursor sentuh dia, dia akan jadik senget dan ada icon comel bergerak turun beserta double border yg agak canggih. Hah, nak nak nak? Jom ikut tutorial ni.

Sebelum

Selepas

Okeh, jom mula!

1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Tekan CTRL+F dan search code ni

.post blockquote {

3. Copy dan Paste code kat bawah ni diBAWAH code tadi.

background-image: url(<span style="color: red;">http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/w-72.gif</span>);border:2px dashed #<span style="color: lime;">F0F798</span>;border-left:10pt double #<span style="color: lime;">F0F798</span>;padding: 3px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.post blockquote:hover {background-url(<span style="color: red;">http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/w-72.gif</span>);-webkit-transition-duration: 2.5s;background-image:url(<span style="color: blue;">http://www.drikoti.net/Goodies/Favicons/Ico/fv-new19.ico</span>);background-position:bottom right;background-repeat:no-repeat;border:1px dashed #<span style="color: lime;">F0F798</span>;border-right:10pt double #<span style="color: lime;">F0F798</span>;}

MERAH: URL BACKGROUND
BIRU: URL IMAGE ICON KECIK YG BERGERAK
HIJAU: WARNA BORDER. CODE WARNA DISINI

Kat bawah ni ada Icon icon kecik yg boleh digunapakai kalau malas nak carik. Nah amik je,

http://dl5.glitter-graphics.net/pub/638/638145bltz6zqhdo.gif

http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif

http://dl.glitter-graphics.net/pub/575/575281br5nqkcttj.gif

http://dl4.glitter-graphics.net/pub/375/375034mlf314q73l.gif

http://dl9.glitter-graphics.net/pub/438/438969azkmwb42oa.gif

http://dl2.glitter-graphics.net/pub/1361/1361242h0w0ms341e.gif

http://dl4.glitter-graphics.net/pub/994/994264zaow639gzm.gif

http://dl.glitter-graphics.net/pub/1054/1054951qu82go0d40.gif

http://i1142.photobucket.com/albums/n604/nurulfasya/reben.gif

http://i1142.photobucket.com/albums/n604/nurulfasya/bunga.gif








Preview dulu. Kalau jadi, SAVE! :)
GRACIAS

0 juri jemputan, 1 juri tetap (Comment here):

 

100% Harta Benda dalam Blog ini adalah bukan SelenaGomez punya.