Skip to content Skip to sidebar Skip to footer
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 pasang tombol buka tutup komentar blogger

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.

cara membuat tombol show hide komentar blogger

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>

Cara Kedua 

Cara Kedua ini berlaku untuk template Viomagz dan Sejenisnya. Sebenarnya penerapannya sama saja dengan show hide komentar yang pertama, namun ini sebagai alternatif saja.

Silakan buka dashboard blogger, pilih Theme ➣Edit HTML
Carilah kode <div class='comments' id='comments'>

Anda akan menemukan 2 atau 3 buah kode yang sama dalam template blog, tergantung dari jebis template blog yang Anda gunakan. Silakan check satu persatu sampai buka tutup komentar sudah muncul pada. Untuk template Viomagz, pada uji coba yang saya lakukan, penempatan kodenya saya letakkan sebelum kode <div class='comments' id='comments'> yang kedua.

<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 nantinya dengan mengubah bagian yang saya mark sesuai style Anda.


Kemudian carilah kode ]]></b:skin> dan tambahkan script di bawah 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
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 adalah sesat.

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 pasang tombol buka tutup komentar blogger

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.

cara membuat tombol show hide komentar blogger

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>

Cara Kedua 

Cara Kedua ini berlaku untuk template Viomagz dan Sejenisnya. Sebenarnya penerapannya sama saja dengan show hide komentar yang pertama, namun ini sebagai alternatif saja.

Silakan buka dashboard blogger, pilih Theme ➣Edit HTML
Carilah kode <div class='comments' id='comments'>

Anda akan menemukan 2 atau 3 buah kode yang sama dalam template blog, tergantung dari jebis template blog yang Anda gunakan. Silakan check satu persatu sampai buka tutup komentar sudah muncul pada. Untuk template Viomagz, pada uji coba yang saya lakukan, penempatan kodenya saya letakkan sebelum kode <div class='comments' id='comments'> yang kedua.

<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 nantinya dengan mengubah bagian yang saya mark sesuai style Anda.


Kemudian carilah kode ]]></b:skin> dan tambahkan script di bawah 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
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 adalah sesat.
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Berlangganan via Email