Pembaruan Komentar Disqus Dengan Onclick Event

Bagi yang sudah melaksanakan tips cara Memuat Komentar Disqus dengan Onclick Event pada postingan yang kemudian dan tips tersebut tidak bekerja pada template blog sobat, Di sini aku akan memperlihatkan perbaikan atau pembaruan biar tips ini sanggup berfungsi dengan baik.

Untuk klarifikasi perihal cara kerja tombol Komentar Disqus dengan Onclick Event sanggup sahabat cek pada link ini. Nah, berikut langkah-langkahnya.

Pembaruan Komentar Disqus dengan Onclick Event

Buka Blogger > Klik sajian Tema > Kemudian klik tombol Edit HTML dan tambahkan instruksi ini sempurna di bawah instruksi 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 instruksi ini di sempurna bawah instruksi <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 alhasil akan menjadi ibarat 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 instruksi 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 harapan sobat

Kemudian tambahkan instruksi di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan ganti instruksi 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 alhasil di blog sobat.

Tambahan

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

Bonus

Bagi yang kemarin req cara menambahkan warna gradient ibarat di sajian atas blog ini silakan tambahkan CSS ini dan ganti .class-pilihan dengan class atau ID CSS blog sahabat sesuai keinginan. Intinya pada instruksi yang ditandai sanggup sahabat 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.

Share this post