ads here

CARA MENAMPILKAN JUMLAH KOMENTAR DI SEBELAH KANAN ATAS POSTINGAN

Ini bukan semata hanya atribut hiasan blog, penghitung jumlah komentar dalam bentuk bubble di sebelah kanan atas blog. Tentu saja sebagai "asesories" bukanlah widget yang wajib kita pasang, tapi siapa tahu anda berminat karena bukankah pada template template blogger premium terdapat juga comment counter serupa?

Saya memanfaatkannya untuk memonitor komentar langsung melalui homepage blog, sehingga saya bisa menjawab setiap komen dengan mudah dan cepat, nah ada manfaatnya juga bukan?
Tampilan bubble comment counter buatan editblogtema pada HomePage Blogger
Widget ini termasuk responsive karena otomatis bisa tampil pada layar besar dan kecil. Saya memanipulasinya dengan memanfaatkan elemen kode CSS dan HTML jika anda menginginkannya pastikan juga template blogger anda telah terpasang font awsome.

Langkah membuatnya:

  1. Masuk kepengaturan atau dasbor blogger
  2. Pilih tema atau template
  3. Pilih editHTM
Temukan kode ]]></b:skin> lalu copy kode CSS yang telah saya edit di bawah ini dan letakan diatasnya:

a.comment-bubble:hover{color:#6495ED;}
a.comment-bubble {
float:right;
width:34px;
height:18px;
text-align: center;
white-space:nowrap;
font: bold 14px monospace;
color:#000;
position:relative;
margin-left: 6px;margin-top: 3px;
padding-top:2px;
background:#6495ED; /* fallback */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFB6C1), to(#fff));
background:-webkit-linear-gradient(#FFB6C1, #fff);
background:-moz-linear-gradient(#FFB6C1, #fff);
background:-o-linear-gradient(#f8dd99, #fff);
background:linear-gradient(#6495ED, #fff);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border: 1px solid #dd8808;
border-bottom-color: #f8dd99;
border-right-color: #f8dd99;
}
a.comment-bubble:after {
content:"";
position:absolute;
bottom:-5px;
left:11px;
border-width:5px 5px 0px 0px;
border-style:solid;
border-color:#eeaa00 transparent;
display:block;
width:0;
}

Selanjutnya cari kode:

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>


Catatan, jika pada akhir untaian kode tidak terdapat <h2> akan tetapi <h3> tidak menjadi masalah. Lanjutkan saja dengan cara mem-pastekan kode dibawah ini setelah atau dibawah kode <h2> atau <h3> tadi, dan kode dibawah ini adalah hasil editan saya sendiri dengan memanipulasi kode CSS diatas lalu memasukan ikon bubble awsome kedalamnya:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/><i class="fa fa-comments fa-2x gradient-icon" aria-hidden="true"></i></a></b:if>

Save Tema


Comments

  1. wah mantap mas
    jumlah komentar editan sendiri

    ReplyDelete
    Replies
    1. Jumlah komennya adalah jumlah asli dari komentar, hanya cara menampilkannya saja dengan bubble

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik