Cara Termudah Membuat Slider Popular Post
Ketika kita berselancar di suatu Blog pasti menemui widget yang namanya Popular Post yang tampilannya beragam ada yang flat kebawah dan ada juga yang sedikit unik yakni dengan amimasi Sliding ( bergeser ) secara bergantian seperti yang dipakai oleh Blog ini. Widget ini di ciptakan oleh Abu Farhan.
Cara membuatnya cukup simple :
1. Login ke Blogger
2. Pilih Tata Letak
3. Add Gadget >> Copy kode berikut
kemudian susun gadget baru di atas gadget popular post bawaan blogger secara berurutan
Cara membuatnya cukup simple :
1. Login ke Blogger
2. Pilih Tata Letak
3. Add Gadget >> Copy kode berikut
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px; overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitD_IXrgMlTQf9BhaK6FLJ-pKhnckqr0BuK0b24ihsgkBcs_CEfKWPaPT1_IW_Z4l3hluc7BA-pan9gEU1YIh7VAJeiB1g_kr_7yZaMDWaMV0XLKDE0E2ZtLeu4TGdoLb7YdT-dPKFChc/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js"type="text/javascript"></script>
kemudian susun gadget baru di atas gadget popular post bawaan blogger secara berurutan
4. Save/ Simpan
Semoga manfaat dan selamat mencoba...
.: h72 :.
0 komentar:
Post a Comment
No spam...