Cara memasang komentar facebook berjejer dengan Komentar Blogger

Perlu diingat, tidak semua template mendukung cara ini.
Langsung aja ke proses pembuatannya..
ikuti langkah di bawah ini.

Pertama
Silahkan sobat ke Account Blog masing-masing dan Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Note : Ingat Jangan Lupa Download Template Lengkap Untuk Menjaga Kesalahan.

Kedua
Tekan tombol Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Setelah ketemu Silahkan Copy dan Paste code dibawah ini Tepat dibawahnya
Ini Code nya :

<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'>

Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing
Notw num_post='2' yakni jumlah komentar yang akan ditampilkan, silahkan diubah sesuai keinginan

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

Ketiga
Sekarang carilah Code </head>
Lalu silahkan Letakkan Code Berikut Tepat diAtasnya

<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>

Maka hasil akan seperti ini :
<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>
</head>

Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook seperti berikut : https://www.facebook.com/daenkrhapy
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.

Keempat
Cari Lagi Code ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin
Lalu Letakkan Code Berikut di Bawah nya

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

Kelima
Silahkan Klik Pratinjau dulu apakah Peletakan Code sudah Benar Atau tidak, Jika tidak ada masalah Silahkan Klik SIMPAN

Seputar sahabat.
Sumber www.kumpulancara.com

BACA SELENGKAPNYA...

Mirip dengan Cara memasang komentar facebook berjejer dengan Komentar Blogger :

---