9.09.2012

Komentar Blogger dan Facebook Berdampingan Dengan Tab

Assalamu'alaikum..
Selamat sore sahabatku...

Sebenarnya saya sedang geram setelah berhasil memasang komentar Facebook berdampingan dengan komentar Blogger. Trik biasa memang bagi sebagian blogger, tapi setelah berhasil dengan mulusnya, ntah apa yang saya lakukan sehingga seperti yang anda lihat, kotak komentar Facebook-nya kadang-kadang tidak bisa dilihat.... :(
Bagi para master saya mohon pencerahannya...
Akan tetapi saya walaupun sedikit kesal dengan tab komentar Facebook dan Blogger tersebut berusaha untuk membagikannya kepada sobat di jagat maya.

Berikut caranya bagi yang ingin tahu :
1. Login ke akun blogger sobat kemudian ke Edit HTML
2. Di  Edit HTML tersebut jangan lupa untuk mencentang Expand Template Widget
3. Temukan kode <div class='comments' id='comments'>
 dengan bantuan CTRL+F atau F3
4. Copy kode dibawah ini dibawah kode <div class='comments' id='comments'> yang kedua

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <fb:comments expr:href='data:post.url' num_posts='2' width='400'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'>
5. Temukan kode </head> dengan bantuan CTRL+F dan Copy kode dibawah ini diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
  $(".comments-tab").addClass("inactive-select-tab");
  $(selectTab).removeClass("inactive-select-tab");
  $(".comments-page").hide();
  $(selectTab + "-page").show();
}
</script>
6.   Temukan kode #comments dengan bantuan CTRL+F dan Copy kode dibawah ini diatas kode #comments

.comments-page {  background-color: #f2f2f2;}#blogger-comments-page {  padding: 0px 5px;  display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}
7. Simpan dan buktikan hasilnya.  jangan lupa ganti YOUR_FB_ID dengan kode facebook Anda.
Selamat menikmati..!

Anda juga membaca ...:

5 comments

  1. oya gan ko jarak nya jadi jauh bgt yah kotak komentar nya...?
    tidak seperti kotak komentar agan yang jarak nya berdekatan..
    cob deh gan cek blog ane ( cyanfotografi.blogspot.com )

    klo bisa kasih solusi nya langsung di blog ane ajah gan...
    di tunggu ke hadiran nya sekalian membawa jwban atas pertanyaan ane...

    ReplyDelete
    Replies
    1. Maaf, telat sob..
      kotak komentar yang mana sobat, saya cek ke blog sobat sepertinya belum memasang yaah.. atau memang sudah dicopot.. ?
      heheh

      Delete
  2. Mantab sobb... :)
    Makasih sharenya...

    ReplyDelete