Jumat, 29 Januari 2010

cara menambah avatar di kolom komentar blogspot

Tentu ramai diantara anda yang sudah mengetahui tentang feature terbaru yang ada di blogger.Sebelum ini blogger baru sahaja menambah fungsi read more kini mereka telah menambah lagi fungsi yang baru di blog blogspot iaitu Avatar pemberi komen.Nampaknya blogger telah sedikit sebanyak membuat improve kepada blogspot sempena birthday blogger dan aku mengharapkan agar blogger dapat menambah berbagai-bagai lagi fungsi yang berguna kepada blogspot seperti thread comment dan sebagainya.Sila pergi ke bloggerbuzz untuk mengetahui dengan lebih lanjut
Jika sebelum ini aku ada menunjukkan bagaimana cara untuk menampilkan avatar dari mybloglog sila rujuk sini pada kali ini aku akan tunjukkan bagaimana cara untuk menampilkan avatar dari blogger.Sesetengah template memang sudah sedia ada fungsi Avatar ini tetapi kepada sesetengah template mungkin tiada jadi anda perlu membuat sedikit penambahan kode untuk menampilkan Avatar itu.Sila rujuk dibawah untuk keterangan lanjut.
1.Pergi ke Dashboard--->layout---->Edit HTML.
2.kemudian cari kode </b:skin> tekan CTR+F jika menggunakan firefox.
setelah itu pastekan kode dibawah ini diatas kode yang anda cari tadi

#comments-block .avatar-image-container img {
background:transparent url(http://tinyurl.com/yahswtb) no-repeat scroll left top;
border:medium none;
float:left;
height:45px;
width:45px;
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px
}
#comments-block .avatar-image-container {
background:transparent url(http://tinyurl.com/yahswtb) no-repeat scroll left top;
height:45px;
left:-45px;
position:absolute;
width:45px
}
#comments-block.avatar-comment-indent{
margin-left:45px;
position:relative
}
#comments-block.avatar-comment-indent dd {
margin-left:0
}
iframe.avatar-hovercard-iframe{
border:0 none;
padding:0;
width:25em;
height:9.4em;
margin:.5em
}



Sila savekan setelah siap.
3.Kemudian anda cari kode dibawah ini pula sila berikan tanda didalam kotak expand widget template.
Kode dibawah ini hanya separuh cari kode ini sehingga habis.


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>

.......................................................

</b:loop>
</dl>
 Setelah jumpa anda gantikan semua kode diatas itu dengan kode dibawah ini.


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <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/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>






Kemudian klik save.Selesai semoga berjaya.

1 comments:

Septian D Chandra mengatakan...

Mantab Gan :D
Sukses Diterapkan !!

Posting Komentar

test

1
´