Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

Cara Membuat Komentar Facebook Dan Blog Berdampingan, pada postingan kali ini saya share Mengenai kotak komentar blog dan facebook. kotak komentar ini berdampingan terdiri active tab dan inactive tab, active tab pada bagian kotak komentar facebook dan inactive tab pada kotak komentar blog tidak terbuka dua duannya, untuk demonya bisa lihat kotak komentar paling bawah postingan ini. dan inilah screenshotnya.

Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

Klik rancangan dan kemudian klik edit HTML, backup dulu template anda untuk jaga-jaga, centang expand widget dan cari kode ]]></b:skin> , untuk memudahkan pencarian tekan CTRL F dan ketikkan kode ]]></b:skin>, uda ketemu ? copas kode dibawah ini diatas kode ]]></b:skin>

Klik Show untuk melihat kode:

.comments-page { }
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { color:#FFF;text-shadow: 0 0 6px darkgrey;background-image: url(http://i1106.photobucket.com/albums/h367/Nando_DeltaCyber/star.gif); }
.inactive-select-tab {}

Selanjutnya cari kode </head> seperti cara diatas, kemudian copas kode dibawah ini diatas kode </head>

Klik Show untuk melihat kode:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<meta content='NAMA BLOG KAMU' property='og:site_name'/>
<meta content='203440326393405' property='fb:app_id'/>
<meta content='ID FB ANDA' property='fb:admins'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>

Sesuaikan kode yang berwarna biru diatas tuliskan nama web anda ( contoh : Ngudi Bego™ ) dan ID FB anda ( contoh : ahmad.ngudi ).
Lanjut yang terakhir cari kode yang mirip<div class='comments' id='comments'> dan copas kode dibawah ini tepat di bawah kode <div class='comments' id='comments'>, jika kode <div class='comments' id='comments'> ada dua letakkan pada kode <div class='comments' id='comments'> yang ke dua

Klik Show untuk melihat 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='https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico'/>
<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://i997.photobucket.com/albums/af96/fauzan_zifa/1.png'/> <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='580'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Kode yang berwarna diatas 2 jumlah komentar FB yang akan ditampilkan, 580 adalah ukuran dari kotak komentar, sesuaikan dengan blog anda. dan simpan template anda.
semoga berhasil..... jangan lupa komentarnya ya...

Posted in: Blogger

Baca Juga Artikel Terkait Dibawah Ini: