Memasang Comment Count Di Blog

1274007132_bubble_48 Tutorial memasang comment count memang sudah sering kita jumpai di berbagai tutorial blog, namun tidak ada salahnya kita bahas sama-sama. Kemarin lusa ada sobat blogger yang menanyakan tentang hal ini lewat facebook, dan kebetulan saya belum pernah menulis tutorial ini. Comment count atau comment bubble atau lebih mudahnya adalah kotak kecil yang berisi jumlah komentar dalam setiap postingan. Biasanya comment count pada umumnya terletak dibagian kanan atas postingan. Berikut tutorial singkatnya.

 

  • Masuk ke Tata Letak.
  • Klik tab Edit HTML.
  • Jangan lupa untuk membackup template terlebih dahulu sebelum melakukan pengeditan.
  • Klik radio radio button Expand Template Widget.
  • Kemudian letakkan kode css berikut ini diatas kode ]]></b:skin>

    .comment-count {
    background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/S_AGNIqF3nI/AAAAAAAAD4A/3onsvK0-jmA/1274007079_speech_bubble_48_thumb%5B3%5D.png) no-repeat;
    float: right;
    font-family: maiandra gd, arial;
    font-size: 10px;
    text-align: center;
    width: 28px;
    height: 28px;
    margin-top: -5px;
    margin-right: 2px;
    padding-top: 5px;
    }

  • Setelah itu kode yang ditambahkan adalah seperti dibawah :

    <b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <span class='comment-count'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
    </b:if>
    </span>
    </b:if>

    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>

  • Kode yang berwarna merah adalah kode yang harus sobat sisipkan.
  • Simpan Template.

 

Yang harus diperhatikan adalah margin-top:-5px dan padding-top:5px, karena itulah yang akan menentukan letak tinggi rendahnya widget comment count ini. Silahkan diatur sesuai template sobat, karena setiap template mempunyai karakter yang berbeda-beda.

 

Semoga berhasil.

 

Berlangganan artikel terbaru via Email
Artikel Lainnya :

10 comments

17 Mei 2010 pukul 02.14

Aku simpan dulu sob...
Thanks.

17 Mei 2010 pukul 05.28

ok sobat saya coba dulu yah :D
terimaksih banyak...
oya kalau ada demonya gan hehehhe :D

17 Mei 2010 pukul 07.53

sementara demonya ada di blog saya walaupun hanya mirip, lihat dihalaman depan blog saya

17 Mei 2010 pukul 09.42

hm...
pengen nyoba tapi masih bingung...
pengennya sih di kasih tau langsung...
hehehe...
tapi makasih banyak ya infonya....

Nice post..
thanks.. :)

21 Mei 2010 pukul 01.49

makasih ya kk...
centerol.blogspot.com

3 Juni 2010 pukul 22.39

Thank's berat tutornya... salamkenal.

2 Juli 2010 pukul 19.28

mas, minta bantuan...
padding sama margin apa bedanya ?

2 Juli 2010 pukul 23.14

@Berbagi Itu Indah : margin adalah jarak antara widget/kolom postingan/sidebar atau apa aja, padding adalah jarak tulisan/isi widget/sidebar/post/header dengan garis tepi(border)

Posting Komentar

Reader Community

Recent Comments