Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Share on :
Pasti sudah banyak yang tau tentang Tutorial Blog yg satu ini, sudah banyak blog yg mempostnya...
Tapi apa salahnya jika saya Berbagi lagi, Memang tak semua blog dapat memasang Tutorial blog di bawah ini, seperti halnya blog saya ini tak tau apa yg salah atau mungkin tempelan saya yg error, nggak taulah!!! tapi saya sudah coba di blog saya yg lainya dan berhasil...

Screen Shoot :
Ingin pasang Kotak Komentar Facebook dan Blog Keren ini
Silahkan ikuti  langkah" di bawah ini :
1. Login ke akun Bloger Sobat
2. Masuk ke Bagian Template
3. Klik "Edit HTML"
4. Centang "Expand Template Widget"
5. Cari Kode ]]></b:skin>
6. Letakan kode di bawah ini tepat di Atas kode ]]></b:skin> 
.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;}

Catatan :  

  • Silahkan Hapus kode yang berwarna Merah jika ingin membuat kotak Komentar Facebook menjadi Transparan.
7. Kemudian cari kode </head>
8. Lalu letakan Kode di bawah ini tepat di Atas 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='ID FP Anda disini' 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>
Catatan :  

  • Silahkan Ganti Kode berwarna Merah dengan ID FP(Fans Page) anda..  Contohnya https://www.facebook.com/v2trick.com atau http://facebook.com/301619369919206
9. Silahkan cari kode <div class='comments' id='comments'>
10. Umumnya kode <div class='comments' id='comments'> ada 2, jadi masukan kode di bawah ini tepat di Bawah  kedua kode tersebut.
  <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='3' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
Catatan :  

  • Silahkan anda Hapus kode berwarna merah tersebut jika kode di bawah sama, jika tidak y tidak usah. Untuk yang nomor 3 adalah Jumlah komentar yang akan muncul. Untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sendiri..
Semoga dapat bermanfaat....
Share this Article on :

Artikel Terkait :