Memasang Icon Pada Post Footer Element

Disini kita akan belajar mengganti icon pada post footer element, yang terdiri dari 'posted by', 'label', 'comment link', 'email this post'. Kalau Anda tertarik silahkan coba.
1. Masuk ke 'Tata Letak'
2. Pilih 'Elemen Halaman'
3. klik edit Post, lalu akan keluar gambar seperti dibawah ini.Centang seperti yang sudah saya lingkari pada gambar diatas.
4. Sesudah itu atur sendiri letak Post body.
5. Save

Sekarang kita masuk ke Edit HTML, disini ada 4Tahap. Namun sebelumnya jangan lupa back up your template dan centang Expand template Widget.

Tahap1:
cari kode seperti berikut

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

{Ganti 1.4em dengan 2em (untuk icon 16X16px), dan untuk icon yang lebih besar lagi silahkan tambah nilainya. }

NB: "Ingat, bila Anda kesusahan mencari kode tersebut, silahkan gunakan CTRL+F"

Tahap2:
Cari kode berikut:

.comment-link {
margin-$startSide:.6em;
}

Kemudian ganti kode diatas dengan kode dibawah ini:

.post-author {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}
.post-labels {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}

.comment-link1 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
margin-right: 5px;
}

.comment-link2 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 23px;
margin-right: 5px;
}

.post-icons {
margin-right: 5px;
}

Sebelumnya siapkan dulu icon yang hendak Anda pasangkan. Sebagai referensi Anda dapat mengunjungi situs ini www.freeiconsweb.com

Setelah itu ganti tulisan warna-warni didalam kode diatas dengan alamat URL ICON ANDA.
Keterangan:
Untuk warna merah URL ADDRESS OF THE ICON , icon ini akan muncul disamping posted by
Untuk warnabiru URL ADDRESS OF THE ICON , icon ini akan muncul disamping label
Untuk warna kuning URL ADDRESS OF THE ICON , icon ini akan muncul disamping comment link
Untuk warna hijau URL ADDRESS OF THE ICON , icon ini akan muncul di samping link to this post

Tahap 3:

Cari kode ini post-comment-link atau tepatnya keseluruhan kode sebagai berikut:

<span class="post-comment-link">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:post.allowComments">
<a class="comment-link" href="data:post.addCommentUrl" onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1">1 <data:top.commentlabel><b:else><data:post.numcomments> <data:top.commentlabelplural></data:top.commentlabelplural></data:post.numcomments></b:else></data:top.commentlabel></b:if></a>
</b:if>
</b:if>
</span>

(Lihat baik-baik, tulisan berwarna merah. Tambahkan angka 1 tepat dibelakang comment-link)
hasilnya seperti ini: <a class="comment-link1"

Kemudian cari kode <span class='post-backlinks post-comment-link'> dan keseluruhannya sebagai berikut:

span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

(Tambahkan huruf 2, dibelakang kode <a class='comment-link'. Hasilnya seperti ini <a class='comment-link2' )

Tahap 4:
Cari kode berikut ini:

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>Email Post ini
</a>
</span>
</b:if>

(Ganti link biru dengan Alamat URL ICON KAMU; warna merah ganti dengan angka menurut besar kecil icon Anda; dan terakhir warna hijau ganti dengan teks yang Anda mau.)

Dan setelah semua selesai, silahkan SAVE.

Selamat mencoba

Memasang Icon Pada Post Footer Element