Pages

Thursday, 25 October 2012

Pasang Kotak Komentar Facebook Dan Blogger Berdampingan™

Sobat kali ini saya akan memposting trik membuat 2 kotak komentar sekaligus yaitu kotak komentar Facebook dan Blogger menjadi berdampingan...cielah berdampingan,,kayak pasangan yg lagi nikah donk jadinya ...hehehe berikut Screenshotnya :


Dan berikut trik cara pasangnya :

1. Sobat login ke akun blogger sobat dulu.
2. Pilih Rancangan,klik Tata letak.
3. Kemudian Pilih Edit Html
4. Lalu sobat cari kode  <div class='comments' id='comments'>,cara mempercepat pencarian dengan cara tekan CTRL+F Atau dengan cara tekan tombol F3
5. Setelah ketemu paste kode dibawah ini tepat dibawah kode
 <div class='comments' id='comments'>
========================BERIKUT KODENYA======================== 
 <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='http://picturestack.com/782/578/wAVakauttaCJP.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='http://picturestack.com/782/260/56xakauttaZrS.png'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-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='430'/>
</b:if>
</div>
<div class='comments comakauttafb-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='ISI DENGAN ID FB SOBAT' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comakauttafb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab {border:1px solid #666;box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 7px #e6f8fd;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 7px #e6f8fd;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 7px #e6f8fd;}.comakauttafb-page {background:rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:rgba(255,255,255,.6);-o-transition:.5s ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>
========================FINISH======================== 
Note : * Ganti tulisan warna merah dengan ID FB sobat....
           * Jika ditemplate sobat terdapat 2 buah kode ini  <div class='comments' id='comments'> , silakan sobat pastekan pada kode yg kedua.!!
6. Sobat Save template sobat...

No comments:

Post a Comment