Cara Membuat Komentar Facebook Dan Blog secara Berdampingan

Cara Membuat Komentar Facebook Dan Blog Berdampingan- pada postingan kali ini saya Ulas Mengenai kotak komentar blog dan facebook. kotak komentar ini berdampingan tapi tidak terbuka dua duannya, hanya yang dipilih oleh yang melihat, untuk demonnya bisa lihat kotak komentar paling bawah postingan ini.

Ok Langsung Ke tutorial aja, saya rasa sudah paha semua maksut dari Cara Membuat Komentar Facebook Dan Blog Berdampingan.

Login Dulu Blog masing Masing, Kalau sudah Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Download Template Lengkap Untuk Menjaga Kesalahan.

Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Copy dan Paste code dibawah ini Tepat dibawahnya

bila ada dua buah paste aja dua duanya.
ingat..!!!
simpan di bawah....

<div class='comments' id='comments'> 
kode:

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

keterangan num_posts='2' width='400'/>
angka 2 gunannya brapa banyak jumlah komentar fb yang kita tampilkan dan 400 lebar ukuran kotak komentar fb nya

Lanjut ..

cari Code </head>
Taruh kode Berikut Tepat di Atasnya


kode:

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

Keterangan <meta content='ID FB Sobat disini' property='fb:admins'/> ganti dengan ID atau user facebook anda, misalkan saya www.facebook.com/anda berarti saya ganti dengan anda. untuk ID saya warna biru yang di ganti.

Lanjut .....

Simpan di atas  ]]></b:skin>
kode di bawah ini 

kode:

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


kemudian simpan.
selamat Mencoba Semoga Berhasil


Comments
2 Comments

2 komentar:

  1. ikapp. kediri mengatakan...:

    maaf. kalo yang kagak ada class='comments' id='comments' nya gmana ya?? di
    ikappdarkediri.org

  1. Aang Gunawan mengatakan...:

    Bloggernya setting dulu dalam postingannya pakai komentarnya di centang dulu. lihat di rancangannya kemudian edit htmlnya. trims

Posting Komentar

Related Posts Plugin for WordPress, Blogger...

Contact Form Sebelah Kanan

Labels

 
KLIK BLOGGER © 2011 | Template by Blogger Templates Gallery collaboration with Life2Work