Blogger : Yorumları Numaralandırma

Şablonumuzun “Html Düzenle” bölümünde, yorumlara ait kod bölümüne birkaç küçük ekleme yaparak yorumlarınızı numaralandırabilirsiniz.
“Html Düzenle - -> Widget Şablonlarını Genişlet” dedikten sonra ctrl+f ile; id='comments-block' şeklinde arama yaparak kod parçasını buluyoruz. Daha önceden üzerinde bir oynama yapılmamış ise yorumların genel yapısı aşağıdaki gibi olcaktır.


<dl id='comments-block'>

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

</dt>

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

</b:loop>
</dl>


Yukarıda ki koda alttaki kodda gösterilen renkli kısımları ekliyoruz.

<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: 20px;'>
<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'>
.......
</dd>
</div>

</b:loop>
</dl>


Daha sonra ]]></b:skin> kodunu bularak hemen üst satırına alttaki kodu yapıştırıyoruz.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

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

Kaydedip çıkıyoruz.

Not:
İsterseniz bu kodlar üzerinde oynayarak stilini değiştirebilirsiniz...