Cara Membuat Komentar Facebook Berjajar Dengan Komentar Blog

Postingan pertama saya diawal bulan Romadhon ini,saya akan berbagi tips dan cara membuat tampilan komentar blog lebih menarik.Yaitu dengan membuat Membuat Komentar Facebook Berjajar Dengan Komentar Blog.

Secara SEO,ini akan memudahkan pengunjung yang tidak punya akun blogger akan bisa meninggalkan komentar tanpa menggunakan anonim,karena belum tentu semua blog membolehkan anonim untuk berkomentar di blog karena Anonim terkesan seakan-akan adalah (sensor)...hehehehehe.Komentar facebook dan blog yang berdampingan ini akan saya tambahi sedikit dengan modivikasi efek hover dan bayangan sehingga ketika disorot oleh mouse akan bergerak seperti di blog saya ini :).

Langsung saja yook kita ke KUA,biar ga  kelamaan nunggu.hehehe....Refreshing bentar lah,maksud saya ke Tutorial  Membuat Komentar Facebook Berjajar Dengan Komentar Blog.

1.Login ko Blogger

2.Pilih Opsi lainya>>Template>>(lebih baiknya backup dulu templatenya biar nanti kalo ada apa-aa ga nyesel)Edit HTML>>Lanjutkan(Centang"Expant Template Widget")

3.Cari kode ]]></b:skin>  kemudian jika sudah ketemu kopas kode dibawah ini tepat diatas kode ]]></b:skin>

.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: #b7b0b0;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);moz-box-shadow: 10px 5px 5px #222;
    -webkit-box-shadow: 10px 5px 4px #222;
    box-shadow: 10px 5px 5px #222; -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
}

4.Setelah itu cari kode </head> kemudian kopas 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>

Jangan lupa untuk mengganti ID Facebook dengan ID facebook sobat.Kalo ga tw lihat contoh  screen shoot ID facebook dibawah ini .

5.Langkah selanjutnya adalah mencari kode <div class='comments' id='comments'>Biasanya ada dua kode semacam itu.Letakkan saja kode dibawah ini tepat dibawah kedua kode tersebut.

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

Angka 2 menunjukkan komentar facebook yang ditampilkan sedangkan angka 400 adalah lebar dari komentar facebook.
5.Langkah yang terakhir adalah"save template".

Selamat mencoba dan semoga sukses selalu.Itulah tadi Cara Membuat Komentar Facebook Berjajar Dengan Komentar Blog.Semoga bermanfaat :)

Tweet