Cara Membuat Kotak Komentar Facebook di Blogger sejajar

Selamat malam sahabat blog , malam dini hari ada pertandingan bola Liga Inggris, antara MU vs Reading, untuk menemani pas waktu setengah main, saya membuat tips Cara Membuat Kotak Komentar Facebook di Blogger sejajar
Cara Membuat Comment Box Facebook di Blogger,bersebelahan dengan komentar blog di bawahnya. Membuat komentar dengan tampilan yang menarik, akan memancing pengunjung untuk berkomentar di blog Anda. Hal ini sudah tidak menjadi hal yang baru, dan telah banyak yang memakai dengan aplikasi plugin tambahan Facebook ini. Mengapa banyak orang yang ingin membuat kotak komentar facebook di blognya? Salah satu faktor utama adalah untuk meningkatkan traffik pengunjung bagi blog mereka.

Facebook memang sebagai Social Media sedangkan Blogger adalah Pembangun Blog dengan platform gratis. Hubungan pembuatan komentar Facebook di Blogger, bukan untuk media promosi di social media melainkan menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan facebook. Untuk cara pembuatan kotak komentar facebook ini cukup mudah dan 100% berhasil. Agar blog Anda lebih terkonektivitas dengan facebook, langkah pertama adalah dengan membuat aplikasi di facebook terlebih dahulu. Tetapi, bagi Anda yang hanya ingin mengarahkan kotak komentar sebagai Anda yang menjadi adminnya tidak perlu membuat aplikasi facebook ini.

Cara Membuat Aplikasi di Facebook :

• Login ke Facebook sahabat.
• Silahkan klik link Pembuatan Aplikasi Facebook ini.
• Klik "Create New App"
• Masukkan Nama Aplikasi anda di "App Display Name" , seperti gambar diatas.
• Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".
• Masukkan kode yang tertera, apabila kode benar maka akan muncul tampilan berikut ini

Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu. Lalu Simpan. Catat nomor Aplikasi ID Anda, seperti yang ditunjukkan di gambar Facebook tersebut. Sampai disini anda telah selesai membuat plugin aplikasi facebook. Sekarang lanjut ke tahap pembuatan komentar facebook di blog.

Cara Membuat Kotak Komentar Facebook di Blog :

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML

2. Jangan lupa centang tulisan EXPAND TEMPLATE WIDGET

3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F 

4. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

.comments-page { background-color: #00BFFF;} #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;}

Warna bisa di edit sendiri sob,sesuai dengan selera sahabat blog.

 5. Setelah itu cari lagi kode </head> kemudian letakkan kembali 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 FB ADA AKU' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script>

Ganti tulisan ID FB ADA AKU, dengan ID FB sahabat blog.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>  .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <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='5' width='500'/>    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by <b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b></div>    </b:if>    </div>    <div class='comments comments-page' id='blogger-comments-page'>

7. Simpan selamat sudah jadi.

NB: TOMBOL KOMEN FB TIDAK BERFUNGSI, SAYA TAHU CARANYA, CARANYA DI BAWAH INI.

 1. Tekan CTRL dan F untuk mencari kode
2. cari kode berikut ]]></b:skin> 
3. Lalu letakan kode berikut ini dibawah kode ]]></b:skin>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>    <script>(function(d, s, id) {      var js, fjs = d.getElementsByTagName(s)[0];      if (d.getElementById(id)) {return;}      js = d.createElement(s); js.id = id;      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;      fjs.parentNode.insertBefore(js, fjs);    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

SELAMAT BERKREASI SAHABAT BLOG