» » Cara membuat komentar facebook bersebelahan dengan komentar blogger

Cara membuat komentar facebook bersebelahan dengan komentar blogger

Cara membuat komentar facebook bersebelahan dengan komentar blogger


Hai sobat blogger ! lama gak update posting nih, habis try out terakhir di bulan ini, kali ini saya akan sedikit share  tentang tutorial blog cara membuat komentar facebook bersebelahan dengan komentar blogger , maksudnya ada dua tab yang akan ditampilkan , sebelah kiri komentar facebook dan sebelah kanan komentar dari blogger. jika kita mengeklik komentar blogger, maka yang tampil adalah komentar-komentar dengan dasar blogger. okelah daripada bikin bingung, mendingan kita langsung praktekin aja ya sob.kita bahas bersama disini

UPDATE Code ! Fix for Bugs and Error ( 15 Maret 2013 )

1.) Baca basmallah
2.) Masuk ke akun Blogger sobat,
3.) Masuk ke Template > Edit Html > Lanjutkan
4.) Backup dulu template sobat, klik download template lengkap
5.) Centang tanda expand widget template
6.) Lalu cari kode <div class='comments' id='comments'>
7.) Kemudian letakkan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> atau  <div class='comments'> atau  <div id='comments'> , jika menemukan 2, taruh di bawah kode yang kedua

Kode
<div class='commblogfb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='commblogfb-tab-icon' src='http://picturestack.com/782/578/wAVakauttaCJP.png'/>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook
</div>
<div class='commblogfb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='commblogfb-tab-icon' src='http://picturestack.com/782/260/56xakauttaZrS.png'/> <data:post.numComments/> Komentar Blogger
</div><div class='clear'/>
</div>
<div class='commblogfb-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='600px'/>
</b:if>
</div>
<div class='comments commblogfb-page' id='blogger-comments-page'>

<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 / FANSPAGE KAMU' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.commblogfb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script><style type='text/css'>.commblogfb-page, .commblogfb-tab {color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover {background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab, .commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient(#6b89d8,#3b5998)}</style>
12.) Ganti tulisan berwarna hijau dengan Id facebook sobat,
Tips
caranya buka profil facebook sobat lalu lihat kode angka atau nama setelah http://facebook.com/. misalnya http://facebook.com/rizaldiuchiha atau http://facebook.com/profile.php?id=100001413516012. yang saya beri warna hijau itulah id facebook, silahkan sobat ganti dengan id facebook sobat masing-masing
13.) Simpan Template dan lihat hasilnya

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Contact Us

Nama

Email *

Pesan *

Back To Top