Cara Membuat Kotak Komentar Facebook dengan Blogger Berdampingan/Sejajar | blog91919
Diberdayakan oleh Blogger.

Translate This Blog

Home » » Cara Membuat Kotak Komentar Facebook dengan Blogger Berdampingan/Sejajar

Cara Membuat Kotak Komentar Facebook dengan Blogger Berdampingan/Sejajar

Diposting oleh | |
Cara Membuat Komentar Facebook dan blogger Berdampingan/Sejajar

  • Login ke account blogger Anda
  • Lalu Klik rancangan lalu klik Edit HTML
  • Download template Anda terlebih dahulu untuk berjaga-jaga jika nanti terjadi kesalahan
  • Beri centang atau checklist pada kotak kecil yang bertuliskan Expand Template Widget
  • Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl+f untuk mempermudah pencarian)
  • Kalau sudah ketemu maka masukkan kode berikut 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;}


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.









  • Kemudian Anda cari kode </head>
    Jika sudah ketemu, masukkan kode berikut ini tepat diatas 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 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>


      Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890
    • 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'>.
    <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 Anda 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. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda 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.
    • Kemudian klik save, dan lihat hasilnya.

    Ditulis Oleh : bayu naxtegal

    Artikel Cara Membuat Kotak Komentar Facebook dengan Blogger Berdampingan/Sejajar ini diposting oleh bayu naxtegal pada hari Minggu, 27 Januari 2013. Terimakasih atas kunjungan kalian semua serta kesediaan Anda membaca artikel ini, Kritik dan saran dapat Anda sampaikan melalui kotak komentar . Terimakasih Anda sudah mau membaca

    Share this article :
    Komentar dari Facebook
    9 Komentar dari Blogger

    9 komentar:

    1. wah udah saya pasang sob thanks dah share folow 4 sukses di folbackya

      BalasHapus
    2. makasih infonya sob ^_^

      sangat bermanfaat bangeettt :D

      Follow+coment back http://trikfacebook28.blogspot.com/

      BalasHapus
    3. wah udah saya pasang sob thanks dah share folow 4 sukses di folbackya

      BalasHapus
    4. berhasil.. sempat gak rapi masangnya kalo dari ]]>. aku make yg #comments dan ternyata rapi kayak admin.. :-) Thanks infonya..

      Sangant membantu (Y)

      BalasHapus
    5. Wah agak ribet juga ya kang :(

      BalasHapus
    6. wes mantaaap gan tutorial keren
      oya terimakasih sudah berkunjung ke blog saya http://kutufamily.blogspot.com/ sebelumnya

      BalasHapus

    :a: :b: :c: :d: :e: :f:
    :g: :h: :i: :j:


    Emotion lainnya?

     
    Support : Creating Website | Johny Template | Mas Template
    Copyright © 2011. blog91919 - All Rights Reserved
    Template Modify by Creating Website
    Proudly powered by Blogger