tutorial post title hover with icon

hari nie pqah nak ajar korang buat post title  hover dgn icon comei2... nie contoh dia

gambar satu
klik tuk tumbesaran

 
gambar dua

korang tgk ada perbezaan dia... so yg ni la yg pqah nak ajar korang buat

design>edit html
1) cari code nie
.post-title {
 2) korang paste code yg nie diBAWAH code yg tadi
margin: 0px;
padding: 6px;
font-size: 115%;
font-weight: Normal;
font-color: #000000;
line-height: 1.1em;
text-align: right;
background: url(gambar background);
border-top: 4px solid #585858;
border-bottom: 3px solid #585858;
text-shadow: 2px 1px 2px #94B3FF;
}
.post-title:hover {
margin: 0px;
padding: 6px;
font-size: 115%;
font-weight: Normal;
font-color: #000000;
line-height: 1.1em;
text-align: right;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_12716074decoojp.gif);
background-position:center;
background-repeat:no-repeat;
border-top: 2px solid #585858;
border-bottom: 2px solid #585858;
text-shadow: 2px 1px 2px #94B3FF;
-webkit-transition: 1s;}
warna ungu tu url background yg korang nak letak 
warna kuning tu warna border dia korang letak je warna- warni pun asalkan cantik
warna merah tu icon comel yg korang nk letak


kalau x jadi comment ye pqah pun dah pening buat coding nie..=(
kalau x silap pqah selepas .post title tu ada code mcm nie
margin: 0px;
padding: 6px

kalau ada korang buang ye pastu baru korang copy step no.2 tu....

7 comments:

aisyahfarzana said...

tak jadi pon

scha vella said...

ala nape x jdik .. mesti slah coding nie cube tgk betul2... lepas code (.post-title {)ade code mcm nie x (margin: 0px; padding: 6px) ... kalau ada delete..

aisyahfarzana said...

boleh tak akak bagi kod yang blockquote kakak tu

aisyahfarzana said...

boleh tak kakak bagi kod blockquote kakak tu

Allesy Callesya Amiera said...

yeh jadi

scha vella said...

@Allesy Callesya Amiera =D

Unknown said...

jadi ... awak buat sendiri ke code2 nie? camne awak tau? hebat ~