Tutorial Post Title & Sidebar Icon With Special Hover (Designer)

*preview sebelum dan selepas hover*

Assalamualaikum, hi. Ok tadi anis update tutorial untuk blogskin. Pergi ke Tutorial Post Title Icon With Special Hover (Blogskin). Comel lah hover ni. Betul anis tak tipu. Ini hanya untuk Template Designer seperti Simple, Denim, Washed Denim. Untuk tutorial yang ini, anis ada sediakan kod untuk post title dan sidebar title. Jom kita cuba.

- Dashboard > Template > Edit HTML.

- Ctrl+f cari kod yang anis bagi ni ek.

Untuk Simple Template cari kod : 

h3.post-title { 

atau

h3.post-title, .comments h4 {

Untuk Template Denim dan Washed Denim cari kod :

.post-title { 

- Kalau dah jumpa, copy kod di bawah dan paste di bawah kod yang anda cari tadi.

padding:5px 5px 5px 30px;
background:url(http://media.tumblr.com/tumblr_m4i90xtAq01qdlkyg.gif) left center;
background-repeat:no-repeat;
border-bottom: 1px solid #eee;
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;
}
.post-title:hover {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
background:url(http://media.tumblr.com/tumblr_m4i90j9kTi1qdlkyg.gif) left center;
background-repeat:no-repeat;
}

anis kredit kod kepada blogskin Yasmin. Sekarang, untuk sidebar pulak. Ctrl+f sila cari kod ini :

.sidebar h2 {

- Jika sudah jumpa, copy kod bawah ni dan pastekan di bawah kod sidebar tu. Gantikan je anak-anak kod tu.

.sidebar h2 {
padding:5px 5px 5px 30px;
background:url(http://media.tumblr.com/tumblr_m9rax0BtEn1qdlkyg.gif) left center;
background-repeat:no-repeat;
border-bottom: 1px solid #eee;
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;
text-transform: inherit;
}
.sidebar h2:hover {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
background:url(http://media.tumblr.com/tumblr_m9raw6wKxt1qdlkyg.gif) left center;
background-repeat:no-repeat;
}

 Main puzzle! Merah untuk url image boleh cari disini dan disini. Bye, anis hanya mahu share kepada semua :)

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---