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("#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 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("#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. 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) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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'
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("#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 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("#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. 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) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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/AVvXsEgKjN_iCkDgOABifcDIK5b6aQdqLfHZ9uh1fKE1VV71JffKHIYDTBzCrT7yIPWx7zccskqB-nQti9yhgMKbunqSKY-f1WbPhyphenhyphenCKzQSjNNFXV5zSI6mYTQIKBSxY8K0LgdaFA6VgjXg9ugU/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'


