Tutorial Blogger

Cara Memasang Tombol Buka Tutup Komentar dengan Efek di Blogger

Tombol Buka-Tutup Komentar atau Show and Hide Comment di Blogger yang memiliki fungsi tak lain untuk menyembunyikan dan menampilkan kolom komentar.

Di samping itu tombol ini juga dapat meringankan loading blog, yang di mana jika ada artikel yang memiliki banyak komentar, maka tidak perlu lama menunggu untuk Load semua komen tersebut.

Nah, di artikel ini penulis akan memberikan tutorial singkat Cara Membuat Tombol Buka Tutup Komentar dengan Efek Animasi Bounce di Blogger. Di artikel sebelum nya penulis juga sudah membagikan satu artikel yang serupa dengan berjudul.

Cara Memasang Tombol Buka dan Tutup Komentar di Blogger

Sedikit berbeda dengan Tombol Buka dan Tutup Komentar yang sebelumnya, tombol yang kali ini sudah dilengkapi dengan Efek Animasi Bounce atau Melambung/Menyembul sehingga terlihat lebih keren dan sangat cocok buat kamu yang suka mempercantik tampilan blog. Jika kamu tertarik untuk memasang nya, kamu bisa simak dalam tutorial berikut ini.

Cara Membuat Tombol Buka dan Tutup Komentar di Blogger

1. Log In ke akun Blogger → Tema → Edit Html.

2. Copy dan Pastekan kode Style CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

<style type="text/css">
/* 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)} }
</style>

2. Selanjutnya masukan kode JavaScript di bawah ini tepat sebelum 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>

3. Terakhir, cari dan temukan markup kode <div class=’comments’ id=’comments’>

Lalu kamu ganti dengan kode di bawah 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'/>

4. Simpan Tema.

5. Selesai.

Berikut adalah tampilan Tombol Buka Tutup Komentar dengan Efek Animasi Bounce yang telah terpasang di Blogger.

Live Preview

Sekian tutorial Cara Memasang Tombol Buka Tutup Komentar dengan Efek Animasi Bounce di Blogger yang telah penulis bagikan untuk kamu. Semoga bermanfaat.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top