Contoh no urut dengan gambar dapat di lihat gambar di atas.

Langsung ke cara ya, lagi males basa basi:



1. Login blog

2. Rancangan dan edit html







3. Centang expand widget template

4. Letakkan kode di bawah ini, di atas kode ]]><skin

/* www.cybermig.com*/

.numberingcomments a:link, .numberingcomments a:visited {

color: white !important;

text-decoration: none !important;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfoV2mR3MkaS-K41bR7vwERc5oWL0gShdSfaEKtyBRUez_FhSkMTSDZPSqn5-9H7p7SZOQHSgoIEb-cmzrJe3uXleuKEzeeoMRY3cjubcvW75zeUjCVu-F_CB03lU4Jxj96AeqBroWvz4/s1600/CloudNumb.jpg) no-repeat;

width: 50px;

height: 48px;

float: right;

display: block;

margin-right: 5px;

margin-top: -15px; /*comments-counter position*/

text-align: center;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 15px;

font-weight: normal;

}

.numberingcomments a:hover, .numberingcomments a:active {

color: gray !important;

text-decoration: none !important;

}

Url gambar berwarna merah dapat di ganti dengan url gambar sobat.



5. Kemudian cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Dan  letakkan kode script merah seperti kode di bawah ini:

<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='&quot;comment-author &quot; + 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>

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

              <data:commentPostedByMsg/>

              <span class='numberingcomments' style='float: right; font-size: 18px;'><a expr:href='data:comment.url' title='Comment Link'> <script type='text/javascript'>CommentsCounter=CommentsCounter+1;document.write(CommentsCounter) </script></a></span> </dt>

6. Selanjutnya  simpan template dan lihat hasilnya.



Demikian tutorial cara memberi  nomor komentar dengan gambar pada blog

apabila ada cara yang kurang di  mengerti dapat di tanyakkan di kotak komentar.

Semoga infonya bermanfaat.