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.
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 menuTemplate > Edit HTML]]></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('disqus-comments')'>Hide</span></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<script type='text/javascript'>
var disqus_shortname = "DISQUS-USERNAME";
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/>";
</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('disqus-comments')'>Hide</span></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<script type='text/javascript'>
var disqus_shortname = "DISQUS-USERNAME";
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/>";
</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.
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!
Mantef banget nih Bang Anton untuk tutornya..hee
BalasHapusManfaat banget nih gan postingannya, salam blogger
BalasHapusIni yang saya dari dulu..
BalasHapusOh iya, apakah dengan cara ini loading Disqus tidak akan berjalan jika tidak di aktifkan dengan menekan tombol show ?
iya loading disqus tidak akan loading kecuali dipanggil, stetalah dipanggil maka proses loading sudah tidak ada, yg ada hanyalah show dan hide saja mas....
BalasHapussama-sama gan salam sahabat blogger...
BalasHapusWah bang Icah biasa jaja bang hehehehe
BalasHapusiya 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...
BalasHapusyang pasti loading juga sedikit berkurang ya ohm soalnya nggak langsung reload.
BalasHapustapi sayangnya saya sudah nggak pakai comment disqus.
saya share di fb dulu ya ohm biar mudah carinya kalau lagi dibutuhkan :)
nah ini yang saya cari mas , kemana mana nyari gk ada eh ternyata nongol disini jawabannya
BalasHapusemang udah nyampe mana aja nyari nya mas... udah ke Tanah abang belom hahahaa...
BalasHapusbener sekali sis... makasih ya udah mau di share...
BalasHapusMas anton, kenapa setelah saya praktekan panduan di atas, Komentar Disqus menjadi aneh ?
BalasHapusKotak hitam dan tombol Loadingnya ada, tapi kenapa ada komentar Disqus lagi di bawahnya yang langsung me-load sendiri ?
Mohon bantuannya mas :)
Hapus semua kode disqus yg lama mas
BalasHapusSudah work di blog saya :D
BalasHapusTernyata widget Disqus harus di hapus agar panduan ini bekerja..
Terima kasih mas :D
Sama-sama mas :)
BalasHapusmakasih kang (y)
BalasHapussaya gk bisa bales apa apa sama kang anton, jadi saya klik iklan ya? hehehe
cara pasang 3 komentar kaya gini gmn gan?
BalasHapuslike mas
BalasHapusAlhamdulillah, terima kasih mas, berhasil di blog saya www.catatandroid.com
BalasHapussukses selalu blognya dan keep share
Mantap gan.
BalasHapusKalau untuk komentar dari blogger, ada tutorialnya g gan?
makasih gan sudah terpasang di blog saya www..kennywillisen.com
BalasHapusmantul
BalasHapus