My Blog List

Wednesday, July 29, 2009

Trick Penggunaan Nomor Komentar Blogger


Wah sudah lama tidak mengupdate artikel yang ada di blog ini, rasanya masih ada yang mangganjal di pikiran. Nah sekarang saya datang membawa sedikit trick baru untuk blog tercinta kita. Trick baru? kenapa saya sebut trick baru, karena trick ini masih jarang digunakan. Trick Penggunaan Nomor Komentar Blogger. Trus kayak gimana sih hasilnya?

Nah to the point aja, bagi yang mau install trick ini di blognya..... cara yang harus dilakukan relatif sederhana. Hanya memasukan beberapa kode kedalam templatenya.
  • Masuk kedalam account blogger sobat
  • Klik Layout Tab
  • Kemudian klik Edit HTML, dan check list option "Expand Widget Templates"
  • Lalu langkah berikutnya cari kode berikut "<dl id='comments-block'>"
  • Setelah itu rubah kode template anda menjadi sepeti berikut



  • 
    <b:includable id='comments' var='post'>
    
    ........
    
    <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='comment-number' 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>
    
    </b:loop>
    </dl>



  • Kode dengan tulisan berwarna merah dapat diganti sesuai dengan kebutuhan.
  • Sekarang kita menambahkan CSS untuk style dari penomoran komentar tersebut. Caranya dengan memasukkan kode CSS dibawah kedalam template sebelum kode ]]</b:skin>


  • .comment-number {
    float: right;
    background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
    width:53px;
    height:53px;
    padding:5px 0 0 0;
    margin-right: 5px;
    margin-top: -20px; /*comments-counter position*/
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 18px;
    font-weight: bold;
    }
    
    /*since the numbers are actually links, we need to force the color properties*/
    
    .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;
    }
    



  • Simpan template dengan menekan tombal "save"
  • Lihat hasilnya

Apabila sobat mengalami masalah dengan hasil yang didapat (contohnya posisi nomor), hal tersebut dapat diperbaiki dengan menyesuaikan point kode berikut.
margin-right: 5px; 
margin-top: -20px;

Salam
tipsandcara
Bookmark this post:
StumpleUpon DiggIt! Del.icio.us Blinklist Technorati Reddit


5 comments:

[+/-]Click to Show or Hide Old Comments

aab73 on July 30, 2009 at 11:11 PM said...

wah....trick baru nieh....!!

Ghustie Samosir on July 30, 2009 at 11:45 PM said...

Makasih infonya sob :)




Regards,
Ghustie Samosir

www.hanyainfo.blogspot.com



Ada bisnis menarik nih. Program bisnis investasi BCA dengan modal cuma Rp. 10.000,-
Bisa dapetin 3 x lipat atau lebih (lumayan buat beli cendol :D)
Gabung ya di www.investasibca.com

aab73 on July 31, 2009 at 12:22 AM said...

Thank's...............

R-E-Z-A on July 31, 2009 at 7:08 AM said...

keren sob

Ulil Amri on August 19, 2009 at 10:02 PM said...

nice info gan...

[+/-]Show or Hide Comments

Post a Comment

My Banner

Loud Launch Site Disclosure Statement

I have received financial compensation for some of the posts on your blog (in keeping with current FTC Regulations) as some posts are paid posts.
 

Copyright 2009 All Rights Reserved Magazine 4 column themes by One 4 All