Memuat Komentar Disqus Dengan Onclick Event

Baca Juga

Memuat Komentar Disqus dengan Onclick Event - Kali ini yang akan disembunyikan ialah komentar disqus, berbeda dengan trik pada artikel Menambahkan Show and Hide Comments Blogger dengan Onclick Event. Tombol yang akan muncul hanya akan memunculkan kolom komentar disqus saja, ketika tombol diklik tombol tersebut akan hilang secara otomatis.

Namun fungsinya masih tetap sama yaitu untuk mempercepat loading dikala memuat halaman (onload) postingan di blog. Berikut cara penerapannya

Memuat Komentar Disqus dengan Onclick Event

1. Jika di blog sudah terdapat widget disqus dan semua aba-aba yang berkaitan dengan disqus, silakan hapus terlebih dahulu. Agar tutorial ini sanggup diterapkan dengan baik.

2. Dalam tutorial ini ada aba-aba yang memakai fontawesome. Pastikan di dalam template sudah terdapat link fontawesome.

1. Login Blogger > Template Editor > Cari aba-aba di bawah ini

<b:includable id='comments' var='post'> ....... ....... ....... </b:includable>

2. Tambahkan aba-aba di bawah ini sempurna di bawah aba-aba pada langkah 1 di atas

<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>

Hasilnya akan menyerupai ini

<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>

3. Selanjutnya tambahkan aba-aba di bawah ini sebelum </body>

<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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()} //]]> </script> </b:if>

Ganti aba-aba yang ditandai dengan username disqus sobat.

4. Selanjutnya tambahkan aba-aba di bawah ini sebelum ]]></b:skin> atau </style>

/* Disqus Comments */ #comments{display:none;} .post-comment-link {visibility:hidden;} #disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;} #disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s} #disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute} #disqusshow:hover,#disqusshow:active{color:#f8695f}

5. Cari aba-aba di bawah ini

<div class='comments' id='comments'>

6. Tambahkan aba-aba di bawah ini sempurna di atas aba-aba pada langkah ke 5

<div id='disqusshow' onclick='load_Comments()'>Load comments</div> <div id='disqus_thread'/>

Hasilnya akan menyerupai ini

<div id='disqusshow' onclick='load_Comments()'>Load comments</div> <div id='disqus_thread'/> <div class='comments' id='comments'>

7. Untuk menampilkan disqus comment count di halaman index dan postingan, silakan tambahkan aba-aba di bawah ini pada post meta atau post isu sesuai template yang digunakan

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

8. Simpan template.

Demikian tutorial perihal Cata Memuat Komentar Disqus dengan Onclick Event, agar bermanfaat.