Cara Memasang Tombol Show Hide Comment Disqus Ala Kompi Ajaib

Cara Memasang Tombol Show Hide Comment Disqus Ala Kompi Ajaib. Setelah postingan sebelumnya saya membagikan tutorial tentang Cara Memasang Tombol Show Disqus Comments Di Blog, maka kali ini saya akan melengkapinya dengan Tombol Hide, pada dasarnya fungsi dari tombol ini adalah sama saja, namun pada tutorial sebelumnya hanya bisa menampilkan Disqus Comment tetapi tidak bisa menyembunyikannya kembali, nah pada tutorial kali ini akan saya lengkapi dengan menambahkan tombol Hide, sehingga Disqus Comment akan dapat ditampilkan dan disembunyikan kembali.

Pada Tutorial kali ini saya terinspirasi dari sebuah blog yang sudah terkenal dikalangan Blogger Indonesia yaitu Kompiajaib.com. Disana Telah terpasang tombol Show Hide Disqus Comment, sengaja saya bagikan disini dan tentunya dengan izin dari kang Adhy sebagai pemilik kompi ajaib agar semua sobat tahu bagaimana sebenarnya cara memasangnya di blog kesayangan sobat, sehingga sama seperti yang ada di blog Kompiajaib.com (untuk saat ini saja karena kedepannya mungkin Kang Adhy Pemilik Kompiajaib sudah atau akan merubah tampilan dari tombol Disqus Comment miliknya.)

Langkah-langkah Memasang Tombol Show Hide Disqus Comment  Di Blog.

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML

Langkah-2 : Simpan kode CSS di bawah ini, tepat sebelum tag ]]></b:skin> atau </style>

.disqus-title{margin:0;text-align:left;background:#efefef;padding:6px 10px;color:#444!important;font-size:100%;font-weight:500;border: 1px solid #ddd;}


.disqus-loader,#disqus-showhide{float:right;cursor:pointer}


#disqus-showhide{display:none}

Langkah-3 : Temukan Kode  <b:includable id='comments' var='post'>
Kemudian ganti semua kode dibawahnya dengan kode berikut.

<div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>


<div id='disqus-comments'>


<div class='comments' id='comments'>


<script type='text/javascript'>


var disqus_shortname = &quot;DISQUS-USERNAME&quot;;


var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;


if (!disqus_blogger_current_url.length) {


disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;}


var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;


var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;


</script>


</div>


</div>

Sehingga akan menjadi seperti ini dibawah ini:

<b:includable id='comments' var='post'>


<div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>


<div id='disqus-comments'>


<div class='comments' id='comments'>


<script type='text/javascript'>


var disqus_shortname = &quot;DISQUS-USERNAME&quot;;


var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;


if (!disqus_blogger_current_url.length) {


disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;}


var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;


var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;


</script>


</div>


</div>


</b:includable>

Langkah-4 : Letakan kode berikut tepat sebelum kode </body> .

<script type='text/javascript'>


//<![CDATA[


function toggleDisqus(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};


//]]>


var disqus_shortname = "DISQUS-USERNAME";


function loadDisqus(){var e=document.getElementById("disqus-loader");e.style.display="none";var e=document.getElementById("disqus-showhide");e.style.display="block";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();}


</script>

CATATAN:
Silahkan ganti DISQUS-USERNAME dengan nama Disqus Username Sobat sendiri. 

Langkah-5: Simpan template sobat dan Selesai.

Demikianlah Tutorial mengenai Cara Memasang Tombol Show Hide Comment Disqus Ala Kompi Ajaib, semoga ada manfaatnya ya, dan saya sangat senang Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

Go to Link