Pasang & Gabungkan Komentar FB & BLOG Sekaligus With CSS ala GUE-GALAU'

Tweet

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
demonya sobat bisa lihat dibawah ini, dan dijamin berhasil, krna semua tutorial yang saya berikan, mesti uji coba dulu baru diposts, tdk asal memberikan posting (memangnya plagiat artikel)??? yg bisanya copypaste, hahaaa,,..

demonya bisa lihat pada komentar >> http://gue-cipok.blogspot.com/2012/07/black-lightning-blogger-template.html

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/AVvXsEjLD473va7wo2iApsAcovFvwkmmxP1QGmJyxCtzL0EOtMcvQxQLSkH3bO0oKmESBB5ViFU4N_g41TdR6Jvmgt6fTfjmOzd71zZGL5QC6KfjTvs-quT1jGQsxBMUEKAL3dErN4QO9FcKx-0/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/AVvXsEhJLppvBOjw8GnPqVp0ErABwL2uVCeugpSixRZ9BlLRn2Gymi7zCqCbY6hSHYsEKO5UDmcYYFcYoGSPGsM9jXbt7P4OCiHWb0nRuqmCfUxb37H5i-x-umdYBKNqYtI6M6OzV4NJivZbKUc/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!