Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Salam buat sobat2 blogger semua. Kali ini saya ingin share tentang bagaimana Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan. Untuk mengetahui langkah-langkah nya, mari langsung aja ke tkp :

1. silahkan login akun blogger anda
2. klik menu template, edit html
3. centang expand template widget
4. paste kan code di bawah ini tepat di atas ]]></b:skin> (gunakan CTRL+F agar lebih cepat)

---

.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;}

---

5. paste kan code di bawah ini tepat di atas </head>

---

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='http://www.facebook.com/rianspycer' 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>

---

NB : ganti tulisan yang berwarna merah dengan URL facebook anda

6. paste kan code di bawah ini tepat di bawah <div class='comments' id='comments'>

---

<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='100' width='480'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

---

NB :
- jika <div class='comments' id='comments'> ada 2 , maka paste kan code tadi sebanyak 2x
- tulisan yang berwarna merah adalah jumlah komentar yang akan di tampilkan
- tulisan yang berwarna biru adalah lebar kotak komentar
- hapus tulisan yang berwarna pink jika terdapat code yang sama di bawah nya

7. klik simpan template , dan selesai ..

Gampang kan cara nya ,, gak susah2 kog :)

Posted in ngeblog