Pembaruan Komentar Disqus dengan Onclick Event - Arlina Design
Bagi yang sudah melakukan tips cara Memuat Komentar Disqus dengan Onclick Event pada postingan Arlina Design yang lalu dan tips tersebut tidak bekerja pada template blog sobat, Di sini saya akan memberikan perbaikan atau pembaruan agar tips ini bisa berfungsi dengan baik.

Pembaruan Komentar Disqus dengan Onclick Event

Untuk penjelasan tentang cara kerja tombol Komentar Disqus dengan Onclick Event bisa sobat cek pada link ini. Nah, berikut langkah-langkahnya.

Pembaruan Komentar Disqus dengan Onclick Event


Buka Blogger > Klik menu Tema > Kemudian klik tombol Edit HTML dan tambahkan kode ini tepat di bawah 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 tambahkan kode ini di tepat bawah 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'/>

Maka hasilnya akan menjadi seperti 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'/>

Selanjutnya tambahkan kode CSS ini sebelum </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 CSS sesuaikan dengan keinginan sobat

Kemudian tambahkan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan ganti kode yang ditandai arlinadesign dengan username disqus blog sobat.

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

Selesai dan lihat hasilnya di blog sobat.

Tambahan


Bagi yang mengaktifkan sistem komentar Google+ di blognya, silakan nonaktifkan terlebih dahulu agar kode di atas dapat bekerja dengan baik dan atur setelan komentar blog di Setelan > Postingan, komentar, dan berbagi > Komentar > Kemudian sesuaikan menjadi seperti gambar di bawah ini

Pembaruan Komentar Disqus dengan Onclick Event

Bonus

Bagi yang kemarin req cara menambahkan warna gradient seperti di menu atas blog ini silakan tambahkan CSS ini dan ganti .class-pilihan dengan class atau ID CSS blog sobat sesuai keinginan. Intinya pada kode yang ditandai bisa sobat tambahkan di class atau ID apapun di dalam template.

@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

.class-pilihan{background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}

Itulah Pembaruan Komentar Disqus dengan Onclick Event, semoga bermanfaat dan wassalam.

Pembaruan Komentar Disqus dengan Onclick Event

Bagi yang sudah melakukan tips cara Memuat Komentar Disqus dengan Onclick Event pada postingan Arlina Design yang lalu dan tips tersebut tidak bekerja pada template blog sobat, Di sini saya akan memberikan perbaikan atau pembaruan agar tips ini bisa berfungsi dengan baik.

Pembaruan Komentar Disqus dengan Onclick Event

Untuk penjelasan tentang cara kerja tombol Komentar Disqus dengan Onclick Event bisa sobat cek pada link ini. Nah, berikut langkah-langkahnya.

Pembaruan Komentar Disqus dengan Onclick Event


Buka Blogger > Klik menu Tema > Kemudian klik tombol Edit HTML dan tambahkan kode ini tepat di bawah 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 tambahkan kode ini di tepat bawah 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'/>

Maka hasilnya akan menjadi seperti 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'/>

Selanjutnya tambahkan kode CSS ini sebelum </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 CSS sesuaikan dengan keinginan sobat

Kemudian tambahkan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan ganti kode yang ditandai arlinadesign dengan username disqus blog sobat.

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

Selesai dan lihat hasilnya di blog sobat.

Tambahan


Bagi yang mengaktifkan sistem komentar Google+ di blognya, silakan nonaktifkan terlebih dahulu agar kode di atas dapat bekerja dengan baik dan atur setelan komentar blog di Setelan > Postingan, komentar, dan berbagi > Komentar > Kemudian sesuaikan menjadi seperti gambar di bawah ini

Pembaruan Komentar Disqus dengan Onclick Event

Bonus

Bagi yang kemarin req cara menambahkan warna gradient seperti di menu atas blog ini silakan tambahkan CSS ini dan ganti .class-pilihan dengan class atau ID CSS blog sobat sesuai keinginan. Intinya pada kode yang ditandai bisa sobat tambahkan di class atau ID apapun di dalam template.

@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

.class-pilihan{background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}

Itulah Pembaruan Komentar Disqus dengan Onclick Event, semoga bermanfaat dan wassalam.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo