Update Terbaru
Loading...
Home » , » Cara II Membuat Komentar Facebook di Blog di Setiap Bawah Posting
Published On : Sabtu, 01 September 2012
05.48.00 | Admin | No Comments

Cara II Membuat Komentar Facebook di Blog di Setiap Bawah Posting


Memasang Komentar Facebook di Setiap Postingan

Jika baru saja kita ngbahas Membuat Widget Diskusi berupa Komentar Facebook di Blog,kini kita penuhi janji buat ngpost Cara II Membuat Komentar Facebook di Setiap Bagian Bawah Posting Blog.

Berhubung waktu yang semakin sore,kita langsung aja ya.
Dan widget ini tidak seperti widget yang kami share di 'Membuat Widget Diskusi berupa Komentar Facebook di Blog' postingan yang lalu.

Setiap posting akan dapat memiliki komentar yang berbeda,sesuai dengan komentar yang akan diterbitkan,beda dengan widget yang kita bahas sebelum ini yang mana widget komentar facebook yang lalu akan memiliki komentar yang sama meski dalam posting yang berbeda.

Langkah dan Cara Memasang Kotak Komentar Facebook di Setiap Posting Blogger


1.Masuk ke akun blogger sobat lalu pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)

membuatkomentarfacebookdiblog.
(1)


facebook komentar box bogger.
(2)


memasang komentar blogger ala facebook.
(3)


2.Setelah itu cari kode:

<div class='comments' id='comments'>

untuk mempermudah pencarian tekan Ctlr + F pada keyboard kemudian sobat letakkan kode berikut tepat diBAWAHnya:
<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='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='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3.Cari kode /* Comment atau #comments dan letakkan barisan kode css berikut ini tepat dibawahnya:
.comments-page { background-color: #f2f2f2;}
.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;}
}


4.Cari lagi kode </head> dan letakkan kode script berikut tepat diATASnya:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='cahdonorejo' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>


5.Simpan dan selesai :D

Ket:
Untuk cahdonorejo ganti dengan id facebook sobat,bisa angka maupun nama.Cahdonorejo ini saya ambil dari nama id dari akun facebook seperti gambar berikut:


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top