Rabu, 06 November 2013
Komentar FB dan Blog Gaya Buka Tutup
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
.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 == "item"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&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("#fb-comments"); 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("#blogger-comments"); 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 == "item">
<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;
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar