Monday, April 25, 2011

Tutorial: New Style Blockquote #5

Kali ni punya blockquote dia ada shadow bila korang sentuh cursor kat blockquote tersebut . Then , ada icon comel keluar kat situ . Yeaah wanna to try ? Let's do it !


1 Dashboard > Design > Edit HTML > Tick Expand Widget Template

2 Search this code :
.post blockquote { or blockquote {
3 Copy these code and pastekan kat bawah code korang cari tadi
background:url(URL BACKGROUND);
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-radius: 5px;
margin:1em 20px;
padding: 5px;
}
.post blockquote:hover {
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
-moz-box-shadow: 0 0 10px #BDBDBD;
-webkit-box-shadow: 0 0 18px #BDBDBD;
}
4 Preview dulu takut tak menjadi . Kalau dah okay baru save !

No comments: