Membuat Tab Komentar Facebook dan Blogger 10

Para pengunjung Blogger Blog terkadang tidak memiliki google atau Live Jurnal account. dan hal ini akan menyulitkan mereka untuk memberikan komentar pada postingan blog yang sedang mereka baca , terkadang mereka hanya memiliki facebook account yang selalu sign in ketika mereka membaca postingan blog.Apakah mungkin pengunjung bisa berkomentar di blogger blog dengan facebook account ? pertanyaan ini akan terjawab setelah kita menambahkan Tab Komentar Facebook dan Blogger pada blog kita yang tentu saja jawabanya Bisa !, karna dengan trik yang akan kita bahas kali ini, Blogger blog kita akan dapat menampilkan kedua Box Komentar yaitu Blogger box komentar dan Facebook Box komentar Secara berdampingan sehingga para pengunjung blog yang hanya memiliki account Facebook pun dapat memberikan komentarnya pada blog kita.

Dan adapun langkah-langkah Membuat Tab Komentar Facebook dan Blogger adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode ]]></b:skin> Gunakan Ctrl + F atau F3 untuk memudahkan Pencarian kode.
5. Copy dan pastekan kode di bawah ini diatas kode ]]></b:skin> .

/*******Tab Fb dan Blogger Komentar Start*******/
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { border:2px solid  #eeeeee;float:left; border-radius: 5px;-moz-border-radius: 5px; 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;}
/*******Tab Fb dan Blogger Komentar End*******/

6. Kemudian Anda cari kode </head> Gunakan Ctrl + F atau F3 untuk memudahkan Pencarian kode.

7. Copy dan pastekan kode di bawah ini diatas kode </head> tadi.

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

Keterangan :

Ganti kode yang berwarna biru (ID FB Anda disini) diatas dengan ID facebook atau Facebook Page anda.Contoh : https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru untuk mengetahui id anda ganti https://www.facebook.com/nama Anda denngan https://graph.facebook.com/nama Anda  pada browser anda. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka dan anka itulah facebook id anda.

8. Selanjutnya cari kode <div class='comments' id='comments'> Keterangan: Anda akan mendapati dua kode yang sama pada templete anda,kemudian copy dan pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'>  yang pertama dan kedua.

<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' 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='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<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:

Angka 2 yang berwarna hijau merupakan jumlah komentar blog anda.
Angka 400 yang berwarna ungu merupakan Lebar kotak komentar anda.

9. Simpan Templete anda

Selesai dan selamat Mencoba....