Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Gampang Pasang Buka Tutup Komentar Di Template Viomagz

Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz

| Jika semebelumnya aku telah membahas Cara Memasang Momentar Disqus Secara Permanen di Template Viomagz.

Pada kesempatan kali ini aku masih membahas seputar sistem komentar pada template viaomagz.

Namun pada kali ini aku akan menciptakan tutorial Cara memasang Buka Tutup Komentar di Template Viomagz.

Kenapa Tutorial ini Khusus Untuk Template Viomagz?

Jawabannya simpel, alasannya ialah setiap template mempunyai struktur data yang berbeda begitu pun dengan template viao magz ini.

Struktur data yang dibangun mas sugeng di template viomagz ini jauh berbeda dari pada template yang biasanya, sehingaa saat akan melakan modifikasi pada tempalate viomagz harus benar-benar teliti.

Seperti yang aku rasakan beberapa hari kebelakang aku coba untuk memasang sistem komentar disqus permanen di template viomagz, akan tetapi tidak ada yang berhasil.

Setelah aku coba beberapa kali ternyata struktur data nya berbeda dari yang lain, sehingga aku sengaja menciptakan tutorial khusus ini untuk membantu teman dalam memodifikasi tempalate viomagz ini.

Apa Fungsi Buka Tutup Komentar Blog?

Seperti dari istilahnya buka tutup komentar ini mempunyai fungsi untuk menyembunyikan dan memunculkan kembali sistem komentar bawaan blogger.

Sehingga saat di blog teman sudah banyak yang komentar tampilan blog teman tetep rapih dan terlihat simple.

Buka tutup komentar blog ini kini lagi trend, jadi teman wajib coba cara ini untuk mengikuti musim memasang tombol open close komentar di blogger.

Sebelum aku membagikan tutorial memasang show-hide comment ini aku sudah mencobanya di blog aku sendiri.

dan alhamdulillah dengan kesabaran saya, kesannya aku menemukan cara untuk memasang show and hide comment pada tempalate viomagz ini.

Pastinya tombol open and close comment ini responsive ya sob, meski dibuka diberbagai ukuran layar pun tampilannya akan menyesuaikan.

Jika teman tertarik juga untuk memasang open and close comment ini pada tempalate viaomagz sobat, silahkan ikuti tutorialnya berikut ini:

Cara Praktis Pasang Show and Hide Comments Box

Untuk mempercepat waktu kita mulai saja tutorial pasang buka tutup komentar pada template VioMagz :

Pertama:


Bukalah dashboard Blogger teman masing-masing kemudian masuk ke sajian Theme /Template> Edit HTML.

Kedua:


Silahkan teman Carilah arahan <div class='comments' id='comments'>

Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz


Gunakan Shortcut CTRL+F untuk mencarinya.

Disana terdapat 2 buah arahan yang sama dalam template VioMagz. Lalu teman ganti kedua arahan tersebut dengan script di bawah ini :

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

Sehingga hasilnya akan menjadi ibarat pada gambar dibawah:

Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz


Silahkan sesuaikan tulisannya dengan yang teman inginkan pada goresan pena yang aku beri tanda.

Ketiga:


Setelah itu teman cari arahan ]]></b:skin> dan tambahkan script di bawah ini sempurna 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;} 

Silahkan teman ganti warna dan goresan pena sesuai dengan selera teman masing-masing. Silahkan modifikasi sesuai keinginan.

Terakhir:

Tambahkan Javascript berikut ini sebelum arahan </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> 

Paling akhir:

Jangan lupa save dan lihat hasilnya!


Kesimpulan Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz:


Pada setiap template mempunyai struktur data yang berbeda, sama halnya seprti pada template viomagz yang sangat berbeda dari template biasanya.

Sistem buka tutup komentar ini sanggup teman gunakan juga pada template lain, silahkan teman sesuaikan mark up HTML pemanggil show and hide nya dengan arahan pada template teman masing-masing.

Penutup:

Jangan lupa untuk share dan komen yang sob,

jangan sungkan untuk meminta tutorial lainnya yang serupa biar nanti aku buatkan untuk teman semuanya.

Jika menuurt teman artikel ini bermanfaat dan sanggup membantu jangan lupa untuk share ke temen-temennya biar mereka juga tahu cara untuk Cara Praktis Pasang Buka Tutup Komentar di Template Viomagz dengan sumbangan artikel ini.

Terakhir, aku ucapkan terimakasih yang sudah berkunjung di blog kata mastah.

Salam Luar Biasa!
Sumber https://www.katamastah.com/