Memberi Penomoran Komentar Pada Blogger

Memberi Penomoran Komentar Pada Blogger

Ditulis oleh waHyu yuwono minggu, 16 Januari 2011. Jam 22.07

Memberi penomoran pada komentar mungkin tidak terlalu penting tapi untuk supaya tampilan blog terlihat lebih menarik dan tampil beda hal itu sah-sah saja dilakukan, apalagi bagi kamu yang senang mengutak-ngatik blog dan memiliki posting-an yang banyak dikomentari orang.

Untuk menambahkan penomoran pada komentar ini sebenarnya mudah saja kamu dapat mengunjungi situs bloggerstop.net yang telah membuat kreasi menarik untuk penomoran komentar ini. Namun jika kamu lagi males buka-buka situs, apalagi harus menerjemahkannya kedalam bahasa RI, baca saja artikel ini, hehehe.....

Cara penambahan nomor komentar yang akan saya paparkan mungkin agak berbeda dengan sumber aslinya, namun hal itu tidak membuat penomoran komentar menjadi beda dengan aslinya.

Berikut adalah
langkah-langkah untuk membuatnya:

• Dari dasbor blogger pilih Rancangan - Edit HTML.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode berikut (Gunakan Control F atau F3):
  
  <dl id='comments-block'>
  Bagi kamu yang sudah menggunakan avatar blogger profile pada kotak komentar-nya, cari kode ini:
  
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
• Jika sudah ketemu, tambahkan kode ini di bawahnya:
  
  <!--Penomoran Komentar Kode 1-->
  <script type='text/javascript'>var CommentsCounter=0;</script>
  <!--/Penomoran Komentar Kode 1-->
• Selanjutnya cari kode berikut:
  
  <data:commentPostedByMsg/>
• Lalu tambahkan kode ini di bawahnya:
  
  <!--Penomoran Komentar Kode 2-->
  <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>
  <!--/Penomoran Komentar Kode 2-->
• Setelah itu cari ]]></b:skin>, lalu tambahkan CSS berikut di atasnya:
  
  /*---Penomoran Komentar dari http://bloggerstop.net---*/
  .comm-num a:link, .comm-num a:visited {
  color: #CC0000; /*warna huruf nomor komentar*/
  text-decoration: none !important;
  background: url(http://i49.tinypic.com/2zzhr4o.jpg) no-repeat;
  width: 39px;
  height: 43px;
  display: block;
  float: right;
  margin-right: 5px; /*posisi gambar dari kanan*/
  margin-top: -5px; /*posisi gambar dari atas*/
  text-align: center;
  font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif;
  font-size: 15px; /*ukuran huruf nomor komentar*/
  font-weight: normal;
  line-height: 30px;
  }
  .comm-num a:hover, .comm-num a:active {
  color: gray; /*warna huruf link hover*/
  text-decoration: none !important;
  font-weight: bold;
  }
  Kamu dapat mengubah warna huruf, gambar latar (background), posisi gambar, dan ukuran huruf sesuai keinginan kamu. Dan bagi kamu yang mengunakan scroll pada blok komentarnya, sebaiknya margin-top-nya dibuat 0px.
• Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Jika kamu ingin mengganti gambar background untuk nomornya, gantilah url http://i48.tinypic.com/o5oupx.jpg dengan url gambar yang kamu sukai. Tapi jangan lupa, ubah pula ukuran width dan height-nya sesuai ukuran gambar yang baru. Misalnya kamu akan mengganti dengan gambar yang berukuran 44x49 maka ubah width-nya menjadi 44px dan height-nya menjadi 49px.

Berikut adalah beberapa gambar yang bisa digunakan untuk background nomor komentar. Untuk mendapatkan url gambar ini, silahkan klik pada gambarnya:

Jika kamu ingin mendapatkan pilihan gambar background yang lainnya, silahkan kunjungi sumber aslinya di http://bloggerstop.net

Ok, segitu aja sob. Selamat mencoba .....