Icon Dan Total Jumlah Komentar Sejajar Judul Posting
Oleh
Dalam template default bawaan blogger seperti template Minima, biasanya bila ada yang menulis komentar dalam postingan, maka jumlah yang menulis komentar itu ditampilkan dibawah postingan . Tetapi bagaimana caranya supaya Jumlah Total komentar Sejajar dengan Title Posting juga ditambah gambar atau icon . Akhirnya setelah melakukan beberapa kali uji coba, akhirnya ketemu juga caranya .
( Jangan lupa setiap kali ingin melihat kode yang tersembunyi didalam menu edit HTML diharuskan memberi tanda cheklist / centang pada Expand Template Widget . Karena kode jumlah komentar ini tersembunyi di dalam html, untuk melihatnya harus melakukan cara diatas ) .
Caranya adalah tentu dengan mencari kode untuk bagian komentar didalam html . Ternyata kodenya seperti dibawah ini :
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
Dari kode diatas ada beberapa bagian kode yang saya hapus . Nantinya yang tersisa hanya bagian kode seperti di bawah ini .
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
Setelah itu block kode diatas kemudian Cut, kenapa di Cut atau di potong , sebabnya adalah kode ini akan dipindahkan letaknya bukan lagi di tempat yang tadi tapi akan dipindahkan , cari kode seperti dibawah ini, kode dibawah ini adalah kode h3 untuk link dan judul posting .
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Setelah ketemu kode h3 diatas, kode yang tadi di Cut atau di potong untuk kode bagian kometar di letakkan atau dipindahkan kesini . Tapi meletakkan atau menyimpannya harus bawah kode ini :
<h3 class='post-title entry-title'>
Kode lengkapnya seperti ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Selesai merubah kode bagian diatas, selanjutnya bagaimana supaya jumlah komentar ada background gambar atau icon. Caranya tinggal menuju bagian kode CSS, cari kode class untuk link komentar, seperti ini kodenya :
.comment-link {
margin-$startSide:.6em;
}
setelah ketemu, tinggal tambahkan property dan value kedalamnya seperti ini , tapi terlebih dahulu hapus property margin dan ganti, jadinya seperti ini .
.comment-link {
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihrYXZPlyezG-gt1QWvqOpNdbr0zSxrSECZPfL2s4vp9VYsP7Ss_1st36vEKGHocKitF8GpBy_IXfQDKGTb0eYee-FyBqB5287Xh1BTiTRnWLiJjsN-UnL6QQ7YHqCizbhJD5lacFYDF26/s1600/iconComment.gif) no-repeat top;
float:right;
border:none;
width:47px;
padding-bottom:5px;
padding-right:7px;
font-size:12px;
text-align : center;
color:black;
}
Setelah selesai jangan lupa untuk Simpan Template , Supaya perubahan dan hasilnya disimpan dan di proses oleh mesin blogger .
+
Ada 0 komentar Untuk: Icon Dan Total Jumlah Komentar Sejajar Judul Posting
Posting Komentar Untuk Artikel Ini :