Search This Blog

Show Hide Kolom Komentar Disqus

  • Wednesday, June 13, 2018 at 10:24:00 AM
  • 0 Comments
  • Views
Kemarin aku memodifikasi kolom komentar Disqus ku menjadi tersembunyi dan akan tampil apabila di klik. Trik ini aku dapatkan dari blognya Bung Franki.

Cara Instal
Cara instal nya adalah pertama-tama dengan menemukan kode berikut ini.
</article>
</b:includable>
Kemudian letakan kode di bawah ini di antara kode di atas.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Click to comment */
#hide{display:none}
#buka-komentar,.buka-komentar{margin:0 0 0 0;display:block;padding:0;position:relative;text-align:center}
#show{margin:0 auto;text-align:center;position:relative}
.buka_disqus{display:block;max-width:320px;color:#00BCD4;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #00BCD4}
.buka_disqus:hover{background:#00BCD4;color:#fff;}
</style>
<div class='buka-komentar' id='buka-komentar'>
<div id='show'><span class='buka_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;none&apos;'>Buka Komentar</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'/>
  <b:include data='post' name='comments'/>
</div>
</div>
</b:if>
 Menjadi seperti ini.
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Click to comment */
#hide{display:none}
#buka-komentar,.buka-komentar{margin:0 0 0 0;display:block;padding:0;position:relative;text-align:center}
#show{margin:0 auto;text-align:center;position:relative}
.buka_disqus{display:block;max-width:320px;color:#00BCD4;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #00BCD4}
.buka_disqus:hover{background:#00BCD4;color:#fff;}
</style>
<div class='buka-komentar' id='buka-komentar'>
<div id='show'><span class='buka_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;none&apos;'>Buka Komentar</span></div><div id='hide'><span class='tutup_disqus' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'/>
  <b:include data='post' name='comments'/>
</div>
</div>
</b:if>
</b:includable>
Kemudian simpan. Terima kasih kepada Bung Franki yang telah menshare kodenya. Aku catat kembali kodenya di postingan blog ini dengan sedikit modifikasi dan aku simpan linknya di bagian referensi supaya aku tidak lupa dan tetap terhubung dengan postingan Bung Franki.

Referensi
No comments
No comments

Post a Comment