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 jikalau komentar Disqus aneka macam 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 = &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>

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 menyerupai 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 != &quot;index&quot;'> <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 &lt;!--</body>--&gt;&lt;/body&gt;, Ganti triksimple dengan shortname disqus teman sendiri

<b:if cond='data:blog.pageType != &quot;index&quot;'> <script type='text/javascript'> var disqus_shortname = &quot;triksimple&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> <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="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

Bagi teman yang ingin versi gradient ganti arahan CSS diatas dengan arahan CSS dibawah ini penempatannya masih sama.

<b:if cond='data:blog.pageType != &quot;index&quot;'> <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

Bagikan Artikel ini