Mungkin udah banyak yang tau dan buat tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Tapi belom semua tau cara paling mudah dan gak berbelit-belit seperti yang akan saya ulas dibawah ini. Cara ini mudah, cepat gak usah berbelit - belit kayak kode ini di letakkan di bawah ini kode ke dua di bawah ini, begitulah seterusnya.
Untuk Screenshot Tampilannya Seperti Gambar Dibawah Ini :
Kalau diri saya pribadi sih, cara yang kayak itu cuma buat2 rumit aja, untunglah kalau berhasil, kau tidak ya bakal hapus yang ini hapus yang kode itu.. disini mari kita bicarakan cara yang paling simple dan mudah.
- Login dulu ke akun blog sobat, ( kalau gak login dulu gimana mau editnya ya gak heheheh )
- Pilih TEMPLATE dan kemudian klik EDIT HTML
- Setelah terbuka kode HTMLnya klik didalam kotak kode tsb
- Cari kode <div class='comments' id='comments'> pakai CTRL + F kemudian copas kode dibawah ini, letakkan tepat dibawah kode <div class='comments' id='comments'> tadi.
Jika bingung dengan cara mengedit kode HTML blog tampilan baru ini silahkan dapatkan panduannya DISINI
- Ket : Jika kode <div class='comments' id='comments'> ada 2, pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> yang ke-2.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://i1058.photobucket.com/albums/t405/R474_MUDA/FacebookBadry.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://i1058.photobucket.com/albums/t405/R474_MUDA/BlogersBadry.png'/> <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'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukkan ID Fb anda disini' 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>
<style>.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;}</style>
5. Ganti tulisan warna merah (Masukkan ID Fb anda disini) dengan ID facebook anda. Karna ID fb sudah diganti menjadi username, untuk mengetahui ID anda silahkan masuk/login ke Facebook sobat dan lihat profil dan lihat pada address bar contohnya seperti ini https://www.facebook.com/badry.cs maka usernamenya adalah yang saya tandai dengan warna merah yaitu badry.cs
6. Setelah diganti Simpan Template anda dan lihat hasilnya.
Selesai deh, gampang kan? gak rumit dan gak banyak kode di sana sini... Nah cukup sekian dulu untuk Cara Mudan Dan Cepat Membuat Komentar Facebook dan blog Berdampingan, semoga bermanfaat. Wassalam...
Mantap gan tutorialnya,, mudah dan gak rumit cara pasang kodenya
ReplyDeletesemoga terbantu ya gan...
Deletemakasih mas bro buat sharenya.. menarik sekali artikelnya
ReplyDeleteagen tiket online
jasa iklan massal
oke sama2 mas bro
Delete