Cara memasang FB Comment dan Blogger Comment Berdampingan

 

Hello, Kodelicious.
Disini aku ingin membahas 'Cara membuat FB Comment dan Blogger Comment Berdampingan'. OK. Langsung saja.
CSS ini cocok untuk template yang gelap-gelap. Tapi juga untuk template yang terang. Tinggal edit CSS-nya.

Pertama-tama Masuk ke Blogger --> Template --> Edit HTML

Bagi yang sudah pernah pasang :
1. Cari kode berikut :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments For 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'/> Facebook 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://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger Comments</div>

2. Ganti kode yang berwarna merah dengan kode ini :

onmouseover

Bagi yang belum pernah pasang :
1. Cari kode berikut :

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

Notes : jika ada 2 kode, pilih yang kedua

2. Taruh kode berikut di bawah kode tersebut :

<div id='com-campur'>
<div class='comments-tab' id='fb-comments' onmouseover='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments For 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'/> Facebook Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onmouseover='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger Comments
</div></div><div class='clear'/>
</div><br/>
<div class='comments-page' id='fb-comments-page'><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments colorscheme='dark' expr:href='data:post.url' num_posts='2' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3. Kemudian letakkan kode berikut ini di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<meta content='willy.a.knight' 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>

4. Langkah terakhir, taruh kode berikut di atas kode ]]></b:skin>

#fb-comments-page {padding:5px;border:3px solid black;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMsud2cp_A0odXgxIrwZLQDN5MamZy9dJgm6OOSKZ8bIjMPETj2epgjoGIAMOMGRqIcmObPcjrXdMSvcfChiNOkQfm1Ix9E974wod2PrN9yai11gwkmVH3LHlRLwSAZUH_k-VGUVOYgs/s1600/bg-home.jpg) repeat} #com-campur{margin-left:100px;}#comments.comments-page a{color:white} #comments.comments-page{color:white;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMsud2cp_A0odXgxIrwZLQDN5MamZy9dJgm6OOSKZ8bIjMPETj2epgjoGIAMOMGRqIcmObPcjrXdMSvcfChiNOkQfm1Ix9E974wod2PrN9yai11gwkmVH3LHlRLwSAZUH_k-VGUVOYgs/s1600/bg-home.jpg) repeat}#blogger-comments-page{padding:0px 5px;display:none}.comments-tab{font-size:14px;color:white;float:left;padding:7px;margin-right:3px;margin-left:3px;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMsud2cp_A0odXgxIrwZLQDN5MamZy9dJgm6OOSKZ8bIjMPETj2epgjoGIAMOMGRqIcmObPcjrXdMSvcfChiNOkQfm1Ix9E974wod2PrN9yai11gwkmVH3LHlRLwSAZUH_k-VGUVOYgs/s1600/bg-home.jpg) repeat;border:5px solid black}.comments-tab-icon{height:14px;width:auto;margin-right:3px}.comments-tab:hover{border:5px solid blue}.inactive-select-tab{background-color:#d1d1d1}

5. Save Template. 

Notes :
* Biasakan sebelum mengedit template, backup dahulu template anda agar jika terjadi kesalahan bisa di kembalikan seperti semula.
* Panjang FB comment bisa diatur dengan sesukanya. bila template kamu berwarna putih, hapus aja kode ini colorscheme='dark'

(‾˛‾")ƪ(˘-˘) ► Reicanation-Backlinks

URL

Code For Forum

HTML Code <a href='https://anonymousmaroo.blogspot.com/2013/11/cara-memasang-fb-comment-dan-blogger.html' target='_blank'>Cara memasang FB Comment dan Blogger Comment Berdampingan </a>