Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide

Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide

Bola Hero Gawai

Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide

Menunda Pemuatan Komentar Facebook Dan Disqus Dengan Onclick Dan Show Hide
Kali ini postingan ini saya buat untuk memenuhi permintan sahabat Kompi, mas +Rico Ds untuk membuat penundaan pemuatan komentar Facebook dan Disqus serta dilengkapi dengan tombol show hide komentar seperti yang saya gunakan di salah satu blog saya.

Penundaan komentar Facebook dan Disqus ini menggunakan javascript onclick yang artinya js dari kedua widget komentar tersebut tidak akan di-load ketika halaman diakses, namun akan di-load ketika tombolnya diklik.

Hal ini tentunya bagus untuk memperingan loading blog, sehingga pengunjung tidak kesulitan untuk mengakses blog kita terutama yang menggunakan perangkat mobile. Dan ketika akan berkomentar tinggal klik tombol load komentar.

Komentar Facebook dan Disqus ini akan dipasangkan bersamaan, komentar Facebook ditempatkan di atas komentar Disqus. Sebagai DEMO silahkan coba lihat di sini.

Komentar Facebook Dan Disqus

Untuk membuat seperti itu silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan simpan CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.comments,.comments-fb{background:#262626;clear:both;margin:0 20px;line-height:1em;padding:0 12px;}
#comments{padding:10px 20px;margin-top:0;display:none}
.fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-title,.disqus-title{margin:0 20px;text-align:left;background:#111;padding:6px 10px;color:#f7f7f7!important;font-size:120%;font-weight:700}
#disqus-title{margin:20px 20px 0!important;}
.fb-loader,#fb-showhide,.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#fb-comment,#disqus-showhide,#fb-showhide{display:none}
</style>
</b:if>

2. Silahkan simpan javascript di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");}
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
//]]>
var disqus_shortname = &quot;USERNAMEDISQUS&quot;;
function loadDisqus(){var e=document.getElementById(&quot;disqus-loader&quot;);e.style.display=&quot;none&quot;;var e=document.getElementById(&quot;disqus-showhide&quot;);e.style.display=&quot;block&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_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();}
</script>
<div id='fb-root'/>
</b:if>

Silahkan ganti kode USERNAMEDISQUS dengan username Disqus blog Anda. Jika di blog sudah terdapat kode js Facebook seperti di bawah ini silahkan hapus.


<div id='fb-root'/>
<script type='text/javascript'>
!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");
</script>

Untuk widget Facebook lainnya seperti tombol Like dan Like Box yang menggunakan kode js di atas pasti tidak akan jalan, jadi silahkan ganti dengan yang tampa mengunakan js Facebook.

Baca juga:

3. Cari kode seperti di bawah ini kemudian silahkan copy dan paste di notepad untuk jaga-jaga jika suatu saat ingin balik lagi ke komentar Blogger.


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

4. Kemudian silahkan ganti kode di atas dengan kode di bawah ini:


            <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-title'>Facebook Comments<span class='fb-loader' id='fb-loader' onclick='loadFacebook()'>Show</span><span id='fb-showhide' onclick='toggleNavPanel(&apos;fb-comment&apos;)'>Hide</span></div>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
              </div>
<div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
            </div>
</b:if>
</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>
            <b:includable id='fb-comments' var='post'>
            <div class='fb-comments' data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
            </b:includable>

5. Kemudian silahkan SAVE edit HTML blog Anda.

Untuk mengatur tampilan tombol dan lainnya silahkan atur-atur di kode CSS-nya.

Selamat mencoba dan semoga bermanfaat......

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×