Cara Membuat Icon Post-Author, Post-Timestamp, Post-Comment-Link, & Post-Labels

Jika Anda perhatikan dibawah postingan blog kita tertera tulisan “Diposkan oleh…di…komentar…label…..” Nah, kali ini saya ingin berbagi cara membuat icon di depan tulisan tadi sehingga tampilannya nanti akan seperti ini :

Untuk itu ikutilah langkah-langkah berikut ini : 

1. Log in ke www.blogger.com 
2. Klik Template 
3. Klik Edit HTML 
4. Backup dulu template Anda → centang expand widget template 
5. Cari kode ]]></b:skin>dengan menekan Ctrl+F di dalam kotak template

6. Copy paste kode berikut ini tepat di atas kode ]]></b:skin>
Kode Script:
.post-author{ background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/user.png); } .post-labels{ background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1-label.png); } .post-timestamp{ background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1b-clock.png); } .post-comment-link a.comment-link{ background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/komen.png); } .post-author,.post-labels,.post-timestamp,.post-comment-link a.comment-link{ background-size:auto 16px; padding-left:22px; background-repeat:no-repeat; background-attachment:scroll; background-position:left center; } .post-author,.post-labels,.post-timestamp,.post-comment-link{ margin-left:auto !important; margin-right:8px !important; }
7. Klik Pratinjau Template jika sudah ok, silakan simpan template Anda dan lihat blog 

Well done, selamat mencoba ^_^

 Sumber : http://dariblogkeren.blogspot.com/2012/03/pasang-icon-di-post-author-post-labels.html

0 comments:

Post a Comment