Cara Memasang Komentar Facebook dan Blogger Berdampingan

Memasang Komentar Facebook dan Blogger Berdampingan. Perlu diketahui, memasang kolom komentar facebook maka dapat mempermudah pengunjung untuk memberikan komentar. Karena Tidak semua pengunjung blog tidak memiliki akun google.

Untuk mempermudah pengunjung berkomentar di blog perlu di fasilitasi kolom komentar facebook, karena pengguna facebook hampir sudah merata di seluruh dunia.

Tapi untuk sobat yang ingin membuat blognya ada kolom komentar facebook dan blogger berdampingan mahesa.id akan memberikan tutorialnya.

Cara Memasang Komentar Facebook dan Blogger Berdampingan

1. Masuk ke Dasboard Blog > pilih Template > Copy kode dibawah ini sebelum  kode ]]></b:skin>. untuk mempermudah gunakan CTRL+F
 /* Komentar Facebook dan Blogger */
.komentargabungan-page,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10}
.komentargabungan-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px}
#blogger-comments-page h4{display:none}
#blogger-comments-page p{color:#444;}
#blogger-comments-page {padding:0px 5px;display:none;}
.komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;}
.komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.komentargabungan-tab:hover:nth-child(2) {background:#e1954a;}
.komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px}
.komentargabungan-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.komentargabungan-tab:hover {background-color:#324c82;} 
2. Copy kode dibawah ini dan letakkan sebelum kode </body>
 <script type="text/javascript">
//<![CDATA[
$(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()});
//]]>
</script> 
3. Didalam template biasanya terdapat dua kode <div class='comments' id='comments'>. Copy kode dibawah ini dan letakkan dibawah kedua kode <div class='comments' id='comments'>
 <div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook</div>
<div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<data:post.numComments/> Komentar Blogger</div>
<div class='clear'/>
</div>
<div class='komentargabungan-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if></div>
<div class='comments komentargabungan-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script> 
4.Simpan Template dan lihat hasilnya.

Kurang lebihnya begitu tutorial Cara Memasang Komentar Facebook dan Blogger Berdampingan. semoga bermanfaat dan salam (www.mahesa.id)

Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser