Cara Memasang Nomor Urut Komentar

3/13/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger
Apa kabar sahabat blogger semua, dihari minggu yang cerah saya akan mengetengahkan sebuah trik untuk sahabat semua. Ttrik kali ini yang akan saya share adalah Cara Memasang Nomor Urut pada Komentar. Dengan sedikit modifikasi pada template maka tampilan komentar blog sobat akan lebih menarik dengan adanya nomor urut komentar.
Kalau di blog sobat belum ada nomor urut komentarnya, sobat bisa memasangnya dengan mengikuti tutorial di bawah ini :
Masuk ke blogger dengnan ID teman

Pilih Design >> Edit HTML

Backup terlebih dahulu sebelum sobat memulai untuk memodifikasi template,

Setelah itu cari kode ini ]]></b:skin> (biar cepat Ctrl+F)

Lalu kode di bawah ini tepat di atas kode ]]></b:skin>


.TrikBloggerKomentar{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

.TrikBloggerKomentar a:link, .TrikBloggerKomentar a:visited {color: #445566 !important; text-decoration: none !important;}
.TrikBloggerKomentar a:hover, .TrikBloggerKomentar a:active {color: #FF9933 !important; text-decoration: none !important;}



Untuk kode yang berwarna merah di atas, silahkan sobat ganti dan sesuaikan dengan warna template blog sobat.
Untuk kode warna silahkan sobat lihat DISINI

Kemudian cari kode seperti ini

<dl id='comments-block'>

Kode di atas berbeda-beda pada tiap template, jika belum ketemu coba kode seperti di bawah ini:

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

Setelah ketemu, perhatikan penempatan kode di bawah ini
(Intinya sobat hanya menyisipkan kode yang berwarna merah itu)


<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt 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='TrikBloggerKomentar'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>



Atau untuk sebagian template (jika kode di atas tidak ada)


Cari kode seperti 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'>

<div class='' expr:id='data:comment.id'>

<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='TrikBloggerKomentar'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' 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/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>


CATATAN
Bagi sobat yang sudah memasang fitur replay dan komen admin berbeda dengan pengunjung dapat melihat kodenya seperti di bawah:

<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'>
<div class='' expr:id='data:comment.id'>
<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='TrikBloggerKomentar'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

KODE REPLY DAN KODE KOMENTAR ADMIN BIASANYA DISINI

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' 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/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</b:if>
</div>


Setelah selesai simpanlah template sobat

Selamat mencoba dan semoga bermanfaat


RESENSI
Trik Blogger | http://trik-blogger-andreas.blogspot.com/2011/01/trik-memasang-nomor-urut-komentar.html





KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 comments

lawatan sore sobat...burung twitter bergerak jgn di pasang sob...langsung error kalau di buka di IE.

Balas

malem kang Fatur, mampir sambil baca-baca..
kabar baik tentunya

Balas