Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / Disqus / Tutor Blogger

Cara Menciptakan Fungsi Onclick Load Pada Komentar Disqus

Cara Membuat Fungsi Onclick Load Pada Komentar Disqus Cara Membuat 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 alasannya komentar Disqus akan tertunda dulu sebelum pengunjung Click Load Comment, apalagi jikalau 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 isyarat 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 isyarat 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 isyarat CSS sebelum isyarat </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 isyarat CSS sesukamu Sobat
Kemudian pastekan Kode dibawah ini sebelum isyarat </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 isyarat CSS diatas dengan isyarat 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
Sumber https://www.triksimple.com/