Credits
Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog Vagabundia berasal dari Buenos Aires, Argentina.
Menambah nomor urut komentar
Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.
Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>
.
.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}
- Untuk merubah letak nomor ke kanan (
right
) atau ke kiri (left
) dapat Anda lihat pada atribut kode yang berwarna biru. - Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
- Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
- Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.
Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
Sisipkan kode yang berwarna merah di antara kode-kode di atas.
HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.
<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
Kostumisasi nomor urut komentar
Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:
.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}
.numberingcomments:after {content:"."}
Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.
ini bagus supaya kita tau komentar kita nomor berapa.
BalasHapuskunjungan perdana nih, kunjungi blog saya ya, berisi tips ngeblog yang pasti bermanfaat untuk blogger
salam kenal,
Regi Adi
@RegiAdi:
BalasHapusAduh, mas. Blognya lagi didandani, yah. Cuman bisa baca artikelnya saja.
Betul, mas. Memang topik trik ini udah termasuk lama publish, tapi penggunaannya masih tetap hangat sampai sekarang.
@OB
BalasHapuswah mantep blog nya si om ini. ternyata masih banyak tutor" keren di banyaknya blog tutor abal-abal.
salut om.
Trend 2011, blog minimalis dengan konten berbobot, contohnya blog ini
BalasHapusmantap...thanks your share Informationns and tutorial greetings Good luck always
BalasHapusmakasih banyak y Tutorial nya sangt bermanfaat...
BalasHapussalam kenal good luck always kawan
di bookmark dulu gan artikelnya, nanti dibaca lagi.
BalasHapusnice info gan,,,
BalasHapusthanks for the tips i will implement it :)
BalasHapusmakasih ats infox....
BalasHapusbiasanya org menggunakan gmbar tp lbih baik css sj ya mas, spy lbih ringan...
This is an amazing post. I like this post very much and very informative post. All things are described in very beautiful way. I think you should continue to make this type of post.
BalasHapusartikel bagus...thanks gan
BalasHapusmantaff gan..
BalasHapuslangsung coba gan..
Komentar blog saa belum banyak, jadi kayaknya belm buth bat paka nomor..
BalasHapusWah blog baru saya malah belum ada komentarnya,, jadi mungkin di pasang juga percuma..
BalasHapusKeren juga Mas OB
BalasHapuskemarin kita taunya membuat nomor komentar floatingnya ke kanan ujung..
mau ngedit blog, tapi gak bisa masuk gara-gara pake verifikasi 2 langkah tapi hape malah gatau kenapa tu, huft.. bookmark dulu deh XD
BalasHapus@lavhalitya:
BalasHapusMakanya, gan disimpan kode cadangan yang 10 biji. Jadi bisa digunakan sewaktu-waktu. Saya juga pake verifikasi 2 langkah, tapi dulu, sekarang ngga lagi. Agak ribet sebabnya :D
bgus tuh klw ada penomeran / urutan komentar,,setujuu2
BalasHapusTerima kasih atas informasinya,
BalasHapusSukses selalu...
saya juga menerapkan ini wkwkwk... (promo buat lebaran)
BalasHapusSharing yang bermanfaat, trim
BalasHapus@RegiAdi aaaa
BalasHapusAmazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil
BalasHapusTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
BalasHapusTerima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba
BalasHapusaku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu
BalasHapusSetelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses
BalasHapusTerima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapuscemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih
BalasHapusTulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.
BalasHapusTips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses
BalasHapusAmazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses
BalasHapusTips dan Info menarik, boleh dicoba, Semoga berhasil
BalasHapusSetelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu
BalasHapusSetelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu
BalasHapusSaya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil
BalasHapusSaya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil
BalasHapusSaya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil
BalasHapusSaya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil
BalasHapusIlmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapusIlmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapusArtikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu
BalasHapusBaru kali ini saya membaca Artikel yang sangat membangun. Boleh dicoba
BalasHapusboleh di coba tipsnya dan artikelnya
BalasHapusTipsnya boleh dicoba, Artikelnya sangat bermanfaat.
BalasHapusTerimaksih untuk info yang sangat efektif, boleh dicoba.
BalasHapusTerimaksih untuk Info yang sangat Amazing, boleh dicoba.
BalasHapusSangat Amazing Artikel dan Info. Wajib di coba.
BalasHapusSebanyak saya membaca Artikel,baru kali ini saya menemukan Artikel yang Amazing. boleh di coba. Terimaksih
BalasHapusTips dan Info menarik, boleh dicoba, Semoga berhasil
BalasHapusWibesite yang sangat Amazing, Artikel dan Tipsnya boleh dicoba. Semangat !!
BalasHapusAmazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil
BalasHapusTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
BalasHapusaku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu
BalasHapuscemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih
BalasHapuscemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih
BalasHapusTips dan Info menarik, boleh dicoba, Semoga berhasil
BalasHapusAmazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil
BalasHapusTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
BalasHapusTerima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba
BalasHapusaku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu
BalasHapusSetelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses
BalasHapusTerima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapuscemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih
BalasHapusTulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.
BalasHapusTips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses
BalasHapusAmazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses
BalasHapusReally its a good news.This site has lots of advantage. I found many interesting things from this site. I like it very much. Its so interesting.I want to sharing this topic with some of my close friends. So thanks this post.
BalasHapusI know the compensation is comparative ...
BalasHapusmantapss gan
BalasHapusizin copas gan untuk arsip ilmu css, terima kasih gan sudah banyak berbagi
BalasHapusthanks buat infonya ... :)
BalasHapuswajib di coba... tpi kenapa di blogku tidak bisa sobbb..???
BalasHapusmakasih infonya.
BalasHapus