20 Desember 2010

Memasang Nomor Urut pada Komentar

Komentar dalam setiap blog berbeda-beda tampilannya. Ada yang diberi nomor tiap komentar, dan ada yang tidak sama sekali. Silahkan cek bagian komentar blog anda, jika komentar blog anda tidak mempunyai no urut tiap komentar yang masuk silahkan anda ikuti penjelasan yang akan say berikan.
Desain komentar itu sangat penting, kenapa??..Karen dari situlah pengunjung blog anda akan ditarik oleh desain anda untuk memberi komentar. Anda maukan dikasih komentar pada setiap postingan anda?, yang pasti komentar itu sangat menbangun dalam kebaikan bog kita.
Suatu saat saya berjalan-jalan ke blog saudara saya di AZIS LAMAYUDA., di sana saya endapatkan pelajaran banyak sekali. Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut.

1. Masuk ke blogger dengnan ID teman
2. Pilih Rancangan
3. Terus silahkan pilih Edit HTML
4. Kemudian cari kode seperti ini ]]></b:skin> (biar cepat Ctrl+F)
5. Kemudian letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.Nomorz33sPesan{
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;
}

.Nomorz33sPesan a:link, .Nomorz33sPesan a:visited {color: #445566 !important; text-decoration: none !important;}
.Nomorz33sPesan a:hover, .Nomorz33sPesan a:active {color: #FF9933 !important; text-decoration: none !important;}
Untuk kode yang berwrna merah di atas, silahkan anda ganti dengan kode warna yang anda sukai. Untuk kode warna silahkan anda lihat DISINI

6. 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'>
7. Setelah ketemu, perhatikan penempatan kode yang berwarna hijau di Bawah ini
    (Intinya kalain hanya menyisipkan kode yang berwarna hijau 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='Nomorz33sPesan'>
<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)
<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='Nomorz33sPesan'>
<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>
TAMBAHAN: 
Bagi kalian 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='Nomorz33sPesan'>
<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>
 INGAT KALIAN HANYA MENAMBAHKAN KODE WARNA hijau
8. Jangan Lupa Simpan Template
SELESAI..
Selamat mencoba, semoga bermanfaat.

2 komentar:

Anonim mengatakan...

salam kenal dan met tahun baru sob, infonya sangat menarik nanti saya coba, makasih atas infonya

Unknown mengatakan...

@andreas: trima kasih juga buat kunjungannya sob. Semoga bermanfaat yeah tutornya...

Masukkan email kamu untuk berlangganan tulisan dengan saya :

Delivered by FeedBurner