×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Show Hide Comments Di Blogger Dengan Efek Bounce

February 24, 2020   • 1 Comment

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.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

1 Response to "Cara Membuat Show Hide Comments Di Blogger Dengan Efek Bounce "

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Gan buatkan tutor buat menu mavigasi disamping tombol search dong please

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With