Cara menomori kotak komentar pada blogger

Tweet

Dalam tutorial terakhir saya menunjukkan Anda bagaimana Anda dapat menambahkan gelembung komentar untuk judul posting blogger . Tapi ini hack Blogger akan menambahkan nomor dengan gelembung di semua komentar di blog Anda. Setiap angka akan dihubungkan dengan komentar itu sehingga Anda & pembaca Anda dapat menggunakan nomor dan link yang sesuai lagi atau titik komentar tertentu pada salah satu posting Anda. Ini bekerja hanya dengan sistem komentar blogger sebelumnya, karena itu jika Anda ingin menambahkan hack ini, Anda harus terlebih dahulu menghapus komentar Blogger threaded. Pelajari di sini Bagaimana menghapus Blogger berulir komentar. Sekarang Anda dapat menambahkan gelembung komentar untuk komentar berulir Anda juga.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu Template > Edit HTML > Proceed > centang Expand Template Widget
3. Cari kode dibawah ini :

<b:loop values='data:post.comments' var='comment'>

   4.  Masukkan kode dibawah ini, diatas pada kode diatas :

<script type='text/javascript'>var CommentsCounter=0;</script>

   5.  Cari kode dibawah ini :

<data:commentPostedByMsg/>

   6.  Paste kode dibawah ini, tepat dibawah pada kode diatas :

<!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops--> 

   7.  Cari kode dibawah ini :

 </head>

   8. Paste kode dibawah ini tepat diatas pada kode diatas :

<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaL0IR9W60Y10z-VlAHFtdLX-1-gbpVqpKmSWUv9-b6_no92opkJKmyDYkvYOXznuh1kz5_O_6OZo7NBa1Qy7OBYT65EDH31QtH95kxEVRnpjjyXPWHZbH3dN24H8FB3BqQEQZ1eW4I8MV/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://helplogger.blogspot.com--> 

Pengaturan:

1. Untuk mengubah foto, mengedit kode biru di atas dan salin URL pada gambar .png dibawah ini :
   
2. Untuk mengubah warna dari angka-angka, mengedit kode warna hijau

Penting:

1. Anda mungkin menggunakan gambar bukan yang terkait dalam kode di atas (step 8), tetapi Anda harus menyebutkan dimensi dengan benar (lebar dan tinggi) untuk penempatan yang benar dari nomor pada gambar.

   9.  Preview dan simpan template Anda dan nikmati kotak komentar baru Anda.