Membuat Komentar Facebook dan Blogger Berdampingan

Banyak sekali postingan blog lain telah menyediakan tutorial blogging yang sama, dengan gaya bahasanya sendiri. Membuat/menyediakan Komentar Facebook Dan blogger yang berdampingan bukan berarti hanya memberikan fasilitas berkomentar terhadap sebuah/suatu posting oleh penulis blog melalui identitas akun Facebook dan Blogger saja.

Untuk komentar Facebook disediakan pilihan komentar akun, jika kamu punya halaman/fanspage, kamu 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 cara membuat komentar Facebook dan Blogger 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: #201F1F;}
    #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='5' 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
• sebenarnya masih banyak kode yang bisa diubah, jika kamu mau mencoba merubahnya silahkan, tapi saran saya jika mau merubah kode-kode yang lain lakukan pada blog untuk uji coba supaya terhindar dari musibah template error
• kemudian simpan templatenya

Share this post