Zenixs Blog

" Hanya 1 yang punya "

Membuat Tombol Show/Hide komentar

Show/Hide pada Menu komentar dengan jquery - kali ini ingin memberikan sedikit tambahan tips blog untuk show/hide menu komentar blog yang tepat di bawah postingan .

Sebagai demonya bisa dilihat komentar show hide di blog ini, penampakannya lihat dibawah ini :

1. Penampakan Masih Hide 



2. Penampakan Setelah Show 



Langsung saja ke topik pembahasannya,
  1. Login blogger
  2. Rancangan, Edit Html
  3. Download Template Lengkap
  4. Centang menu Expand Template Widgets
  5. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :
#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.styleadiekonoe {background: #CCC;
padding: 5px;
}
a.tombol-komentar{background: #f4f8fc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57qQcquCYajyWf7ktdqEWr9PXtek7qQvAtoTOzXCzIlC9J67OBXBbqLEOO5Ogz1FxM5EsNxbKRWxCwtPpCTm25jniXATiSqNMgaWgfR5XWsQoXrKVyiZEiZSxOr0pwHrWegyhpKXmu4k/s1600/plus_adie-konoe.blogspot%5Bdot%5Dcom.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #7FFF00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57qQcquCYajyWf7ktdqEWr9PXtek7qQvAtoTOzXCzIlC9J67OBXBbqLEOO5Ogz1FxM5EsNxbKRWxCwtPpCTm25jniXATiSqNMgaWgfR5XWsQoXrKVyiZEiZSxOr0pwHrWegyhpKXmu4k/s1600/plus_adie-konoe.blogspot%5Bdot%5Dcom.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:2px dashed #000000;}
a.active.tombol-komentar{background: #f4f8fc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8yuuJ32KyM6IMVogV-_sUDVq191rFsGfUHv0mbMQuqcII7wzHzlfQbiSiWWvnKeT-cGJPHswBSYEjTCDi6MTZpYa9q4h0mpB3vw_5XZuBbtXoPnJ5ACN4ldW-CIef7UVpWog4N2IMHc/s1600/minus_adie-konoe.blogspot%5Bdot%5Dcom.gif) 85% 55% no-repeat;border:1px solid #000000}

6. Berikutnya simpan Script berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.tombol-komentar&quot;).click(function(){
$(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

7. Cari kode seperti dibawah ini (ctrl+F untuk mempermudah pencarian) :
</b:includable>
<b:includable id='comments' var='post'>

8. Jika sudah ketemu simpan kode berikut dibawah kode yang dicari tadi :

<center>
<div class='styleadiekonoe'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>No Comments be the first<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

9. Simpan template dan lihat hasilnya. Silahkan dikembangkan sesuai keinginan.

Tags: ,