Friday, 21 December 2012

Tutorial Post Title Icon With Special Hover


Assalamualaikum, wah internet sungguh pantas petang ni. Tutorial yang anis nak ajar ni lebih sesuai dengan template blogskin. Ada kira-kira empat jenis hover ikon comel ni. Tapi hari ni anis nak ajar yang post title dan sidebar title macam anis. Cuba try hover. Icon belah kanan tu berubah, kan? Haa, nak try tak? Jum jumm.

- Dashboard > Template
- search code </style> Lepas dah jumpa, copy kod bawah ni dan paste di atas </style>. Act kod yang .title { tu kod dari blogskin Yasmin yang saya pakai ni. Jadi saya creditkan kepada dia. Yang hover tu pula saya buat sendiri. Tiada kod orang lain. Ctrl+c untuk copy
.title {
padding:5px 5px 5px 30px;
background:url(Url Gambar) left center;
background-repeat:no-repeat;
font:17px georgia;
font-style:italic;
text-align:left;
letter-spacing: 2px;
color:black;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.title:hover {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
background:url(Url Gambar selepas dihover) left center;
background-repeat:no-repeat;
}
 PENTING ! Kalau korang ada kod post title sebelum ni, padam dan gantikan dengan kod anis tu. Lepas tu, sila ganti kan kod yang sama dengan kod title lama korang. Ok bab ni memang susah sikit. Kalau tak jadi biar anis editkan. Selesai, preview dan save. Mana nak cari icon yang comel-comel? Pergi KE SINI dan KE SINI. Serius comel.

2 comments:

aini shahroni said...

comey sangat!!
tapi blog saya x leh buat..
sebb xde code "style" tue

from ::Arkitek Hati

♥ Anis said...

Owh, mungkin lain template lain coding nye. Hehe :)