Cara Membuat Tab Komentar Facebook dan Blogger

Banyak cara untuk mendesaign tamplate blogger dan banyak pula kreatifitas dalam ilmu web/blogger salah satunya dengan mendesign blog membuat papan komentar biar blog tersebut ramai dikunjungi, apalagi kalau blog tersebut banyak dikunjungi ini bisa membuat Woww........ramai blog saya !!! bagi pemilik blog tersebut. memang sekarang jejaringan sosial internet lagi marak-maraknya terutama pengguna facebook. di tambah dengan blogger yang makin hari makin maju.
jika papan komentar facebook dan blogger dipadukan kira-kira bagaimana ya...??????? ya tentu sobat bisa bayangkan sendiri hehehe.... kita bakalan kembajiran job dan request tentunya. dengan kita menggabungkan kedua design komentar di blog aku yakin si pengguna Facebook tak akan keberatan untuk meninggalkan komentar di blog kita karena kalau meninggalkan komentar di blogger akan repot atau masih awam bagi seorang maniak facebook karena yang berkomentar di blooger rata-rata dia punya blogger kalau gak punya blog buat apa coba????? hehehe
nah buat sobat blogger mania saya disini mau membagikan cara membuat tab komentar Facebook dan Blogger atau banyak menyebutnya Cara membuat komentar facebook berdampingan dengan blogger. sebelumnya silahkan lihat screenshort dibawah seebelum menjelaskan langkah-langkah cara membuat tab komentar facebook dan blogger.
tab komentar-Giga Watt
nah kalian lihat bukan bagaimana tampilannya sungguh menawan dan memikat hati ya.....hehhehe. ayo ikuti langkah-langkah abang ya....hehehe
1. login dulu ke blog sobat.
2. langsung menuju ke Edit Tamplate
3. buka Edit HTML jangan lupa centang kotak pojok atas itu ya,,,,
4. cari kode ]]</b:skin> kalau sudah ketemu silahkan copy kode dibawah ini tempatkan diatasnya.
.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;}
5. setelah kalian taruh kodenya silahkan cari lagi kode </head>. kalau sobat sudah menemukan silahkan taruh kode dibawah ini diatasnya.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://kodegigawatt.googlecode.com/files/jquery-latest.js'/>
<meta content='ID FB SOBAT' 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. kalau sudah kalian taruh silahkan kalian ganti kode yang berwarna merah dengan ID facebook nama sobat kalau sobat sudah menggantinya kalau belum silahkan masukkan nomor ID facebook dibelakang Url facebook kira-kira kodenya seperti ini https://www.facebook.com/pages/RazzXP/102881289830130 nomor yang berwarna biru ini yang harus kalian taruh. kalau berupa nama ya namanya saja.
7. setelah kalain ganti ID Facebook kalian silahkan carai kode <div class='comments' id='comments'> kalau sudah ketemu silahkan taruh kode dibawah ini dibawahnya.
<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'>
sebelum kita melangkah lebih jauh silahkan simak dulu kode warna di atas. warna merah dan biru silahkan sesuaikan dengan tamplate sobat agar kelihatan rapi warna merah berapa tampilan komentar facebook yang harus kalian tampilkan  dan yang berwarna biru adalah lebar dari papan komentar silahkan sesuaikan sendiri.
dan yang bawah sendiri yang berwarna merah silahkan cari dulu kalau ada 2 kode seperti diatas silahkan hapus salah satunya yang kira-kira seperti ini.
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> yang bawah ini harus sobat hapus. ok sob...kita lanjut ya....
8. karena ada beberapa kasus di tamplate blogger ada 2 kode <div class='comments' id='comments'> silahkan taruh kode yang nomor 7 dibawah saja, yang kira kira seperti ini.
<div class='comments' id='comments'> ini kode yang pertama
<div class='comments' id='comments'> ini kode yang kedua
silahkan taruh kode nomer 7 tepat dibawah kode yang ke 2 kalau tidak berfungsi baru sobat taruh kodenya dibawah kode nomer 1.
9. kalau sudah sama persis dengan apa yang aku jelas silahkan kalian Save dan lihat hasilnya. tutorial Cara Membuat Tab Komentar Facebook dan Blogger ini sudah aku praktekkan di beberapa tempat jadi kalau sobat suda benar apa yang saya jelaskan tentu sudah ada perubahan dalam tamplate sobat. nah begitu saja Cara Membuat Tab Komentar Facebook dan Blogger semoga artikel ini bisa menjadi motivasi sobat untuk bersemangat menjadi seorang blogger. silahkan sobat baca juga cara membuat Sitemap atau daftar isi. happy blogging sob...semoga berhasil

0 komentar:

Posting Komentar