Cara Membuat Fungsi Onclick Load Pada Komentar Disqus - TRIK SIMPLE
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 sobat karena komentar Disqus akan tertunda dulu sebelum pengunjung Click Load Comment, apalagi jika komentar Disqus banyak sekali 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 sobat masuk terlebih dahulu ke blogger.com > Klik pada Tema > Edit HTML > copy kode dibawah ini pastekan tepat 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 kode dibawah ini dan pastekan tepat 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 seperti 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 kode CSS sebelum kode </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 kode CSS sesukamu Sobat
Kemudian pastekan Kode dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, Ganti triksimple dengan shortname disqus sobat 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 sobat dan lihat hasilnya.

Versi Warna Gradient


Bagi sobat yang ingin versi gradient ganti kode CSS diatas dengan kode 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 bisa lihat di blog ini.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Fungsi Onclick Load Pada Komentar Disqus Terima Kasih yang sudah berkunjung semoga bermanfaat

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 sobat karena komentar Disqus akan tertunda dulu sebelum pengunjung Click Load Comment, apalagi jika komentar Disqus banyak sekali 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 sobat masuk terlebih dahulu ke blogger.com > Klik pada Tema > Edit HTML > copy kode dibawah ini pastekan tepat 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 kode dibawah ini dan pastekan tepat 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 seperti 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 kode CSS sebelum kode </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 kode CSS sesukamu Sobat
Kemudian pastekan Kode dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, Ganti triksimple dengan shortname disqus sobat 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 sobat dan lihat hasilnya.

Versi Warna Gradient


Bagi sobat yang ingin versi gradient ganti kode CSS diatas dengan kode 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 bisa lihat di blog ini.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Fungsi Onclick Load Pada Komentar Disqus Terima Kasih yang sudah berkunjung semoga bermanfaat
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe