Cara Membuat Komentar Blog Dan Facebook Berdampingan

Berbicara tentang kotak komentar, khususnya para blogger sudah tak asing lagi. Nah kadang biasanya seorang blogger melakukan blogwalking akan menjumpai kotak komentar yang bermacam-macam modelnya, bahkan kadang ada kotak komentar facebook

berdampingan dengan kotak komentar default blog itu. 

Melalui riset dan penelitian serta diolah dari berbagai ilmuwan (busyet) ternyata merubah kotak komentar berdampingan dengan kotak komentar facebook cukuplah mudah, asal kita mengikuti langkah-langkah yang diberikan oleh guru kita... :P. 

Berikut ini akan saya bagikan ulang ilmu dari mbah Dhody Jellegh si cakep nan menawan Cara Membuat Komentar Blog dan Facebook Berdampingan..  

Nih contohnya di bawah dari blog suhuku :P

• Pertama login ke akun blog milik sobat
• Kemudian masuk ke bagian template edit template
• Untuk jaga-jaga jika terjadi kesalahan,sobat backup dulu template sobat,biar aman
• Berikutnya sobat cari kode ]]></b:skin> dengan menggunakan ctrl+f pada keyboard

Jika sudah ketemu, letakan kode di bawah ini di atas kode ]]></b:skin>

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

Note : Silahkan Hapus kode yang berwarna Merah jika ingin membuat kotak Komentar Facebook menjadi Transparan.

Langkah selanjutnya cari kode </head>

 
Kemudian letakan Kode di bawah ini tepat di Atas kode </head>

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

Note; Silahkan Ganti Kode berwarna Merah dengan ID Fans Page Sobat.

Langkah selanjutnya,yaitu;

• Silahkan cari kode <div class='comments' id='comments'> 
• Umumnya code tersebut terdapat 2 code, letakkan Code dibawah tepat dibawah 2 code tersebut <div class='comments' id='comments'>

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

Silahkan anda Hapus kode berwarna merah tersebut jika kode di bawah sama, jika tidak, tidak usah. Untuk yang nomor 10 adalah Jumlah komentar yang akan muncul. Untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sesuai keinginan sendiri..

Gunakan pratinjau terlebih dahulu, jika sudah berhasil dan tidak ada kerusakan, Save dan semoga berhasil.