Posts Subscribe to This BlogComments

Follow Us


widget

make widget
Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us
Top Blogs BOOTER-CENTER - Find me on Bloggers.com
Mau Pasang Iklan Disini? Resize Banner 460X61
ads ads ads peluang usaha

Monday, December 5, 2011

Cara Pasang komentar Fb berjejer dengan Komentar Blog Cara Pasang komentar Fb berjejer dengan Komentar Blog

Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us

kembali menemani sobat blogger untuk mempercantik tampilan komentar di blog kita agar kelihatan Rapi dan keren. Pada tutorial yang lalu yakni cara pasang kotak komentar facebook di blog, Komentar Blog dan komentar facebook Berada tidak sejajar atau komentar Fb ada di atas komentar Blog, dan ini membuat blog keliatan sedikit kurang dinamis.
Dengan cara berikut ini juga akan mempermudah Sobat Blogger yang belum pasang Kotak komentar FB  tanpa buat Aplikasi sendiri lagi, Tapi sayang bagi sobat yang sudah pasang Kotak komentar cara lama akan kehilangan Komentar Fb, tapi Komentar Blog tetap ada.
Untuk Melihat Hasil Cara berkut Sobat bisa lihat pada kolom komentar, disana Pengunjung bebas memilih menggunakan kotak komentar Fb atau Blog, Namun disarankan bagi Sobat Blogger sebaiknya meninggalkan komentar di komentar Blogger.

Baiklah Mari Kita Mulai
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'>

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'>
Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing
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/topandisconnect1
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

Selamat Mencoba

Related Post



Get Traffic Like Spam
Loading...

2 Comment:

  • gan, klo ane pake kode di atas. kadang ada yang muncul di postingan, kadang ada yang enga. kenpa ya? apa coment fb emang begitu? ato harus nunggu dulu? padahal ud sesuai seperti itu.

  • ini yang keliatan dan tidaknya comment Fb atow Comment Blogger?

  • Post a Comment

    Section meetings - Registered
    recent entries

    users online



    ads ads ads ads
     

    networkedblogs

    B-C ON YAHOO

    Trafic

    Followers

    MyFreeCopyright.com Registered & Protected MyFreeCopyright.com Registered & Protected