Cara Memasang Tombol Show Hide Comment Disqus  Ala Kompi Ajaib

Cara Memasang Tombol Show Hide Comment Disqus Ala Kompi Ajaib

You might be interested in
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!
Previous Post
Next Post

post written by:

Loading...

22 komentar:

  1. Mantef banget nih Bang Anton untuk tutornya..hee

    BalasHapus
  2. Manfaat banget nih gan postingannya, salam blogger

    BalasHapus
  3. Ini yang saya dari dulu..
    Oh iya, apakah dengan cara ini loading Disqus tidak akan berjalan jika tidak di aktifkan dengan menekan tombol show ?

    BalasHapus
  4. iya loading disqus tidak akan loading kecuali dipanggil, stetalah dipanggil maka proses loading sudah tidak ada, yg ada hanyalah show dan hide saja mas....

    BalasHapus
  5. sama-sama gan salam sahabat blogger...

    BalasHapus
  6. Wah bang Icah biasa jaja bang hehehehe

    BalasHapus
  7. iya mas... dan akan loading hanya ketika kita klik tombol Load,... setelah itu yang ada hanyalah show dan hide, dengan kata lain proses loadingnya sudah selesai...

    BalasHapus
  8. yang pasti loading juga sedikit berkurang ya ohm soalnya nggak langsung reload.
    tapi sayangnya saya sudah nggak pakai comment disqus.
    saya share di fb dulu ya ohm biar mudah carinya kalau lagi dibutuhkan :)

    BalasHapus
  9. nah ini yang saya cari mas , kemana mana nyari gk ada eh ternyata nongol disini jawabannya

    BalasHapus
  10. emang udah nyampe mana aja nyari nya mas... udah ke Tanah abang belom hahahaa...

    BalasHapus
  11. bener sekali sis... makasih ya udah mau di share...

    BalasHapus
  12. Mas anton, kenapa setelah saya praktekan panduan di atas, Komentar Disqus menjadi aneh ?
    Kotak hitam dan tombol Loadingnya ada, tapi kenapa ada komentar Disqus lagi di bawahnya yang langsung me-load sendiri ?


    Mohon bantuannya mas :)

    BalasHapus
  13. Hapus semua kode disqus yg lama mas

    BalasHapus
  14. Sudah work di blog saya :D
    Ternyata widget Disqus harus di hapus agar panduan ini bekerja..
    Terima kasih mas :D

    BalasHapus
  15. makasih kang (y)
    saya gk bisa bales apa apa sama kang anton, jadi saya klik iklan ya? hehehe

    BalasHapus
  16. cara pasang 3 komentar kaya gini gmn gan?

    BalasHapus
  17. Alhamdulillah, terima kasih mas, berhasil di blog saya www.catatandroid.com
    sukses selalu blognya dan keep share

    BalasHapus
  18. Mantap gan.
    Kalau untuk komentar dari blogger, ada tutorialnya g gan?

    BalasHapus
  19. makasih gan sudah terpasang di blog saya www..kennywillisen.com

    BalasHapus