Cara membuat agar popular post bergerak
ke bawah . Cukup mudah caranya. Cara yang saya terapkan ini hanya degan
menambah kode HTML tanpa mengedit template yang cukup ribet pengolahannya. hehe
:D
Popular post ini biasanya ditampilkan di sebelah kanan atau kiri atau di bawah sebuah postingan sesuai selera masing-masing. Diantara fariasi widget popular post yang sering ditampilkan adalah dengan memasang kode HTML/Java Scipt agar popular post bisa berjalan kebawah seperti pada blog saya ini. Hal ini tentu akan menambah tampilan blog kita menjadi lebih menarik.
Popular post ini biasanya ditampilkan di sebelah kanan atau kiri atau di bawah sebuah postingan sesuai selera masing-masing. Diantara fariasi widget popular post yang sering ditampilkan adalah dengan memasang kode HTML/Java Scipt agar popular post bisa berjalan kebawah seperti pada blog saya ini. Hal ini tentu akan menambah tampilan blog kita menjadi lebih menarik.
Berikut ini cara yang harus sobat blogger praktekan :
- Masuk ke Blog .. tentunya dengan email dan password kalian
- Pilih Tata Letak
- Tambah Gadget "Entri
Popular" ( Jika gadget entri popular/ popular post
sudah di sobat pasang ) langsung saja bro ke tahap selanjut nya
- Tambah Gadget "HTML java
script"
- Copy kode di bawah ini dan paste pada
gadget HTML java scrip tadi
<style type="text/css"
media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
}
#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
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://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
}
#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
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://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>
Setelah semua nya selesai simpan template dan
lihat hasilnya.
Jika sudah berhasil jangan lupa berkomentar
yah :)
Demikian cara membuat popular post berjalan
untuk menambah tampilan blog anda lebih menarik.
Judul : Cara Agar Popular Post Dapat Bergerak
Ditulis Oleh : Unknown
Berikanlah saran dan kritik atas artikel ini. Salam blogger, Terima kasih
Baca Juga Artikel Tentang :
0 komentar:
Posting Komentar