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 |
]]></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 {7. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 7 pada GAMBAR 5):
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;
}
<head>
 |
| 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 |
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>P/S: Anda boleh gantikan:
<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'>
- 2 - Untuk jumlah post komen
- 400 - Untuk lebar ruang komen
11. Klik Preview dan jika tiada error klik Save template. (rujuk GAMBAR 7 )
 |
| GAMBAR 7 |
This comment has been removed by the author.
ReplyDelete:-)
Delete