Cara Menciptakan Fungsi Onclick Load Pada Komentar Disqus
Cara Membuat Fungsi Onclick Load Pada Komentar Disqus - Onclick Load, dengan memasang fungsi ini di blog tenttunyanakan mempercepat loading blog teman sebab komentar Disqus akan tertunda dulu sebelum pengunjung Click Load Comment, apalagi kalau komentar Disqus berbagai ada juga yang berupa gambar atau file lainnya itu akan memperlambat loading pada blog.oke simak cara dibawah ini.
Cara Memasang Fungsi Onclick Load
Pertama teman masuk terlebih dahulu ke blogger.com > Klik pada Tema > Edit HTML > copy arahan dibawah ini pastekan sempurna dibawah kode HTML <b:includable id='comments' var='post'>...</b:includable>
<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>
Setelah itu copy arahan dibawah ini dan pastekan sempurna dibawah kode <b:includable id='comments' var='post'>
<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div> <div id='disqus_thread'/>
Hasilnya ibarat dibawah ini
<b:includable id='comments' var='post'> <div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div> <div id='disqus_thread'/>
Kemudian tambahkan arahan CSS sebelum arahan </head>
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Onclick Disqus Comment */ #comments{display:none} .post-comment-link{visibility:hidden} #disqus_thread{background:#fff;margin:10px 0 0 0;padding:0} #disqusshow{position:relative;overflow:hidden;display:block;text-align:left;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#00b894;color:#fff;transition:all .3s} #disqusshow:hover,#disqusshow:active{color:#fff} </style> </b:if>
Atur arahan CSS sesukamu Sobat
Kemudian pastekan Kode dibawah ini sebelum arahan </body> atau <!--</body>--></body>, Ganti triksimple dengan shortname disqus teman sendiri<b:if cond='data:blog.pageType != "index"'> <script type='text/javascript'> var disqus_shortname = "triksimple"; !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> <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="triksimple";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()} //]]> </script> </b:if>
Kemudian simpan Tema teman dan lihat hasilnya.
Versi Warna Gradient
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Onclick Disqus Comment */ #comments{display:none} .post-comment-link{visibility:hidden} @keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #disqus_thread{background:#fff;margin:10px 0 0 0;padding:0} #disqusshow{position:relative;overflow:hidden;display:block;text-align:center;font-weight:700;font-size:20px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}} #disqusshow:hover,#disqusshow:active{color:#fff} </style> </b:if>
Demonya dapat lihat di blog ini.
Oke sekian yang dapat aku jelaskan tentang Cara Membuat Fungsi Onclick Load Pada Komentar Disqus Terima Kasih yang sudah berkunjung biar bermanfaat