Home » , » Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Written By Justang Zealotous on Rabu, 08 Agustus 2012 | 02.31

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan
Tutorial yang satu ini, pasti sudah tidak asing lagi bagi para blogger sekalian. Hal semacam ini sudah banyak yang nangkring di beberapa blog. Tapi, apa salahnya berbagi informasi dengan para sobat sekalian. Kalau hanya untuk kotak komentar facebook juga sudah pernah saya bahas pada artikel sebelumnya.

Nah, kali ini kita akan membahas yang berdampingan, sekedar contoh Anda bisa lihat gambar di bawah ini, yang saya ambil dari blog baru saya DISINI.

Komentar Facebook dan Blog Berdampingan


Jelas kan?? Biar kalian tahu, tutorial macam ini sudah banyak di google, tapi rata-rata dari tutorial mereka tidak berhasil dari beberapa template yang biasa dan mungkin hanya pada template premium. Oleh sebab itu, disini saya akan mengulas sedikit Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan yang semoga berhasil pada template blog kalian. Aminn..

1. Masuk ke akun blogger sobat
2. Selanjutnya masuk pada bagian Template
3. Klik Edit HTML
4. Silahkan centang Expand Template Widget
5. Sudah itu, Anda cari kode ]]></b:skin>, untuk memudahkan pencarian, silahkan tekan ctrl+f.
6. Setelah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode tadi

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

catatan:
Silahkan hapus kode berwarna merah itu, jika Anda ingin membuat kotak komentar facebook menjadi transparan.

7. Kemudian Anda cari kode </head> , seperti tadi untuk lebih memudahkan pencarian tekan ctrl+f
8. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </head> tadi

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='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>

catatan:
Silahkan Anda ganti tulisan berwarna merah tersebut dengan ID FB Anda. Sudah tahu kan, apa itu ID FB? Jika Anda sudah ganti, misalnya http://facebook.com/justangzealotous berarti ID FB kamu justangzealotous. Namun, jika Anda belum menggantinya, maka ID FB Anda adalah sebuah angka-angka, contoh http://facebook.com/1234567890. Untuk melihat ID FB, Anda bisa masuk ke profil FB kamu, kemudian silahkan lihat pada adress bar.

9. Selanjutnya, silahkan Anda cari kode <div class='comments' id='comments'>
10. Umumnya, kode <div class='comments' id='comments'>, terdapat 2. Silahkan Anda letakkan kode berikut tepat di bawah kedua kode tersebut.

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

catatan:
Silahkan Anda, hapus kode berwarna merah tersebut, jika kode di bawah sama. Kalau tidak, yah tidak perlu dihapus. Perhatikan, untuk yang nomor 3 adalah jumlah komentar yang akan muncul di kotak komentar facebook, untuk yang nomor 400 adalah lebar kotak komentar. Silahkan ganti sesuai dengan keinginan Anda.

11. Setelah itu, klik Simpan Template

Selesai, juga deh kotak komentar facebook dan blog yang berdampingan. Selamat mencoba.
Sumber: http://super-bee.blogspot.com
Share this article :
Comments
21 Comments

21 komentar:

Jingga mengatakan... [Reply]

Mantap tisnya,ijin praktek gan.
Makasih.

Muse-ik4u mengatakan... [Reply]

wah ko gagal ya sob?

Belajar Internet mengatakan... [Reply]

@muse-ik4u : Wahh,, mungkin ada kesalahan pas pemasangan kodenya, coba perhatikan petunjuk no.10 kan terdapat dua, kalau gagal karena di hapus, coba jangan di hapus, karena waktu saya praktekkan pada blog saya yang lain => http://kiangkiut.blogspot.com masalahnya hanya pada hal tersebut.

Vickry Husain mengatakan... [Reply]

Punya saya ga ada om kedua-dua kode ini :
div class='comments' id='...
div class='comments' id=';;;;

gimna ada cara lain om??

Belajar Internet mengatakan... [Reply]

@Vickry Husain : Wah..blog nya apa bro? nanti coba saya kunjungi dan lihat

Abu Bakar Barus mengatakan... [Reply]

Berhasil Sob...!!

Tapi kok ada yang komentar di facebook
ga ada pemberitahuann.,.. ?

mohon pencerahan nya sob

Anonim mengatakan... [Reply]

We are a group of volunteers and opening a brand new scheme in our community.
Your site offered us with valuable info to work on. You've done an impressive process and our entire group might be thankful to you.
Also visit my weblog ... How To Naturally Regrow Lost Hair Reviews

Brian Canz mengatakan... [Reply]

:D nice posts

Sugeng RD mengatakan... [Reply]

thanks gan, :)

Sugeng RD mengatakan... [Reply]

thanks gan, :)

Muh. Akram mengatakan... [Reply]

ok sob :)

Yanuar Aji Saputro mengatakan... [Reply]

tanks bgt gan infonya,
B-)

Tutorial Blogz mengatakan... [Reply]

Sekedar Mampir ke Blog ini,
Blognya keren gan..

#Salam dari saya, Admin Tutorial Blogz

Dotnex mengatakan... [Reply]

Makasih gan work tp.. ada kendala di saya nie, pass kalo di komentarin pake akun blogger/google selesai itu kommen fbnya menghilang ntah kemana. Ada solusi buat ngatasinya ga gan..?

Majalah Siantar mengatakan... [Reply]

thanks ya

Obat Kolesterol mengatakan... [Reply]

postingan tentang cara membuat kotak komentar... Sangat menarik untuk dibaca, Saya suka mengunjungi blog ini.

Kang Ridhwan mengatakan... [Reply]

Bermanfaat sekali sob.. :))

AdmiralPratama mengatakan... [Reply]

nice post

Eki Yudhistira mengatakan... [Reply]

kunjungan malam gan, Folow/Join This Site back yaa... http://www.idwebcostumer.com/

Abu Wijaya mengatakan... [Reply]

Wah keren nih, sangat membantu sekali. Thanks yah !

Tofik Hidayat mengatakan... [Reply]

di blog saya
div class='comments' id='comments
cuma ada 1. sudah diutak-atik tetep aja ga bisa.
mohon pencerahannya di kyubhil.blogspot.com

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!
Pasang Yahoo Emoticon Anda

Poskan Komentar

Jika ada yang kurang paham mengenai artikel ini, silahkan kirim komentar dan harus relevan dengan isi artikel di atas.INGAT jangan memberikan komentar dengan bumbu SPAM,P*RNO,PROMO,LINK !!! Terima Kasih dan jangan lupa follow blog ini nanti saya akan follback promise

 
Back To Top : Klik untuk Kembali ke Halaman Atas ↑↑↑
Copyright © 2011. Belajar Internet - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Free Coupons