ADD NUMBER AND STYLE IN COMMENTS

Dapat lagi tutorial simple yang good good!!! Menambahkan nomor pada para komentator pada kotak komentar. Pusing-pusing deh bahasanya...huhehuhaho. Bawaan template sih biasanya tidak ada nomornya pada komentar. Kalau di template aku ini sudah ada. Nah bagi teman-teman yang mau menambahkan nomor pada para komentar di blog kalian, ayuk kita lanjut.

Tuh lihat contohnya!!! Bagaimana bagus kan. Kalau mau lihat jelasnya DEMO. Mudah kok caranya, kalau memang tertarik.
Kalau yang sudah memakai kode seperti :
<b:if cond='data:post.numComments == 1'> biasanya sudah ada sih nomor pada komentarnya. Kalau mau ganti dengan gaya ini harus dihilangkan dahulu. Oke kita lanjut pada pokok pembahasan.

1. Log in pada account blogger sobat --->Layout--->Edit HTML--->Centang Expand Widget Templates (Jangan lupa di Download Full Template dulu, tatut ada apa-apa)
2. Temukan kode berikut ini dengan menekan Ctrl + F
   <dl id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
Kalau tidak ketemu, cari yang seperti itu. Pokoknya harus ketemu gimana caranya juga...wekekekekkk.
3. Masukkan script berikut ini diantara kode tersebut (ditengah-tengahnya)
   <script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
   maka akan seperti ini :
   <dl id='comments-block'>
   <script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
   <b:loop values='data:post.comments' var='comment'>
4. Lalu cari kode berikut <data:commentPostedByMsg/>
5. Masukkan script berikut ini dibawah persis kode diatas
   <!--COMM-NUM-STARTS-->
   <span class='comm-num'>
   <a expr:href='data:comment.url' title='Comment Link'>
   <script type='text/javascript'>
   CommentsCounter=CommentsCounter+1;
   document.write(CommentsCounter)
   </script>
   </a>
   </span>
   <!--COMMNUM-STOPS-->
6. SAVE dan lihat, sobat sudah memiliki nomor pada para komentator.

Nah sekarang tinggal menambahkan CSS, untuk bisa tampil seperti demo/contoh pada gambar diatas. Maenkan kang...geb...geb...geboy.
Klik pada Layout--->Edit HTML--->cari kode </head> Setelah ketemu kodenya, ambil korek BAKAR MONITORNYA...Wakakakakkkk!!! Masukkan kode berikut, diatas/sebelum kode yang tadi (</head>)

<!--COMM-NUM-STARTS-http://beben-koben.blogspot.com-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://URL-LINK-GAMBAR.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*posisi gambar-komentar*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS-http://bloggerstop.net-->

Tulisan yang berwarna biru, untuk efek pada nomor komentar. Tulisan yang berwarna merah, efek pada gambar. Rubah sesuai dengan selera masing-masing.
Kalau mau metode yang kedua, cari kode ]]></b:skin> masukkan kodenya berikut diatasnya yaa :

.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://URL-LINK-GAMBAR.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*posisi gambar-komentar*/
text-align: center;
font-family: 'Century Gothic','Comic Sans MS',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}

Gambar yang mungkin mau dipakai (Klik-Kanan dan pilih "Ambil linknya coy"):

---

---

---

PENTING : Kalau mau memakai gambar yang tersedia atau gambar sendiri, dan hasil nomor komentar dengan gambarnya kurang mecong eh mecing, rubahlah kode CSS diatas yang bertuliskan /*posisi gambar-komentar*/.
margin-right: 5px;
margin-top: -15px;

HAPPY BLOGGING, GOD LUCK AND WASSALAM.

Source : BloggerStop.Net