Cara Membuat Buka Tutup Komentar Disqus Valid HTML5
Saya sering menjumpai beberapa
Blog yang menyajikan cara membuat buka tutup komentar DISQUS namun sebenernya cuma
sajian teknik membuat buka tutup komentar saja..! Namun tidak ada script.js
dari DISQUS itu sendiri, jadi ada beberapa blogger yang merasa kecewa atau
dikibulin judul artikel lantaran tidak mendapatkan
tutorial yang seperti di inginkannya…!
Langsung saja ke langkah langkahnya dibawah ini :
Langsung saja ke langkah langkahnya dibawah ini :
Cari kode seperti dibawah ini :
<b:includable id='comments' var='post'>Jika sudah ketemu, ganti dengan kode dibawah ini
<div class='comments' id='comments'>
xxxxxxxxxx
xxxxxxxxxx
</div>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<script type='text/javascript'>
var disqus_shortname = "IDDisqus-ANDA";
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>
</div>
</b:includable>
Note : ganti ID DISQUS saya
dengan ID DISQUS milik Anda ya….
Setelah itu tambahkan kode css di bawah ini di atas kode ]]></b:skin> atau </style>
#comments {display:none;}
.post-comment-link { visibility: hidden; }
Sekarang proses Cara membuat Buka Tutup komentarnya
Silahkan cari kode seperti dibawah ini atau yang mirip :
<b:include data='post' name='comments'/>
Note Ada lebih dari satu kode yang mirip seperti diatas, Silahkan lihat gambar diatas letak atau posisi kode yang harus Sobat ganti...! Jika sudah ketemu, ganti
dengan kode dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<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("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Buka Komentar</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'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>
Lalu tekan save template dan
lihat hasilnya.. DEMO silahkan lihat di bagian komentar di Blog ini sama persis...!
Semoga Sobat semua tidak kecewa…lagi
OK !