Pasang & Gabungkan Komentar FB & BLOG Sekaligus

Hemm,.. gak henti2nya gue memberikan tutorial blog.hehee,..
kli ini saya akan mencoba kembali untuk memberikan tutorial mengenai cara 'Memasang dan Menggabungkan Komentar FB & BLOG Sekaligus With CSS', dimana trik ini tanpa sengaja saya melihat disalah satu teman blogger yg memakai fitur seperti ini, trnyta menarik juga tuk dibahas, :D

dan disini saya mencoba membuat fitur seperti it dgn cra saya sendri, dmn trik ini saya sdah membuatnya tampil lebih menarik dan berbeda dari biasanya (standart), krna sy mencoba menambahkan beberapa efek over dengan css. :D


Oke kita mulai saja ya, tidak usah banyak cing cong...haha..!!
Silahkan ikuti tahap-tahap berikut :

1. Login Ke Akun Blog Sobat

2. Pilih Rancangan/Tata Letak

3. Lalu Cari Kode <div class='comments' id='comments'> , dan letakkan Kode Berikut tepat dibawahnya.

<div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gVldbNw52eHkaYTfA6JdCCyTsSpvVTCOt-YeLi64TUVeRxAUM-m-Y8jXWKAJz-mCyvZBbdIBAX4x0KzJF2TsyzBGb1C75VVd83ONBfBvMlSS4w9IV5jlTA3NPsMMX9kcHd6lqID6E5I/s1600/FACEBOOK.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhSVnPv_U4LEJFDbr12IPPaU9GmgPUKLIHdhu8xCss-3Gx0dzsArAgj1J0bBgucgBAs9m06VydBsBGUr_F7URIXuCq9pc93fE3SVi4wysgbU7RFqOWl5RB8e9YSaPEDNqlL3svBv7I_6w/s1600/BLOGGER.png'/> 
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='700'/>
</b:if>
</div>
<div class='comments comakauttafb-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='potter182' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comakauttafb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab 
{-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page 
{background:transparent;);margin-top:8px;}#blogger-comments-page 
{padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 
1px 
#fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5s
 ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s 
ease-out}.comakauttafb-tab-icon 
{height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover 
{background:rgba(219,219,219,.8);}.inactive-select-tab 
{background:rgba(255,255,255,.4);}.inactive-select-tab, 
.comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px 
#fff,1px 1px 5px #000}</style>

KET::
- Apabila Terdapat 2 kode ' <div class='comments' id='comments'> ' yg sama, silakan sobat pastekan pada kode yg kedua.!!

4 . Terakhir Simpan Template, Dan Lihat Hasilnya. :D

Semoga Posting kali ini dapat bermanfaat bagi Sobat sekalian!

About "Administrator"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, augue quis mattis gravida, est dolor elementum felis, sed vehicula metus quam a mi. Praesent dolor felis, consectetur nec convallis vitae.