IZZAHASHARI[DOT]BLOGSPOT[DOT]COM

Sunday, 18 March 2012

Tutorial : Blockquote . (Hover border melengkung)

Assalamualaikum .

Hai semua ^_^v . Kali ni Izzah nak ajar korang macam mana nak buat blockquote yang biasa punya dia ada border right and left . Border right and left tu akan straight je bentuk dia . Bila kita halakan cursor kat blockquote tu border right and left tu akan jadi melengkung .Jom Mula :)

1.Log in blog > Dashboard > Design > Edit HTML > Tick Expand Widget Templates .
*Jika anda ada guna blockquote sekarang,sila delete kod-kod tu ok . Hehe , nanti tak jadi pulak*

2.Korang tekan Ctrl+F serentak dan cari kod ini :

.post blockquote {

3.Dah jumpa ? Okey . Korang copy kod ni dan paste di bahagian bawah kod yang korang cari tadi :

background: url(URL BACKGROUND SEBELUM HOVER)
border-left: 4px solid #000000;
border-right: 4px solid #000000;
-webkit-transition-duration: 0.5s;
}
.post blockquote:hover{
background: url (URL BACKGROUND SELEPAS HOVER)
border-left: 4px solid #000000;
border-right: 4px solid #000000;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(-1.deg,-1.5deg);
-webkit-transition: 0.5s;
}

NOTES :
IZZAH : URL BACKGROUND BLOCKQUOTE korang sebelum hover .
IZZAH : Warna border left korang .
IZZAH : Warna border right korang .
IZZAH : URL BACKGROUND BLOCKQUOTE korang selepas hover .
IZZAH : Warna border left selepas hover .
IZZAH : Warna border right selepas hover .

Kod warna dapatkan di sini > http://immigration-usa.com/html_colors.html

4.Kalau korang dah tukar semua tu , korang kena PREVIEW dulu . Kalau tiada Error baru boleh SAVE .

Selamat Mencuba ^_^v .

Assalamualaikum !

0 Comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...
This blog fully designed by IZZAHASHARI | Dont copy my tutorials or my entries ! | Alright reserved by IzzahAshari