Friday, December 2, 2011

Tutorial: Post Blockquote | Shadow+Cute icon



Happy friday you all!! ^_^

Di penghulu segala hari neh mood aku tengah rajin nak buat tuto neh, so aku nak amik peluang nak kongsi sedikit ilmu yang aku ada dengan korang. Kali neh aku akan tunjuk ajar, how to put the shadow and the cute icon on your post blockquote. Ekceli this is my post blockquote new style, like this..


1) Dashboard | Design | Edit HTML | tick expand widget templates

2) Menggunakan ctrl F, cari kod di bawah neh

.post blockquote { 
*untuk kesihatan blog anda, kalo korang ada buat post blockquote/ post blocquote hover sebelum neh, sila delete dahulu ye*

3) Then sila copy kod di bawah neh dan paste di bawah kod yang dicari tuh

background: #FFFFFF;
background-image:url(URL IMAGE ICON);
background-position:bottom right;
background-repeat:no-repeat;
border: 2px solid #F5A9F2;
-moz-border-radius: 10px;border-radius: 10px;
-moz-box-shadow: 0 0 4px 4px #F6CEF5;
-webkit-box-shadow: 0 0 4px 4px #F6CEF5;
box-shadow: 0 0 4px 4px #F6CEF5;
padding: 7px;}

blockquote:hover {
background: #FFFFFF;
background-image:url(URL IMAGE ICON);
background-position:bottom right;
background-repeat:no-repeat;
border: 2px solid #A9D0F5;
-moz-border-radius: 10px;border-radius: 10px;
-moz-box-shadow: 0 0 4px 4px #CEE3F6;
-webkit-box-shadow: 0 0 4px 4px #CEE3F6;
box-shadow: 0 0 4px 4px #CEE3F6;
}
Kalo korang pasan, kod bahagian bahagian atas itu adalah kod untuk post blockqoute yang asal dan bahagian bawah tuh adalah selepas hover post blockquote.

note* 
#FFFFFF | kod warna boleh tengok SINI
 URL IMAGE ICON | url image icon korang
2px solid #A9D0F5 | 2px-ketebalan border, solid-boleh tukar dashed, dotted, #A9D0F5-warna border
10px | lengkung border, nak lagi lengkung cer tukar ke 100, tengok keajaibannya. hahah

4) Dah siap tuh, Preview dulu baru boleh Save.

Done! ^_^
Photobucket

Thanks for your reading love! =D

0 00 orang duk bersembang:

Related Posts Plugin for WordPress, Blogger...