www. - Bagaimana sih Cara Membuat dan Mempilkan Komentar Disqus Show Hide di Halaman Postingan atau halaman artikel blog kita? mungkin kau sedang atau lagi membutuhkannya bagaimana biar kolom komentar disqus tersebut biar dapat di show hide ibarat yang ada di website ini dengan goresan pena "Load Comments" silahkan dapat diperhatikan saja.
Nah mudah-mudahan kau sudah paham maksudnya sekarang, jadi tombol yang terlihat dikala halaman artikel kita di buka maka hanya akan terlihat tombol "Load Comments" saja tetapi sesudah di on click atau di tekan maka tombol tersebut akan hilang, kemudian apabila kau ingin memasang komentar diskus secara permanen dapat baca panduannya disini Cara Membuat Komentar Disqus Secara Permanen di Blog.
Lantas apakah ada kelebihannya, untuk kelebihannya yaitu hanya untuk mepercepat loading blog saja dikala halaman artikel tersebut dibuka, jadi bagaimana apakah kau ingin mencoba menerapkannya pada blog kesayangan kamu, jika mau mencobanya eksklusif simak saja berikut ini.
Sebelum memulai tutorial ini pastikan di tema atau template kau sudah menginstal fontawesome dan silahkan hapus dulu semua isyarat disqus yang ada diblog kau tersebut, sebab akan diganti dengan yang gres ini.
1. Pada tahap pertama tentunya silahkan masuk dulu ke blogger kemudian EDIT TEMA kemudian silahkan cari kode <b:includable id='comments' var='post'> hingga penutupnya </b:includable> kemudian silahkan tambahkan isyarat dibawah ini sesudah isyarat tersebut, untuk misalnya dapat lihat gambar dibawah.
<b:includable id='disqus-comment' var='post'> <script type='text/javascript'>
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> </b:includable>
2. Lalu kemudian cari kode </body> kemudian silahkan copy isyarat yang ada dibawah ini sebelum kode </body> dapat kau lihat misalnya pada gambar, SHORTNAME_DISQUS ganti dengan shortname disqus punya kamu.
<script type='text/javascript'>
var disqus_shortname = "SHORTNAME_DISQUS";
!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_index.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>
!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)}();
//<![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 yaitu silahkan cari kode ]]></b:skin> kemudian masukan isyarat yang ada dibawah ini sempurna diatas kode ]]></b:skin> untuk misalnya dapat kau 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 sahabat cari isyarat <div class='comments' id='comments'> kemudian tambahkan isyarat yang ada dibawah ini sempurna diatas isyarat <div class='comments' id='comments'>
<div id='disqusshow' onclick='load_Comments()'>Load Comments</div>
<div id='disqus_thread'/>
5. Kemudian cari kode <b:skin><
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 eksklusif dipraktekan saja , Wassalam.
Sumber https://www.indoblog.me/
