Menambahkan Icon Pada Post Footer Area Agar Lebih Expressif



Jika belum tau apa itu post footer area lihat aja gambar di samping, Nah post footer adalah informasi dari postingan yang kita tulis di blogger yang tempatnya dibawah postingan kita, dalam post footer area terdapat infromasi-informasi tentang postingan yang ada diatasnya, misalnya siapa penulisnya, jam berapa dipublikasikan, sudah ada berapa komentar, artikel tersebut masuk dalam kategori apa dan juga yang lainya.

Gimana apakah Anda ingin membuat post footer area Anda lebih expressif dengan tambahan Icon?

Okelah.. ikuti langkah-langkah berikut di bawah ini:

Seperti biasa yaitu masuk menu
Layout (tata letak) lalu masuk meni Edit HTML.

taruh code CSS dibawah ini diatas code
]]></b:skin>




/* post fotter
---------------------------*/
.post-author {
background: url(http://i296.photobucket.com/albums/mm169/anasku/profile.gif) no-repeat;
padding-left: 20px;
color: #c70823;}
.post-timestamp {
background: url(http://i296.photobucket.com/albums/mm169/anasku/jam.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-labels {
background: url(http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png) no-repeat;
padding-left: 25px; margin-left: 10px;
}
.comment-link {
background: url(http://i296.photobucket.com/albums/mm169/anasku/comment-icon.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-backlinks {
background: url(http://i296.photobucket.com/albums/mm169/anasku/favorit.gif) no-repeat;
padding-left: 15px;
}

Kalau sudah tinggal Save dan jadi deh...

Nah code yang
berwarna merah diatas adalah URL gambar... bisa kamu ganti dengan gambar sendiri, ingat sesuaikan ukuranya..

Nah gimana caranya gampang kan??
hehe..
semoga berhasil kawan, selamat mencoba.. :D

0 komentar:

Posting Komentar

◄ Newer Post Older Post ►
 

Copyright 2011 The Next Level is proudly powered by blogger.com | Design by Tutorial Blogspot Published by Template Blogger