FB Comment Dan Blogger Comment Berdampingan

Nah sekarang saya akan membahas cara untuk membuat "FB Comment Dan Blogger Comment Berdampingan". Tapi ini beda loh dari yang lain, karena kode-kodenya udah diedit sedikit agar tampilannya pas, apalagi untuk template yang gelap-gelap. Tapi bisa juga kok untuk template yang terang, tinggal atur aja CSS-nya. Bedanya apa? nah kalu versiku tinggal disorot langsung muncul, kalau punya orang kan harus di-klik dulu baru muncul. okeh langsung aja.. yok!

Bagi yang sudah pasang sebelumnya :

Berikut untuk yang sudah pasang sebelumnya :
1. Cari kode yang mirip seperti ini :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 hijau dengan kode ini :

onmouseover

Untuk yang belom 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 yang tersebut

<div id='com-campur'>
<div class='comments-tab' id='fb-comments' onmouseover='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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. Cari kode </head> , lalu taruh kode berikut tepat 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) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

4. Cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian).Lalu taruh kode berikut tepat diatas kode tersebut :

#fb-comments-page {padding:5px;border:3px solid black;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtu60-a88vQ3aHPRqTFP8P6NEsNCo4sCGwS3VE0nqeXl-vnIgWEIrLAYhEUCRKLR_NS3wdqe3_zC4s_RF5reXfCLqB-n2N-xnvTjvSgIV9gPLNhznJJsbNCh0U7QsRVlP1FsWXXfhYsg/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/AVvXsEiJtu60-a88vQ3aHPRqTFP8P6NEsNCo4sCGwS3VE0nqeXl-vnIgWEIrLAYhEUCRKLR_NS3wdqe3_zC4s_RF5reXfCLqB-n2N-xnvTjvSgIV9gPLNhznJJsbNCh0U7QsRVlP1FsWXXfhYsg/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/AVvXsEiJtu60-a88vQ3aHPRqTFP8P6NEsNCo4sCGwS3VE0nqeXl-vnIgWEIrLAYhEUCRKLR_NS3wdqe3_zC4s_RF5reXfCLqB-n2N-xnvTjvSgIV9gPLNhznJJsbNCh0U7QsRVlP1FsWXXfhYsg/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. Dan Selesai :D

Gampang kan? nah sampai di situ aja ya. Untuk Kode CSS bisa diatur seenaknya (kasih sambal juga gpp)

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