Kali ini saya akan berbagi tips bagaimana cara pasang BUKA
TUTUP Komentar DISQUS di Blog, kode-kode tentunya Valid HTML5. Untuk tips ini
khusus untuk pengguna Blog Non AMP.
Bagi Pemula mohon BACKUP Template terlebih dahulu sebelum memodifikasi kode kode yang didalamnya EDIT HTML
Karena tutorial ini agak ribet, Sobat pemula butuh konsentrasi agar kode work 100% . Karena kode kode yang akan saya berikan dibawah adalah TESTED bukan COPAS !
Cara Pasang BUKA TUTUP komentar DISQUS
1. Silahkan tambahkan kode dibawah ini setelah kode ]]></b:skin> atau dibawah kode <style type='text/css'>
#comments {display:none;}
.post-comment-link { visibility: hidden; }2. Kemudian cari kode seperti dibawah ini :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
................................................................................
............... hapus semua kode diantara ini ....................
.................................................................................
</div>
</b:includable>
3.Letakkan kode dibawah ini setelah kode <div
class='comments' id='comments'>
<script type='text/javascript'>
var disqus_shortname = "crepictdgz";
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
(function() {
var bloggerjs = document.createElement("script");
bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_item.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
(function() {
var bloggerjs = document.createElement("script");
bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_index.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
</script>
Ganti kode Crepictdgz dengan username Disqus blog Anda
Sampai disini kode komentar DISQUS sudah muncul dibawah postingan Blog, langkah selanjutnya adalah kita membuat kode BUKA TUTUP komentar DISQUS-nya.
Membuat BUKA TUTUP komentar DISQUS
1. Langsung saja ya, jika Anda ingin mencoba tombol show hide komentar Blogger non AMP, silahkan cari kode di bawah ini atau yang mirip seperti kode di bawah ini.
<b:include data='post' name='comments'/><b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/><b:if cond='data:blog.pageType == "item"'>
<style>
.open-cmm,.closed-cmm{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:15px 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;border-radius:99em}
.open-cmm{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='open-cmm' id='open-cmm' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("closed-cmm").style.display="block";document.getElementById("open-cmm").style.display="none"' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='closed-cmm' hidden='hidden' id='closed-cmm' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("closed-cmm").style.display="none";document.getElementById("open-cmm").style.display="block"' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>3. Silahkan save templatenya dan silahkan cek penampakannya di halaman postingan.
Jika ingin menyesuaikan warna background tombol dan warna tulisannya, silahkan sesuaikan pada kode background-color:#11589D;color:#fff; seperti yang saya tandai pada kode di atas.
Selamat mencoba….