Memberi No Urut pada Komentar

Sebelum nya saya pernah membahas tentang cara membuat komentar admin berbeda warna background nya dengan pengunjung ...kalo sobat ingin membaca nya lagi silahkan klik di sini..

Kali ini kita mencoba belajar mempercantik kotak komentar kita dengan di bumbuhi icon nomor berurutan yang terlihat seperti icon komik -komik yang pernah kita baca he he belajar itu memang susah..!!! kadang sering terlihat bintang 7 di kepala kita (red : pusing) dengan kode-kode html yang ribet namun pada postingan ini saya tidak mengajak para sobat untuk ikut-ikutan pusing he he tapi justru sebalik nya di artikel ini saya mencoba membuat sobat senang dan  saling belajar dengan mudah untuk mempercantik blog yang kita kelola..

Karena itu harus di butuhkan sebuah perjuangan,pantang menyerah  dan rasa suka dengan dunia yang kita gelutin di dunia maya ini yaitu dunia blog ini agar kita dapat mudah memahami nya..bukan berarti menyukai Luna Maya ya...tapi di sukai juga boleh hi hi

Mari kita kembali ketopik...untuk mempermudah memahami cara pembuatan no urut pada kotak komentar silahkan di cermatin langkah-langkah di bawah :

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN

• Anda klik Edit HTML

• sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget  

 

• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard)

TAHAP PERTAMA

Cari kode Berikut :]]></b:skin>

Kalau sudah ketemu silahkan di copy kode di bawah ini terus letakan di atas kode ]]></b:skin>

/* ---------------
Comment Numbering
---------------------------------- */
.numberingcomments a:link, .numberingcomments a:visited {
color: white !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXzZPIoGnivALRWLCk76z654pwnI3hv68U3lGqM8M_sX6E2TK_g4WZrmpq1GomClMcMywaLzAd_EJZiyx4vZn7QoFHdJBMMHTtfaSYCzOHG2wqdIgaxKTXwWV0VfxOJ8CJVHSZYTTNq8/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;
}

TAHAP KEDUA

Saat pertama menerapkan dan mencoba nya ada beberapa kesulitan karena setiap blog mempunyai templete yang berbeda -beda setelah saya mencari informasi hilir mudik di setiap blog di bawah ini ada beberapa templete yang sobat miliki.

Nah..sekarang sobat cari cara di bawah ini yang mana sesuai dengan templete sobat

Cara Pertama :

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

Catatan :

• Kode yang warna merah kode tambahan atau yang disisipkan bisa sobat ketik atau copy  .
• Kode yang berwarna hitam kode html bawaan templete
• Usahakan Posisi letak penempatan kode yang di tambah kan seperti contoh di atas
• Simpan Templete

Cara Kedua :

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
 <b:loop values='data:post.comments' var='comment'>
<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
<dd class='comment-body'>

Catatan :

• Kode yang warna merah kode tambahan atau yang disisipkan bisa sobat ketik atau copy .
•  Kode yang berwarna hitam kode html bawaan templete
• Usahakan Posisi letak penempatan kode yang di tambah kan seperti contoh di atas
• Simpan Templete

Cara Ketiga

<b:loop values='data:post.comments' var='comment'>
<script type='text/javascript'>var CommentsCounter=0;</script>

<data:commentPostedByMsg/>
<span class='numberingcomments'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Catatan :

• Kode yang warna merah kode tambahan atau yang disisipkan bisa sobat ketik atau copy  .
• Kode yang berwarna hitam kode html bawaan templete
• Usahakan Posisi letak penempatan kode yang di tambah kan seperti contoh di atas
• Simpan Templete

TAHAP KETIGA SELESAI

Semoga berhasil ya...di tunggu kabar nya buruk dan baik nya di kotak komentar semoga dengan berbagi ilmu ini bisa membuat kita saling mengisi kekurangan - kekurangan yang ada...makasih..!!!

Sumber : Dunia Desain Web