Tab Komen Facebook Dan Blogger Pada Setiap Post

PENTING!

Sebelum membuat apa-apa pengubahsuaian template anda (pada Edit HTML) , anda dinasihatkan supaya mem'backup dahulu template untuk langkah keselamatan jika berlaku error semasa membuat pengekodan template. Klik SINI untuk melihat tutorial untuk membuat BACKUP dan RESTORE Template... :)

Ni adalah tutorial untuk buat Tab komen bagi blogger komen dan facebook komen pada setiap entri anda seperti gambar diatas. Menarik bukan. Jom buat diblog anda, ikuti langkah dibawah.

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1 pada GAMBAR 1) " dan klik "Template (rujuk no 2 pada GAMBAR 1)".

GAMBAR 1

3. Klik pada " Edit HTML (rujuk no 3 pada GAMBAR 2) "

GAMBAR 2

4. Tick pada Expand Widget Templates (rujuk no 4 pada GAMBAR 3)

GAMBAR 3

5. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 5 pada GAMBAR 4):

]]></b:skin>

GAMBAR 4

6. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) sebelum kod " ]]></b:skin> " (rujuk no 6 pada GAMBAR 4)

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

7. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 7 pada GAMBAR 5):

<head>

GAMBAR 5

8. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) selepas kod " <head> "(rujuk no 8 pada GAMBAR 5)

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

P/S: Tukarkan ID FACEBOOK ANDA dengan ID facebook anda.
Contoh:
https://www.facebook.com/faeyzfunkyz91
- Maka ID Facebook adalah faeyzfunkyz91

9. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 9 pada GAMBAR 6):

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

GAMBAR 6

10. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) selepas kod " <div class='comments' id='comments'> " (rujuk no 10 pada GAMBAR 6)

<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>