Cara Membuat Show Hide Comments Di Blogger Dengan Efek Bounce

Disini saya akan membagi sebuah tutorial bagaimana Cara Membuat Show Hide Comments di Blogger dengan Efek Bounce.

Sebenarnya tutorial ini udah banyak sekali di Situs situs blog tutorial lainnya, namun disini saya akan tetap berbagi dan menambahkan sedikit efek animasi Bounce pada tombol Show Hide Komentarnya. Memasang Fitur Show Hide Komentar juga dapat meringakan loading (onload) dihalaman postingan blog jika komentar dipostingan blog kamu sudah terlalu banyak. Nah bagi teman teman blogger yang ingin mencoba tutorial yang saya bagikan ini, yuk langsung saja kita ke tutorialnya.

Cara Membuat Show Hide Comments di Blogger Dengan Efek Bounce

1. Pertama, login dulu ke Blogger,

2. Kemudian, pada dashboard Blogger pilih Tema ⇒ Edit HTML,

3. Copy kode CSS dibawah ini, dan letakkan tepat diatas kode </b:skin> atau </style>,

/* Show and Hide Comments */ 
.hide-content{display:none;margin:0;padding:0;} 
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#ff69b4;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04) ;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} 
#comments a.hiddencontent {background:#fff;color:#ff69b4;transition:all .3s} 
a.showcontent:hover{background:#fff;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04); color:#ff69b4;} 
#comments a.hiddencontent:hover{background:#fff;color:#ff69b4;}
.rubberock{-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal} @keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)} 40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)} 50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)} 65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} } @-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)} 40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)} 50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)} 65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} }

4. Cari kode seperti ini <div class='comments' id='comments'>, kode tersebut ada dua (2) kemudian ganti dengan kode yang saya berikan dibawah ini,

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;"><div class='rubberock'>Show comments</div></a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

5. Setelah itu tambahkan Javascript dibawah ini tepat diatas kode </body>,

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

6. Terakhir simpan atau save template tersebut.

Untuk DEMO dari tombol Show Hide Comments dengan Efek Bounce tersebut kamu dapat melihat pada form komentar blog ini,

Sekian tutorial yang dapat saya bagikan mengenai bagaimana cara membuat show hide comments di Blogger dengan Efek Bounce dan Jangan bosan mampir kesini untuk mendapatkan tutorial tutorial blogger menarik dari saya :D.