tutorial-software-blog

assalamualaikum..

peace!!

^o^'

tutor untuk buat comment facebook bergaya lagi ungul ^o^' huhu .jangan takut tutor ini telah diuji keberkesanannya !!saye sudah buat !! anda bila lagi ^_^'

klik pada gambar untuk lebih jelas

*note:banyak manfaat bila anda mengisi aplikasi ini di blog sendiri kemudian blog anda nampak lebih modern ,sesuai untuk dijadikan sebagai backlink thats mean bila people guna engine google untuk search item mudah saja blog anda terpapar !! btul x? oke klu xbetul subscribe dan like blog saye wakaka.^o^'

langkah - langkah tutorial pasang comment

1-Dashboard > Design > Edit Html > Tick Expand Widget Templates

2-Ctrl+F serentak cari scrip code ini

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

3-kemudian copy code dibawah ini dan pasekan dibawah code yang anda cari tadi

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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'>

warna merah : tukar mengikut ruang page anda

4-Ctrl+F serentak sekali lagi cari code ini..

<head>

5-copy code dibawah ini kemudian pasekan dibawah code yang anda cari tadi

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' 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>

6-preview dulu blog anda sama ada error atau tidak ,jika tidak save tau ^_^'

*note : tukar YOUR_FB_ID fb kepada no id profil anda ~cari id disini

[tukar everyone kepada onlyme + allow !]

cth:

7-nanti dulu ade lagi...korang pergi ke Design > Template Designer > Advanced > Add CSS

-kemudian copy code dibawah ini pastekan.. faham?

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

*note: tukar scrip code untuk pilihan warna ya. cari warna

8-then klik apply blog dan view macam biasa.siap!! ^o^'

Macam mana nak tengok ianya berhasil ataupun tidak ? Klik mana-mana entry , then tengok bahagian comment ? Menjadi tak.. Kalau menjadi , cer try tulis " testing-2"
NOTE : dan pengguna blog yang aktifkan comment anda sebagai aplikasi pop-up sila tukar ke embedded

seperti contoh gambar dibawah :-