9 Memasang comment count di blog dengan Bubble style

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.

Sumber: Forantum

Label: Blogger, Tutorial Blog