Cara Membuat dan Mempilkan Komentar Disqus Show Hide di Halaman Postingan

Bagaimana sih Cara Membuat dan Mempilkan Komentar Disqus Show Hide di Halaman Postingan atau halaman artikel blog kita? mungkin kamu sedang atau lagi membutuhkannya bagaimana agar kolom komentar disqus tersebut agar bisa di show hide seperti yang ada di website ini dengan tulisan "Load Comments" silahkan bisa diperhatikan saja.

Nah mudah-mudahan kamu sudah paham maksudnya sekarang, jadi tombol yang terlihat ketika halaman artikel kita di buka maka hanya akan terlihat tombol "Load Comments" saja tetapi setelah di on click atau di tekan maka tombol tersebut akan hilang, kemudian apabila kamu ingin memasang komentar diskus secara permanen bisa baca panduannya disini Cara Membuat Komentar Disqus Secara Permanen di Blog.

Lantas apakah ada kelebihannya, untuk kelebihannya adalah hanya untuk mepercepat loading blog saja ketika halaman artikel tersebut dibuka, jadi bagaimana apakah kamu ingin mencoba menerapkannya pada blog kesayangan kamu, kalau mau mencobanya langsung simak saja berikut ini.

Sebelum memulai tutorial ini pastikan di tema atau template kamu sudah menginstal fontawesome dan silahkan hapus dulu semua kode disqus yang ada diblog kamu tersebut, karena akan diganti dengan yang baru ini.

1. Pada tahap pertama tentunya silahkan masuk dulu ke blogger lalu EDIT TEMA kemudian silahkan cari kode <b:includable id='comments' var='post'> sampai penutupnya </b:includable> lalu silahkan tambahkan kode dibawah ini setelah kode tersebut, untuk  contohnya bisa lihat gambar dibawah.

<b:includable id='disqus-comment' var='post'> <script type='text/javascript'>

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> </b:includable>

2. Lalu kemudian cari kode </body> lalu silahkan copy kode yang ada dibawah ini sebelum kode </body> bisa kamu lihat contohnya pada gambar, SHORTNAME_DISQUS ganti dengan shortname disqus punya kamu.

<script type='text/javascript'>

var disqus_shortname = &quot;SHORTNAME_DISQUS&quot;;

!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();

</script> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'>

!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();

//<![CDATA[

function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="arlinadesign";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}

//]]>

</script> </b:if>

3. Kemudian untuk selanjutnya adalah silahkan cari kode ]]></b:skin> lalu masukan kode yang ada dibawah ini tepat diatas kode ]]></b:skin> untuk contohnya bisa kamu lihat digambar

/* Disqus Comments */

#comments{display:none;}

.post-comment-link {visibility:hidden;}

#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}

#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}

#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}

#disqusshow:hover,#disqusshow:active{color:#f8695f}e} #disqusshow:hover,#disqusshow:active{color:#f8695f}

4. Kemudian selanjutnya silahkan sobat cari kode <div class='comments' id='comments'> lalu tambahkan kode yang ada dibawah ini tepat diatas kode <div class='comments' id='comments'>

<div id='disqusshow' onclick='load_Comments()'>Load Comments</div>

<div id='disqus_thread'/>

5. Kemudian cari kode <b:skin><![CDATA[ lalu tambahkan kode yang ada dibawah ini tepat diatas kode <b:skin><![CDATA[ tersebut untuk contohnya bisa kamu lihat gambar saja dibawah, dan jangan lupa simpan dan lihat hasilnya

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

Ok gaess dicukupkan terlebih dahulu postingan kali ini dengan Cara Membuat dan Mempilkan Komentar Disqus Show Hide di Halaman Artikel semoga bermanfaat dan membantu dan silahkan langsung dipraktekan saja , Wassalam.