May 30, 2012

Cara nak Gabungkan Komen FB dan Blog


Selamat menyambut Pesta Kaamatan, buat semua orang2 Sabah..enjoy dengan cuti korang ya..hari ni , sha baru dapat on9..dan Miss hearty nak tanya something..



oh..nak gabungkan komen FB dan komen Blog ya...


Macam atas ni kan??

Sebelum tu pergi Dashboard > Setting > Comments 


tick embedded post *penting



Ikut Step ini

1. Dashboard > Design > Edit Html > Tick Expand Widget Templates
2. Cari kod ini div class='comments' id='comments'>
3. Jumpa?? copy kod bawah ini pula

<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='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 
4. Paste kan dibawah kod yang korang cari tadi tu
5. cuba preview dulu, kalau tiada error pergi next step
6. Cari kod ini pula <head>
7. Mesti jumpa punya..hehe..then copy kod bawah ni
<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' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script> 
** Tukarkan ID FB Kepada no ID FB korang 
cth : https://www.facebook.com/pages/Blog-Opzzpinky/212530322104062
amik macam no yang sha telah underline tu..

8. Paste kan dibawah kod yang korang jumpa td

9. Preview dulu baru save..
 
    eh..lum habis lagi..

10. Now go to Design > Template Designer > Advanced > Add CSS
11. Copy kod bawah ni 
.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;}
*** color PINK tu korang bole tukar di sini..bagi cantik lah kotak tu dengan warna yang korang nak

12.  Then tekan Apply Blog dan View Blog

Cerdit to Lyssa Secret

2 comments:

Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)