Cara Pasang Show & Hide Komentar di Blogger

  • Whatsapp

Cara Pasang Show & Hide Komentar di Blogger

Cara Masang Show and Hide Komentar Blogger dengan Onclick –  Show (Menampilkan) dan Hide (Sembunyi) komentar blogger adalah sebuah fitur yang berfungsi untuk membuka dan menutup widget komentar blog atau website.  

Memasang show hide komentar pada blog sangatlah bagus, selain dapat mempercepat loading blog atau website, dengan memasang show hide komentar blog dapat juga mempercantik desain blog atau website sobat.

Untuk website-website saat ini sudah banyak menggunakan show dan hide komentar diwebsiteny. Untuk memasang Show dan Hide pada widget komentar blogger, disini kita akan menggunakan bahasa program CSS, HTML serta Javascipt.

Dan untuk membuka ataupun menutup show hide komentar blogger, sobat cukup dengan menekan satu kali klik saja maka sudah bisa membuka dan menutup komentar blogger tesebut.

Baca Juga: Cara Menampilkan CPU, GPU dan FPS di PC/Laptop

Bagaimana, tertarik untuk memasang tombol show dan hide komentar blogger pada website sobat? Jika sobat tertarik ingin memasangnya pada website sobat, sobat dapat ikuti caranya dibawah ini!

Cara Masang Tombol Show & Hide Komentar Blogger

Silahkan ikuti tutorialnya dengan teliti dari awal hingga akhir supaya tidak ada kendala error pada saat pemasangan kode html, css dan javascriptnya. Yuk, kita mulai!!

1. Pertama login ke Blogger.com > Theme/tema > Edit HTML.

2. Cari kode <div class=’comments’ id=’comments’> (Jika terdapat lebih dari satu kode maka ganti juga kode lainnya)

Gunakan CTRL + F Untuk mempermudah pencarian kodenya.

3. Jika sudah ketemu, Ganti kode tersebut dengan kode dibawah ini.

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</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. Berikutnya, cari lagi kode ]]></b:skin> atau kode </style>

5. Jika sudah ketemu, letakkan kode CSS dibawah ini diatas kode tersebut.

/* 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:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

6. Terakhir adalah dengan memasang kode JavaScript, cari lagi kode </body>

7. Letakkan kode JavaScript dibawah ini diatas kode body tersebut.

<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>

8. Simpan Template!! dan Lihat Hasilnya!

Seperti itulah proses memasang tombol show dan hide komentar di blogger, jika sobat ada kendala pada saat pemasangan, silahkan baca lebih teliti lagi langkah-langkah diatas. Dan apabila masih tidak bisa silahkan beri komentar dibawah.

Baca Juga: Cara BOM SMS Tanpa PULSA terbaru

Demikianlah artikel kali ini yang dapat saya share ke teman-teman, saya harap dapat membantu dan bermanfaat untuk semuanya!!

Sekian terima kasih`

Related posts

Leave a Reply

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