Welcome!

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/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/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/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/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/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/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'

Sumber