Cara Menambahkan Komentar Dari Facebook Berdampingan Dengan Komentar Bawaan Blogger

TrikRahasiaGoogle.Blogspot.com, Banyak sekali postingan blog lain yang telah menyediakan tutorial blogging yang sama, dengan gaya bahasanya masing-masing. Membuat atau menambahkan Komentar Facebook Dan Blogger yang berdampingan berada dibawah postingan, bukan berarti hanya memberikan fasilitas berkomentar terhadap suatu posting oleh penulis blog melalui identitas akun Facebook dan Blogger saja.

Untuk komentar Facebook disediakan pilihan komentar akun, jika Anda punya halaman/fanspage, Anda bisa menggunakan akun fanspage untuk berkomentar. Untuk komentar Blogger, disediakan pula pilihan berkomentar melalui akun lainnya, yaitu Wordpress, Open ID, Typepad, dan lainnya. Keunggulan lain yang dimiliki Facebook dan Blogger comment adalah tampilannya yang lebih menarik.

Berikut ini cara membuat komentar Facebook dan Blogger secara berdampingan:

• masuk ke dashboard blogger
• pilih template
• edit HTML
• centang expand template widget
• pada keyboard tekan Ctrl+F, cari: ]]></b:skin>
• kemudian masukkan kode berikut diatasnya:

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

kode dengan warna biru adalah background komentarnya, silahkan diganti atau biarkan tetap seperti itu

• pada kode </head>, masukkan kode berikut ini diatasnya:

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

• Kemudian cari kode <div class='comments' id='comments'>, lalu masukkan kode berikut dibawahnya:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments 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'>

 

 

• Pada umumnya terdapat dua kode <div class='comments' id='comments'>, masukkan kode diatas tadi dibawah kedua kode tersebut
• Kode Comments with Facebook dan Comments from Blogger  adalah judul boxnya, dapat kamu ganti sesuai dengan keinginan
• 5 adalah jumlah post komentar yang ditayangkan, silahkan diganti sesuai dengan keinginan
• 400 adalah lebar dari Facebook and Blogger Comment box, bisa kamu ganti sesuai keinginan
• Untuk kode <div class='comments comments-page' id='blogger-comments-page'> dapat kamu hapus apabila terdapat kode yang sama dibawahnya
• Terakhir silahkan simpan template dan lihat hasilnya

Itulah cara menambahkan komentar FB dan bawaan Blogger agar tampak berdampingan dibawah posting, sehingga pengunjung akan semakin tertarik untuk memberikan komentarnya, Semoga info ini bermanfaat.

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Menambahkan Komentar Dari Facebook Berdampingan Dengan Komentar Bawaan Blogger. Anda bisa bookmark halaman ini dengan URL http://trikrahasiagoogle.blogspot.com/2013/03/buat-kotak-komentar-facebook-dan-blogger.html. Terima kasih!

Ditulis oleh: Rakatalenta - Minggu, 31 Maret 2013