Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Salam Blogger, Melengkapi permintaan salah satu sahabat Zuaz'Z Creator yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO

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


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



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


8. 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'>.



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.


9. Kemudian klik save, dan lihat hasilnya.

Demikianlah  Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template,,

Selamat mencoba ya Sobat dan jangan lupa nih Komentarnya, hehehe,,,  bila ada kata-kata yang salah saya mohon maaf,,

Sumber: http://super-bee.blogspot.com

[+/-] Selengkapnya...

[+/-] Ringkasan...

Kata Mutiara

Kita tidak akan pernah tahu, sebelum kita melakukannya. Ingatlah satu hal, usaha yang kita lakukan akan sebanding dengan hasilnya.

Jangan cuma berandai-andai atau membayangkan sesuatu, lakukanlah, mungkin apa yang kamu lakukan itu akan berakhir bahagia.

Berusahalah sekuat yang kamu bisa, yakinlah, Tuhan tidak akan berdiam diri.

Jangan menyerah atas hal yg kamu anggap benar meskipun terlihat mustahil. Selama ada kemauan, Tuhan kan berikan jalan.

Bersyukur dan ikhlas menerima apa yang di berikan Tuhan kepada kita, Niscaya hikmahNya tidak akan berhenti mengalir.

Cinta sejati tak datang begitu saja. Banyak proses yg harus dilalui bersama, menderita, menangis, dan tertawa bersama.

Terkadang apa yang kita fikirkan tidak sejalan dengan apa yang kita lalukan.

Belajarlah jujur pada diri sendiri, lakukan apa kata hati, sehingga kamu tidak perlu lagi menyembunyikan apapun dalan hidupmu

Betapa indahnya jika setiap detik yang kita habiskan, menjadi berarti bagi orang lain dan diri sendiri.

Jangan takut mencoba, kesalahan adalah guru terbaik jika kamu jujur mengakuinya dan mau belajar darinya.

Hidup penuh maaf adalah jalan bagi kelapangan dan kedamaian jiwa.

Tersenyumlah dalam mengawali hari, karena itu menandakan bahwa kamu siap menghadapi hari dengan penuh semangat!

Sesulit apapun masalah yang kita hadapi, ia harus diselesaikan, bukan dihindari.

Tegas akan diri sendiri, buang pikiran negatif dan lakukan yang baik. Kegelisahan hanya milik mereka yang putus asa.

Ketika kamu berharap yang terbaik tapi kamu hanya mendapat yg biasa, bersyukurlah kamu bukan yg terburuk.

Hal yang paling sulit adalah mengalahkan diri sendiri, Tapi itu bisa kamu mulai dengan memaafkan diri sendiri.

Sahabat adalah seseorang yg selalu membuat hatimu bahagia. Sahabat selalu membuat hidup jauh lebih menyenangkan.

Terkadang, yang diinginkan sebenarnya tidak dibutuhkan, sedangkan yang dibutuhkan tidak bisa dimiliki. Tapi Tuhan, tahu apa yang terbaik.

Maafkan diri sendiri. Jangan menyesali kesalahan. Maaf itu mengobati hati dan mendamaikan diri.

Jangan pernah iri dengan apa yg orang lain miliki, Setiap orang punya masalahnya sendiri, bersyukurlah untuk hidup ini.

Jangan membandingkan dirimu dengan orang lain. Iri hati hanya membuat jiwamu gelisah. Jadilah diri sendiri.

Setiap perbuatan yang membahagiakan sesama adalah suatu sikap yang mencerminkan pribadi yang mulia.

Sahabat bukan tentang siapa yg telah lama kamu kenal, tapi tentang siapa yg menghampiri hidupmu dan tak pernah meninggalkanmu.

Jangan pernah merasa dirimu tak cukup baik, karena bagi seseorang, kamu adalah yang terbaik.

Mungkin kamm tidak menyadarinya, tapi hal paling kecil yang kamu lakukan dapat membawa dampak sangat besar bagi orang lain.

Masalah tidak akan menjadi rumit jika kamu bisa menyikapinya dengan sabar dan dengan kelapangan hati.

Bangkitlah dari kesedihan, karena kesedihan adalah proses yang harus dilalui untuk menuju kebahagiaan.

Dari hal-hal baik, belajarlah untuk mengucap syukur. Dari hal-hal buruk, belajarlah untuk menjadi kuat.

Lihat Artikel Asli di http://www.bloginfonews.com/2011/09/kata-kata-mutiara-terbaru-2011.html#ixzz1ubUV3zA8

[+/-] Selengkapnya...

[+/-] Ringkasan...