Komentar Facebook Dengan Blog Berdampingan

Huuuft ,panjang banget jdul post ini .... ya gmana lagi .....

banyak nih yg pengen punya Komentar Facebook Dengan Blog Berdampingan ,sperti ni

DEMO

Liat di komentar nya yahh

Nih cara bikinnya

• Masuk Ke Blogger >> Rancangan >> Klik edit HML
• Backup dulu template kalian >> Centang Expand Template Widget
• Tekan ctrl + F ,dan cari kode ini 

<div class='comments' id='comments'>

•  Nanti akan ditemukan 2 kode diatas ,cari yg kedua 
• Copy kode dibawah tepat dibawah kode diatas

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

• Caro kode 

</head>

• Letakkan kode berikut 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>

• Ganti ID FB sobat Disini dengan ID fb kalian
• Letakkan kode dibawah ini diatas kode

]]></b:skin>

• Kode 

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

• Simpan template kalian

Sebelumnya di Pratinjau dulu yahh

Share This:

Facebook Twitter Pinterest Linkedin Whatsapp Whatsapp

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.