Tutorial Membuat Komentar Facebook dan Blogger Berdampingan Pada Blog

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template:

Login ke account blogger Sobat

1. Klik rancangan lalu klik Edit HTML
2. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
3. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
4. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
5. Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

Klik buka untuk melihat kode:

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

Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.

6. Kemudian Sobat cari kode </head>
   Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>

Klik buka untuk melihat kode:

    <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 Sobat 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>

Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890

7. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.

Klik buka untuk melihat kode:

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

NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.

Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.

Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.

8. Kemudian klik save, dan lihat hasilnya.

Baca Juga Artikel Menarik Lainnya :

seo

• Cara Meningkatkan Pagerank Blog/Website Terbaru 2016
• Cara Mendaftar dan Memasang Widget Histats di Blog 2016
• Cara Pasang Iklan Terbaru Ditengah Artikel Postingan
• Cara Mudah Membuat Kotak Komentar Facebook di Blog 2016
• CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG
• Membuat Tombol Kembali ke Atas (Back to Top) pada Blog
• Cara membuat tombol show hide di blog
• Membuat Kotak Komentar Facebook di Blogger
• Tutorial Membuat Label Berputar-putar Di Blog
• Cara Menggunakan Paypal
• Cara Membuat Paypal Gratis
• Mendapatkan Backlink BerPageRank dengan SEO Quake
• Cara Mengetahui Blog/Website Dofollow Atau Nofollow
• Cara Membuat YM Chat di Blog
• Memasang Widget Autoping pada Blogger
• Cara Membuat dan Memasang Widget Seo Monitor Di Blog
• 3 Situs Sosial Terpopuler di Indonesia
• Membuat Artikel Terbaru Bergerak Pada Blog/ Recent Post
• Cara Mendaftar Sharebeast
• Memperbanyak Pengunjung Blog dengan Easyhit4u.com
• Membuat Emoticon Monyet di Komentar Blog
• Cara Membuat Akun Mediafire secara Gratis
• Mengganti Beranda dengan Gambar beserta Posting Lama dan Posting Baru
• Memasang Tombol Like Facebook Mengikuti Kursor