Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab


Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab

Modifikasi template blogger agar terlihat menarik memang tidak ada habisnya adrenalin kita selalu terpicu untuk terus kreatif. Padahal terkadang sebenarnya blog kita sudah terlihat menarik menurut orang lain. Namun bagi blogger aktif seperti saya yang suka blogwalking ke blog lain terkadang melihat design blog orang lain lebih OK! terkadang kita menemukan beberapa blog yang memiliki kolom komentar facebook yang terpasang pada blog.

Dan kali ini saya akan membuat TUTORIAL tentang pembuatan kolom komentar facebook yang kita pasang pada blog dengan model TAB. Komentar facebook ini bertujuan untuk mempercantik tampilan blog & mengajak visitor untuk aktif dengan cara berkomentar.

Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab

Berikut Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab

Ikuti langkah-langkah yang akan saya tunjukan.
  • Login pada akun blogger anda dengan email dan password anda.
  • Pada dashboard blog anda pilih TEMA > Edit HTML
  • Anda temukan kode berikut : <div class='comments' id='comments'> 
  • Jika sudah ketemu silahkan sobat copas kode dibawah ini tepat dibawah kode <div class='comments' id='comments'>
<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='550'/></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='IDFANPAGEFACEBOOK' 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>
  • Kemudian save
  • Lihat hasilnya
Catatan:
  • Ganti/replace tulisan yang berwarna biru dengan Kode / No / Id Fan Page Facebook sobat.
  • Cara mendapatkan ID FANPAGE FACEBOOK adalah: Masuk pada Halaman Facebook sobat, kemudian masuk lagi ke Pengaturan, Lihat Info Halaman, kemudian arahkan kursor ke bawah sekali maka akan dijumpai ID Halaman Facebook : 10026565009xxxx
  • Jika sobat tidak memiliki halaman facebook sobat bisa abaikan saja tulisan yang berwarna biru tersebut apa adanya.
  • Untuk menyesuaikan panjang blog anda silahkan ganti angka yang berwarna orange diatas. (width='550') dengan ukuran yang sobat inginkan.
  • Jika kode <div class='comments' id='comments'> ada 2 jumlahnya sobat bisa pilih salah satu saja.
Saya rasa tutorial yang saya sampaikan sangat mudah sekali tentang Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab harusnya jika sobat mengikuti langkah-langkah yang saya sampaikan diatas dengan benar maka kini kolom komentar dengan model TAB berhasil dipasang pada blog sobat. silahkan di coba.
** Sobat Barusan Telah Membaca Postingan Tentang Cara Mudah Menambahkan Kolom Komentar Facebook di Blog Model Tab Semoga Bermanfaat Dan Silahkan baca postingan kami yang lain, Terima Kasih.