Cara menyisipkan icon di blog blogger - by s2c3rr

Akhirnya dapat juga cara menyisipkan icon di blog setelah sekian lama mencari klik sono,sini tanya mbah goole enggak dapat juga mungkin kata kuncinya yang kurang pas tapi sekarang saya telah mempunyai inspirasi sendiri untuk dapatin itu caranya gampang koktinggal klik sedikit mikir jadi dech,,hehe,,:D jadi ngelantur ne.

Kayaknya langsung saja ya kita bahas untuk artikel kali ini saya ingin membahas cara menyisipkan icon di samping label,author,time dan jumlah komentar.mungkin udah banyak yang ngeshare tentang ini hanya saya kurang pas dengan ketwordnya untuk itu saya ingin membahasnya denagan keyword cara menyisipkan icon di blog.
Ikuti langkah-langkah di bawah ini untuk menyisipkan icon di blog.
1. Login Blogger.com
2. Di dasbor sobat pilih rancangan/Design >> Edit HTML
3. Expand template widget.
4. Cari kode ]]></b:skin>
5. Setelah ketemu letakkan kode di bawah ini di atasnya kode No.4.

.postmeta-primary{color:#555;font-size:11px;text-transform:uppercase;padding:0 0 5px 0}
.postmeta-secondary{color:#555;font-size:11px;padding:0 0 15px 0}
.postmeta-primary a,.postmeta-secondary a{color:#555}
.postmeta-primary a:hover,.postmeta-secondary a:hover{color:#3E81AC}
.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://i1220.photobucket.com/albums/dd456/cybersahrul/1304039211_alarm.png)}
.meta_author{background-image:url(http://i1220.photobucket.com/albums/dd456/cybersahrul/1304039329_administrator.png)}
.meta_comments{background-image:url(http://i1220.photobucket.com/albums/dd456/cybersahrul/1304039363_comment.png)}
.meta_categories{background-image:url(http://i1220.photobucket.com/albums/dd456/cybersahrul/1304040118_tag_blue.png)}
.meta_tags{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUjumFsqhUtAH15ydhz1wUdn7mxWr_XMmjSZlH0l8xTa2OLuZC6tGdVk8RCl05O1KxxiBcz2mJzV1ye5l2UX7bcbvSjPuIpPei-uYBO4C5HeKREhKSYo4CzYmdHNkoDRJ_zwLOPnRYeGy/s1600/tags.png)}

6. scroll ke bawah dan temukan kode

<div class='post-footer-line post-footer-line-1'>

7. ganti kode di bawah kode No.6 dengan kode di bawah ini.

<div class='postmeta-primary'>
<span class='meta_date'><data:post.timestamp/></span>
&amp;nbsp;<span class='meta_author'><data:post.author/></span>
&amp;nbsp;<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></span>
</div>

untuk yang jumlah komentar,jam dan pengepos artikel telah selesai tapi jangan beranjak dulu kita lanjut untuk pemasangan icon di samping labels.
8. untuk pemasangan icon di samping labels temukan kode

<div class='post-footer-line post-footer-line-2'>

Setelah ketemu ganti kode di bawah kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postmeta-secondary'>
<span class='meta_categories'>Labels: <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></span>
</div>
</b:if>
</div>

9. selesai dech...jangan lupa simpan templatenya.
Apabila sobat masih belum mengerti sobat bisa komentar.mungkin hanya ini yang dapat saya sampaikan pada artikel kali ini da semoga artikel kali ini bermanfaat bagi yang membutuhkannya.
selamat mencoba dan semoga sukses.

Share this: