Cara Pasang Tombol Buka Tutup Komentar Blogger

Memasang buka tutup komentar di blog atau biasa juga disebut dengan istilah show hide adalah sebuah judul postingan yang sebenarnya sudah basi. Pertama kali saya membaca tutorial ini di blog kompi ajaib. Awalnya saya tidak begitu tertarik dan belum pernah mempraktekkan langsung di halaman postingan.

Setelah lama penasaran akhirnya pun saya coba dan ternyata pemasangan ini sangat bagus untuk membuat blog terlihat bersih. Penambahan ini berfungsi untuk memepercantik tampilan blog.

Tahu alasannya kenapa?, karena dengan cara seperti ini, blog akan terlihat rapi karena ketika halaman postingan discroll kebawah. Komentar yang awalnya terlihat sebelum memasang script ini kini tidak terlihat, yang terlihat hanya tulisan "buka komentar".

Maka ketika Anda mencoba menekan tombol "buka komentar" tersebut, maka otomatis kolom komentar pun akan nampak dan tulisannya berganti menjadi "tutup komentar".

Lantas, bagaimana cara penerapannya dikolom komentar blog?. Silakan ikuti tutorial pemasangan show hide button dibawah ini.

Cara Mudah Pasang Buka Tutup Komentar Di blog

Pemasangan tombol buka-tutup ini berguna untuk menyembunyikan kolom komentar dan akan dimunculkan ketika melakukan click tombol. Dengan penggunaan ini, maka secara otomatis tampilan blog akan semakin rapi dan menarik.

Pada pemasang ini kita akan menggunakan dua cara yang bisa Anda pilih sesuai dengan selera. Jadi silakan coba saja satu-persatu pada blog Anda.

Cara Pertama

Pada cara yang pertama ini menggunakan trik dari Kompi Ajaib. Penempatan kodenya simple karena menggunakan inline CSS sehingga tidak perlu repot untuk memasang CSS code pada skin template.
Silakan login ke akun blogger Anda ➤ Pilih Theme ➤ Edit HTML (Jika Anda masih menggunakan tampilan blogger versi lama).
Untuk Blogger versi terbaru Theme ➤ Klik ፧ (tanda 3 titik vertikal disebelah kanan) ➤ Edit HTML, kemudian cari kode berikut ini

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

atau kode seperti ini <b:include data='post' name='comments'/>
Tiap template biasanya menggunakan kode yang berbeda, tergantung jenis template yang Anda gunakan. Khusus untuk viomagz dan sejenisnya, menggunakan kode<b:include data='post' name='comments'/>. Gunakan CTRL + F untuk mempermudah pencarian. Atau untuk lebih jelasnya, lihat pada gambar dibawah.

Setelah ketemu, hapus code tersebut dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>

Untuk Anda yang ingin menggunakan cara pertama ini pada template Linkmagz dan Viomagz terbaru serta template blogger lainya yang sejenis, 

1. Silakan cari kode <b:includable id='commentPicker' var='post'>. Kode ini ada dua di template linkmagz, silakan pilih kode yang kedua. 

2. Jika sudah ketemu, hapus kode dibawahnya. Kodenya seperti ini

 <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threadedComments'/>
    <b:else/>
        <b:include data='post' name='comments'/>
    </b:if>

Atau seperti pada gambar dibawah

3. Pastekan kode showhide komentar diatas

4. Save dan lihat hasilnya.

Cara Kedua 

Cara Kedua ini berlaku untuk template Viomagz, Linkmagz dan sejenisnya terutama untuk versi terbaru. Sebenarnya penerapannya sama saja dengan show hide komentar yang pertama, hamya terdapat perbedaan letak kodenya. Dan ini sudah saya cobakan pada Viomagz 4.3.0 dan Linkmagz 2.6.0.

1. Silakan buka dashboard blogger, pilih Theme ➣Edit HTML
Carilah kode <b:includable id='threadedComments' var='post'>

Setelah ketemu, letakkan kode HTML dibawah ini tepat dibawahnya.

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Tampilkan Komentar</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Sembunyikan Komentar</a>
<div class='clear'/>

Anda bisa mengganti teks atau tulisan pada tombol show / hide-nya dengan mengubah bagian yang saya mark sesuai style Anda.

2. Selanjutnya, tutup kode <div class='comments hide-content' id='comments'> setelah </section> dengan </div> atau seperti pada gambar contoh dibawah ini

3. Langkah berikutnya, cari kode<b:includable id='comments' var='post'>. Kemudian letakkan lagi kode yang tadi dibawahnya dan jangan lupa untuk meletakkan </div> setelah </section>

4. Untuk mempercantik tampilan tombol, carilah kode ]]></b:skin> dan tambahkan kode CSS berikut ini tepat di atasnya :

.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;}

Silakan ubah color sesuai dengan keinginan. dan gunakan tools Color Picker dewa plokis untuk mengubahnya

5. Terakhir, tambahkan Javascript berikut ini sebelum </body> :

<script type='text/javascript'>
//<![CDATA[
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>

Kemudian klik tombol Simpan dan lihat hasilnya.

Demikian Tutorial kali ini dari dewa plokis tentang Cara Membuat Buka Tutup Komentar Blogger, semoga bisa diterapkan tanpa masalah kolom komentar blog Anda, namun jika terdapat kebingungan pada diri Anda tentang cara penerapannya, jangan sungkan untuk bertanya pada kotak komentar dibawah, karena malu bertanya akan tersesat.

Share