Cara Memasang Tombol Show Hide Comment Disqus  Ala Kompi Ajaib

Cara Memasang Tombol Show Hide Comment Disqus Ala Kompi Ajaib

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.
Cara Memasang Tombol Show Hide Disqus Comment

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!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×