earth

Guestbook

/* Iklan google ads */

Memberi Penomoran Komentar Pada Blogger

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 .....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    36 komentar

    mantep banget tutorialnya.. langsung arfi coba di blog indonesia arfi dan...... gak ada nomernya.. haaaaaaaaaaa

    17 Juni 2010 pukul 06.54  

    Punyaku sudah kang, selamat berkarya!

    17 Juni 2010 pukul 07.57  

    Menarik Kang..., suatu saat pengen nyobain ah kalau ada waktu...
    Moga2 bisa mempraktekkannya.. :D

    17 Juni 2010 pukul 08.47  

    wah keren kang !!!!
    ntar aku pengen kreasikan dah !!! agar lbih keren !!!!
    hehehhee .....


    Thnks dah share !!!

    17 Juni 2010 pukul 08.49  

    Tutorial baru lagi, Kang Enes. Oke, kapan-kapan bisa saya coba tipsnya di blog saya.

    Oh ya, terima kasih untuk tipsnya yang kemarin. Sudah saya coba dan berhasil.

    17 Juni 2010 pukul 09.16  

    Dengan nomor urut komentar menjadi lebih jelas: jumlahnya, komentar tertentu nomor berapa, dan sebagainya.

    Salam ukhuwah

    17 Juni 2010 pukul 11.03  

    hehe ... untuk membedakan komentar dan jawaban aja belum dikerjain, Kang. Eh, sapertos tugas, nya, padahal akang mah teu nugaskeun. beu!
    hehe, 'murid' yang aneh

    (Ani - Garut)

    17 Juni 2010 pukul 11.18  

    Kang...template ayu yang persahabatan LAtansa, kayanya bermasalah dech, soalnya usah di tambah pernak pernik lain....hikhik..

    17 Juni 2010 pukul 11.52  

    Silaturahmi kang! Selamat beraktifitas dan sukses!

    17 Juni 2010 pukul 13.15  

    Manttaaabb, dan langsung coba. Thanks bro, salam peace :)

    17 Juni 2010 pukul 15.26  

    Pengen kang sebenarnya, tapi blogku udah kebanyakan script dan beraaat xixixixixix....

    17 Juni 2010 pukul 23.03  

    ssalamualikum, kang saya punteun mau minta tolong ( tapi bila sempat dan ada waktu ), tegur seseorang telah copas karya saya, yang berjudul Penilaian cinta sejati. Haturnuhn.

    nama blognya :

    http://firrabous.blogspot.com/

    18 Juni 2010 pukul 06.04  

    Wah penomoran ya Sob....aku malah kurang suka....klo bikin penomorannya ngaack gmn Sob??? dari 11 langsung 22.....

    18 Juni 2010 pukul 12.04  

    Coba jangan..... Coba jangan ....... Coba jangan..... Coba jangan..... Coba jangan..... Coba jangan......

    <<lagi ngitung kancing..... hehehe.....

    18 Juni 2010 pukul 13.42  

    oke terimakasih sob ilmunya :) aku udah follow, follow balik yaaa :)

    18 Juni 2010 pukul 15.10  

    tutorial yang bagus, disimpen dulu shob ...

    19 Juni 2010 pukul 15.05  

    memang kelihatan lebih bagus kang kalau ada nomornya

    19 Juni 2010 pukul 23.41  

    ..mas.. saya mo tanya mengenai kasus 'blogging saya'..
    ..bgini :
    ..setiap saya bikin widget baru selalu saja gagal..ada dua widget dari blogger.com yang selalu menolak kecuali kita harus isi juga kotak isian diatasnya (judul); yaitu widget untuk teks dan widget untuk javascript/HTML. kalo' widget yang lain sih bisa...seperti widget untuk gambar, dan yang lainnya. jadi, kedua widget itu baru bisa kita buat JIKA KITA MEMBERIKAN TEKS PADA KOTAK ISIAN DIATAS (JUDUL) ITU...
    ..yang bikin heran; saya sudah ganti account dgn e-mail baru tentunya..tetep ga bisa, mencoba browser yang lain, bikin blog baru lagi, sampe' pindah 'komputer' (maksudnya pake kompi yg lain) ke warnet temen..., tetep aza ga bisa...
    kalo' blog saya di banned, masa iya ? account masih active..apa blogger.com lg error servernya..
    ..wah...repot.....maklum masih newbie......
    ..mohon pencerahannya, master ..^_^..
    oia. ini url blog saya : www.mamanjua.co.cc (Cool Inside)..

    BEST REGARD

    21 Juni 2010 pukul 15.21  

    kang klu buat penomoran pemilik blog dengan pengunjung blog gmna ya???

    4 Juli 2010 pukul 23.14  

    Assalamualaikum...saya dah coba kode yang di http://bloggerstop.net..tapi gak berhasil kang??

    10 November 2010 pukul 15.43  

    gak muncul nomornya kang

    1 Januari 2011 pukul 16.04  

    kang..
    kog g' muncul nomornya..

    3 Januari 2011 pukul 13.52  

    kang makasii ya atas tutorialnya sangat bermamfaat smuanya dan diuraikan secara transfarant dan mudah dipelajari dengan adanya /*keterangan*/ hingga mudah dipahami dan dimodifikasi... Nice blogs n kehadiran blog ne tentunya sangat brpran bt blogger indonesia... Slam kenal

    AQ blogger lama tp masih jadul2 hehe saran ne kang kalo bleh bt dunk artikel memenej blog agar nantinya gak brantakan bkn hanya dari design juga artikel yg terkandung seprti blog akang nice design, nice topic, smua termenej dgn...

    Satu lg kang kalo bleh minta design hasil modification template na atau sumber asal template ne soalnya aq dah capek kang sana sini cari template blog kek gini tapi gak ketemu jga... Tu pun kalo akang berkenan... minta template ne
    Mail : hipmawan@gmail.com
    Blog : www.hipmawanindonesia.blogspot.com

    6 Januari 2011 pukul 22.27  

    Makasih Ya... atas ilmuna..

    9 Januari 2011 pukul 17.15  

    mohon izin untuk digunakan cara ini.

    7 Maret 2012 pukul 14.05  

    gan,bagaimana membuat status facebook dari blog?

    5 Juni 2013 pukul 11.20  

    rumit kang, alis angel temen

    17 April 2014 pukul 16.16  

    Mau dicoba dulu gan.

    bagi agan yang berminat belajar membuat website sendiri bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

    1 Februari 2016 pukul 13.24  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler