Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Tombol Load Comment Disqus Dengan Onclick Event Pada Blogger. Cara kerja Onclick Event Disqus ini adalah dengan menyembunyikan komentar disqus dengan tombol show comment atau load comment untuk menampilkannya kembali.
Dalam artian komentar anda akan disembunyikan terlebih dahulu dan akan ditampilkan kembali jika pengunjung mengklik load comment tersebut.
Onclick Event Disqus pada blogger yaitu berbentuk suatu tombol atau buton yang sebenarnya memiliki dua fungsi yaitu untuk menyembunyikan dan menampilkan kolom komentar pada blog, agar suatu postingan tampak rapih dan elegan dan tidak terlalu jauh saat kita scroll kebawah.
Jadi Jika tombol ini diklik maka akan menampilkan seluruh komentar. Begitu juga sebaliknya, jika tombol tutup diklik maka komentar akan disembunyikan secara otomatis.
Tampilan Onclick Event Disqus pada blogger ini juga responsif. Terbukti dari tampilannya yang bisa mengikuti beragam ukuran layar mulai dari layar HP, tablet, dan desktop. Jadi bagi anda yang menggunakan widget diskus, saya sangat menyarankan Onclick Event Disqus. Berikut adalah tutorialnya.
Cara Mudah Membuat Tombol Load Comment Disqus Dengan Onclick Event
1. Buka Blogger anda > pilih Tema > pilih Edit HTML > kemudian cari kode ini:
<div class='comments' id='comments'>2. Kemudian anda akan menemukan 2 atau 3 buah kode yang sama dalam template blog, tergantung dari jenis template blog yang anda gunakan. Silakan check satu persatu sampai buka tutup komentar sudah muncul. Lalu tempatkan kodenya sebelum kode <div class='comments' id='comments'> yang kedua.
<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'/>Catatan: Anda bisa mengganti teks atau tulisan pada tombol nantinya dengan mengubah bagian yang saya mark sesuai style Anda.
3. 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;}4. 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>5. Jika pilih Simpan Tema, Kemudian silahkan lihat hasilnya.
Cara Mudah Membuat Tombol Load Comment Disqus Dengan Onclick Event Khusus Untuk Template VioMagz
1. Cari kode berikut ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>Atau
<b:include data='post' name='comments'/>2. Gunakan CTRL + F untuk mempermudah pencarian, Setelah ketemu hapus code tersebut dan ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color: #4b525d;color:#fff;font-size:15px;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("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Show Comments </div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'>Hide Comments </div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>3. Jika pilih Simpan Tema, Kemudian silahkan lihat hasilnya.
Demikian tutorial bagaimana Cara Mudah Membuat Tombol Load Comment Disqus Dengan Onclick Event. jika anda merasa kesulitan menerapkan tutorial diatas pada blog anda silahkan tinggalkan pesan dikolom komentar dibawah. Semoga informasinya bermanfaat dan sampai jumpa pada tutorial selanjutnya.