Memberi Penomoran Komentar Pada Blogger

Browse » Home » HTML Tutorials » Memberi Penomoran Komentar Pada Blogger

Memberi Penomoran Komentar Pada Blogger

Ditulis oleh Kang eNeS Kamis, 17 Juni 2010. 05.50
Label: HTML Tutorials komentar (36)

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;
}

Keterangan:
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 .....

Memberi Penomoran Komentar Pada Blogger

Artikel Terkait Dengan HTML Tutorials

36 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

36 komentar
Posting Komentar