Komentar FB dan Blog Gaya Buka-Tutup

Setelah sebelumnya saya berbagi dengan kawan Cara Menampilkan Komentar FaceBook di Blog, kawan sudah pasti melihat hasilnya, Komentar FaceBook berada diatas Komentar Blog :q;  yang menyebabkan Tampilan Blog jadi memanjang kebawah seandainya Komentar FaceBook dan Komentar Blog banyak yang memberikan Komentar :r; 

Untuk mengatasi masalah ini diperlukan cara agar menjadi Kotak Komentar Buka-Tutup dan Berdampingan, seperti Tab Menu, Navigasi dan lain sebagainya :

Sebelumnya saya informasikan » bagi kawan yang sudah menerapkan Artikel saya sebelumnya tentang Cara Menampilkan Komentar FaceBook di Blog, sedangkan bagi kawan yang tidak, tapi sudah Menampilkan Komentar FB   di Blognya dengan cara lain silahkan dicoba dan disesuaikan :x;

Caranya :

• Seperti biasa silahkan kawan masuk Account Blogger dengan ID masing-masing
• Beri  tanda check   disamping Expand Template Widget 
• Cari #comment atau .comment 
• Copas script berikut diatas atau dibawahnya 

.comments-page {
background-color: transparent;
border: 1px solid #699AB8;-webkit-border-radius: 10px; -moz-border-radius:  10px; border-radius: 10px;
width: 610px;
padding: 10px 15px;
}
#blogger-comments-page {
padding: 15px 10px 5px 20px;
display: none;
width: 610px;
border: 1px solid #699AB8;-webkit-border-radius: 10px; -moz-border-radius:  10px; border-radius: 10px;
}
.comments-tab {
float: left;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
background-color: #699AB8;
border: 1px solid #FFF;-webkit-border-radius: 5px; -moz-border-radius:  5px; border-radius:  5px;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
font-size: 16px;
}
.comments-tab-icon {
height: 18px;
width: auto;
margin-right: 10px;
}
.comments-tab:hover {
background-color: #7CA9C0;
color: #FFF;
}
.inactive-select-tab {
background-color: #95CAFF;
color: #333;
text-shadow: none;
}

Selanjutnya cari  <div class='comments' id='comments'> 
Ganti semua script berikut :


<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='550'/></b:if>

dengan :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with 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'/> 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/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

• Simpan Template kawan dan Selamat Berkreasi :z;