Menambah nomor urut komentar pada Blog

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.