Blogspot yang dipercantik dengan widget komentar facebook

Memperindah tampilan blog dan melengkapi widget yang memungkinkan untuk meningkatkan tarafic kunjungan dan kualitasnya memang menjadi startegi utama dalam memajukan blog bagi seorang webmaster. Facebook commenting selain dapat membuat blog terlihat lebih bagus dan rapih, para pengunjung pun akan lebih di mudahkan dalam berinteraksi dengan anda melalui Kotak komentar karena sebagian pengunjung anda pastinya ada yang sudah login ke akun Facebook, jadi mereka pun akan lebih mudah berkomentar.

Walaupun demikian menambahkan komentar Facebook dan tetap mempertahankan widget komentar Default blog tentu akan membuat blog kelihatan agak aneh dan tidak dinamis karena terdapat 2 widget komentar dan terlalu memanjang ke bawah, oleh sebab itu ada Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog.

Berikut lihat gambar,

Tips memasang widget dengan Komentar berdampingan sebagai berikut.
1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang "Expand Template Widget"
5. Cari Kode <div class='comments' id='comments'>
Biasanya akan terdapat 2 kode tersebut di template anda
Copy kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2

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

2 : Jumlah Komentar Facebook yang akan di tampilkan

400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
Copy Kode dibawah ini tepat diatas 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 Facebook' 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>

ID Facebook : Ganti dengan ID Facebook anda yang terletak di bagian belakang browser URL Profil Facebook anda, Misalkan http://www.facebook.com/TokoOnline.Bauntung ID Facebooknya adalah TokoOnline.Bauntung

7. Cari kode /* Comment atau #comments
Setiap Template mempunyai struktur kode yang berbeda-beda, jadi cari saja kode yang mirip dengan kode diatas
Copy kode berikut di bawah kode diatas tadi

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

8. Simpan

Selesai, sekarang anda sudah mempunyai blog dengan widget kommentar defauld blogger dan widget komentar support facebook yang menambah dan melengkapi khasanah kelengkapan blog anda.

Related Posts :