√ Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load - AdityaTekno

Social Items

Cara Memasang Komentar Disqus dengan Fungsi Tombol Onclick Event
Welcome back sahabat setia AdityaTekno.com. Desain Blog kali ini saya akan membahas tentang cara memasang widget Disqus comment di blog dengan fungsi onclick load. Yang artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus.

Memasang tombol load komentar Disqus dengan fungsi onclick event ini yaitu salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Nah, apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya.

Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus. Ok, langsung saja cara memasangnya adalah sebagai berikut! Simak baik-baik ya!

Cara Memasang Komentar Disqus dengan Fungsi Tombol Onclick Event

Masuk ke Dashboard Blogger > Edit HTML. Cari kode berikut ini:
<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>

 Hapus kode tersebut, lalu ganti dengan kode di bawah ini:

<b:includable id='comments' var='post'>
<div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;DISQUS_SHORTNAME&#39;; //Add your shortname here
var disqus_url = disqus_blogger_current_url;
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;;
function disqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.createElement(&quot;script&quot;);
e.type = &quot;text/javascript&quot;;
e.async = true;
e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
(document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
.appendChild(e);
//Hide the button after opening
document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
}
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
if (hash.substring(0, 8) == &quot;comment-&quot;) {
disqus();
}}}
</script>
</div>
</b:includable>
Ganti kode DISQUS_SHORTNAME yang ditandai pada kode di atas dengan Disqus shortname untuk blog Anda.

Untuk meletakkan tombol onclick load komentar Disqus, silahkan cari kode </article> lalu letakkan kode berikut di atas kode tersebut:
<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>

Sekarang tinggal merapikan tampilan widget komentar Disqus, silahkan letakkan kode berikut ini di atas kode </style>
/* Disqus comment onclik load button */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#d6324e;border-radius:2px}
.comments-blocks button:hover{background:#0198b6}

Simpan Template.

Note:
  • Jika seluruh langkah di atas sudah diterapkan tapi seluruh konten komentar tidak tampil, yang muncul hanyalah pesan seperti ini “We were unable to load Disqus………” itu berarti Disqus shortname/username yang Anda masukkan salah.
  • Jika tombol onclick load tidak bisa menampilkan widget komentar Disqus, silahkan hapus terlebih dahulu kode yang berkaitan dengan Disqus sebelumnya (sebelum menerapkan cara ini).

Sekian dulu desain blog tentang Cara Membuat Komentar Disqus dengan Tombol Onclick Load. Semoga bermanfaat dan Good luck. Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.


sumber:
http://www.bungfrangki.com/

Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load

Cara Memasang Komentar Disqus dengan Fungsi Tombol Onclick Event
Welcome back sahabat setia AdityaTekno.com. Desain Blog kali ini saya akan membahas tentang cara memasang widget Disqus comment di blog dengan fungsi onclick load. Yang artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus.

Memasang tombol load komentar Disqus dengan fungsi onclick event ini yaitu salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Nah, apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya.

Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus. Ok, langsung saja cara memasangnya adalah sebagai berikut! Simak baik-baik ya!

Cara Memasang Komentar Disqus dengan Fungsi Tombol Onclick Event

Masuk ke Dashboard Blogger > Edit HTML. Cari kode berikut ini:
<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>

 Hapus kode tersebut, lalu ganti dengan kode di bawah ini:

<b:includable id='comments' var='post'>
<div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;DISQUS_SHORTNAME&#39;; //Add your shortname here
var disqus_url = disqus_blogger_current_url;
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;;
function disqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.createElement(&quot;script&quot;);
e.type = &quot;text/javascript&quot;;
e.async = true;
e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
(document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
.appendChild(e);
//Hide the button after opening
document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
}
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
if (hash.substring(0, 8) == &quot;comment-&quot;) {
disqus();
}}}
</script>
</div>
</b:includable>
Ganti kode DISQUS_SHORTNAME yang ditandai pada kode di atas dengan Disqus shortname untuk blog Anda.

Untuk meletakkan tombol onclick load komentar Disqus, silahkan cari kode </article> lalu letakkan kode berikut di atas kode tersebut:
<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>

Sekarang tinggal merapikan tampilan widget komentar Disqus, silahkan letakkan kode berikut ini di atas kode </style>
/* Disqus comment onclik load button */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#d6324e;border-radius:2px}
.comments-blocks button:hover{background:#0198b6}

Simpan Template.

Note:
  • Jika seluruh langkah di atas sudah diterapkan tapi seluruh konten komentar tidak tampil, yang muncul hanyalah pesan seperti ini “We were unable to load Disqus………” itu berarti Disqus shortname/username yang Anda masukkan salah.
  • Jika tombol onclick load tidak bisa menampilkan widget komentar Disqus, silahkan hapus terlebih dahulu kode yang berkaitan dengan Disqus sebelumnya (sebelum menerapkan cara ini).

Sekian dulu desain blog tentang Cara Membuat Komentar Disqus dengan Tombol Onclick Load. Semoga bermanfaat dan Good luck. Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.


sumber:
http://www.bungfrangki.com/
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo