Show Hide Blogger And Facebook Comments On Blog

Show Hide Blogger And Facebook Comments On Blog - Menggunakan show hide pada bagian komentar saya rasa adalah hal yang efektif. Apalagi jika membuat komentar facebook dan blogger dijadikan satu lalu dikemas dalam show hide menu. Hmm tertarik bukan? Hehe. Berikut penampakannya

Langkah Pertama
Silahkan pastikan bahwa template Anda sudah memiliki javascript SDK Facebook seperti di bawah ini. Jika belum ada silahkan copy kodenya di bawah ini dan simpan di bawah kode <body>



<div id='fb-root'></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Kode diatas menggunakan metode asynchronous, agar tidak membebani loading blog.

Langkah Kedua
Silahkan tambahkan kode display:none pada CSS pada id comments seperti di bawah ini

#comments{.....;display:none}

Langkah Ketiga
Jika template Anda menggunakan Threaded Comments Hack, silahkan cari kode di bawah ini

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

Kemudian geser ke bawah dan temukan penutup kode di atas </b:includable> kemudian silahkan simpan kode di bawah ini tepat di atas kode penutup tadi.


<div id="fb_comments" style="height:0;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>

Langkah Keempat

Silahkan cari kode di bawah ini

<b:includable id='post' var='post'>

Kemudian geser ke bawah dan temukan penutup kode di atas </b:includable> kemudian silahkan simpan kode di bawah ini tepat di atas kode penutup tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div>
<div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div>
<div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div>
<div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div>
</b:if>

Setelah itu silahkan SAVE template blog Anda dan silahkan coba masuk ke sebuah postingan untuk melihat dan mencoba penampakannya.

Show Hide Blogger And Facebook Comments On Blog

0 Response to " Show Hide Blogger And Facebook Comments On Blog"

Post a Comment