Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Masang Show and Hide Komentar Blogger dengan Onclick

Cara Masang Show and Hide Komentar Blogger dengan Onclick
Cara Masang Show and Hide Komentar Blogger dengan Onclick
Imamkunblog.com | Selamat datang di imamkunblog pada artikel ini saya akan membagikan lagi Tutorial Blogger yaitu memasang show and hide komentar blogger dengan oneclick. Pada artikel sebelumnya saya juga pernah membahas artikel yang serupa yaitu Cara Membuat Kotak Komentar Hide-Show.

Yang membedakan artikel dahulu dan artikel terbaru ini adalah Memasang Show and Hide Komentar blog pada artikel ini jauh lebih Responsive and Friendly di semua perangkat. Dengan memasang Hide and show juga akan mempercepat loading blog.

Show-Hide Komentar adalah sebuah fitur yang berfungsi untuk membuka dan menutup widget komentar blog anda.  Di artikel ini menambahkan sebuah javascript onclick untuk mmebuat Show and Hide jauh lebih baik dan membuat blog anda akan jauh lebih ringan. 

Untuk membuat Show and Hide pada widget komentar blog, disini saya menggunakan combinasi CSS,HTML dan Javascript. Untuk cara kerja script ini yaitu komentar akan tertutup dan jika ingin dibuka cukup klik show comment dan langsung terbuka.

Baiklah tidak perlu berlama-lama lagi, langsung saja kita masuk ke proses pemasangan show and hide pada komentar blog.

Cara Memasang Show & Hide Pada Komentar Blog dengan Onclick


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
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. Selanjutnya, silahkan cari lagi kode ]]></b:skin> atau kode </style>
5. Jika sudah ketemu salah satu kode diatas, copy dan pastekan kode 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. Berikutnya cari lagi kode </body>
7. Jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode 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!

Itulah tutorial kali ini cara memasang tombol show and hide di blogger, untuk demonya anda bisa melihat di kolom komentar dibawah pada artikel ini. Kira-kira seperti itu hasilnya!

Baca Juga: Cara Membuat Lightbox Contact Form Blogger

Demikianlah artikel kali ini, semoga bermanfaat dan kalian bisa menyesuaikan atau mengedit kode-kode tersebut sesuai keinginan, seperti mengubah warna dan sebagainya!
Show comments
Hide comments

0 Response to "Cara Masang Show and Hide Komentar Blogger dengan Onclick"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×