kolam

peliharaan GW

Senin, 02 Februari 2015

cara membuat koment fb 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/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'

Facebook Comments
1 Blogger Comments


1 komentar:

Unknown mengatakan...

hohoho

Posting Komentar

silahkan katakan sesuatu...

Template by:

Free Blog Templates