Membuat Kotak Komentar Berdampingan Dengan Komentar Facebook

Ketemu lagi dengan saya, disini, di tempat ini, tapi di lain waktu mungkin. untuk meneruskan tutor Blogger sebelumnya, kali ini saya akan menjelaskan bagaimana cara membuat kotak komentar blog normal berdampingan dengan kotak komentar facebook.

PERINGATAN : Tulisan ini hanya diperuntukan bagi para pemula seperti saya yang masih belum tau apa-apa tentang blog,.

Ukeh langsung saja yak, gak lama-lama basa-basinya entar tambah basi loh, wkwkwkwk :D. begini nih kalo orang ndeso lagi ngeblog, sukanya ngoceh mulu, ngelucu mulu, yaudah lah ya,, gak lama-lama.. berikut contoh Screnshutnya

kalo menurut sobat keren silahkan deh di praktekin langsung, begini caranya :

-  login dulu ke blog sobat seperti biasa
-  kemudian masuk ke Template -> edit html

-  jangan lupa klik expand template widget
-  cari kode berikut ]]></b:skin> , gunakan pencarian pada browser untuk mempermudah.
-  pastekan kode berikut diatas kode ]]></b:skin>


<!-- Commen page berdampingan Code Start-->
 .comments-page { background-color: #;}
    #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;}
<!-- Commen page berdampingan Code End-->



-  kemudian cari lagi kode </head>
-  pastekan kode berikut diatas kode </head> tadi,


<!-- Commen page berdampingan Code Start-->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID facebook sobat' 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>
<!-- Commen page berdampingan Code End-->



ket : ganti ID facebook sobat misalkan punya saya http://www.facebook.com/andrew.imamuddyen berarti yang saya isikan adalah andrew.imamuddyen.

eits belum selesai perjuangan kita sobat.
-  cari lagi kode <div class='comments' id='comments'>
-  pastekan kode berikut dibawah kode <div class='comments' id='comments'> tadi, biasanya ada 2, pastekan dibawah keduanya


<!-- Commen page berdampingan Code Start-->
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='615'/>
    </b:if>
  </div>
<div class='comments comments-page' id='blogger-comments-page'>
<!-- Commen page berdampingan Code End-->



-  kemudian tinggal simpan dan boleh dilihat hasilnya bisa seperti kotak komentar di bawah..

Ukeh cukup sekian saja, jika masih ada yang kurang paham silahkan komen di bawah, sebisa mungkin akan saya bantu, meskipun sama-sama belajarnya. :D,..

Semoga sukses dan manfaat... Suwon mari ngunjungi blogku seng sederhana iki...