Cara Mudah Memasang Tombol Buka dan Tutup Komentar di Blogger

Shah Bumi
Oktober 25, 2020
1
Cara Mudah Memasang Tombol Buka dan Tutup Komentar di Blogger
Source: tiger.web.id

Cara Mudah Memasang Tombol Buka dan Tutup Komentar di Blogger - Halo blogger, di kesempatan sebelumnya saya telah berbagi bagaimana cara memasang rating bintang di Blogger dan pada kesempatan kali ini saya akan menulis tutorial membuat tombol buka dan tutup Komentar atau show and hide comment di Blogger yang memiliki fungsi untuk menyembunyikan dan menampilkan kolom komentar pada artikel yang sudah di publish. sebelum ke tutorial pemasangannya yuk simak fungsinya.

Fungsi dari Tombol Buka dan Tutup Komentar

Bukan hanya menjadikan tampilan Blogger kamu jadi semakin keren dan minimalis, tetapi di samping itu tombol ini juga dapat memperingan loading dari blog kamu, yang di mana apabila ada artikel yang memiliki banyak komentar, maka tidak perlu lama-lama untuk menunggu Loading semua komen tersebut. Semua blog saya pun di pasang fitur ini karena memang sangat berguna, terlebih Blogger besar seperti situsnya igniel dan kompi ajaib pun memasangnya.

Nah, setelah mendengarkan penjalasan fungsi tutup buka komentar di atas, bagi kamu yang ingin lanjut memasangnya silahkan ikuti dan baca terus kelanjutannya.

Cara Membuat Tombol Buka dan Tutup Komentar di Blogger

Sedikit tampil beda dengan berbeda dari pada yang lain, tombol kali ini sudah dilengkapi juga dengan Efek Animasi Bounce (Melambung) sehingga terlihat lebih elegan, minimalis dan keren. Yuk langsung aja simak tutorial pemasangannya berikut ini:

  1. Log in ke akun BLOGGER.
  2. Pilih TEMA dan klik EDIT HTML.
  3. Copy lalu Paste kode Style CSS di bawah ini tepatnya sebelum 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. Setelah itu 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"))};
  5. Dan terakhir, cari markup kode <div class='comments' id='comments'>, setelah di temukan 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'/>
  6. Jika sudah klik SIMPAN TEMA.
  7. SELESAI, dan lihat hasil dari penerapan nya.

Beres sudah tutorial kali ini tentang cara memasang tombol buka dan tutup komentar di Blogger. Sangatlah mudah bukan sobat blogger caranya, untuk itu lihat juga Tutorial Blogger lainnya. Semoga bermanfaat dan berbahagia.