Judul : Cara Membuat Artikel Populer dengan Animasi Turun di Blogger
link : Cara Membuat Artikel Populer dengan Animasi Turun di Blogger
Cara Membuat Artikel Populer dengan Animasi Turun di Blogger
Kalian pasti ingin tahu caranya membuat Popular Post dengan animasi turun satu persatu begitu bukan?? Saya setuju banget jika kalian menginginkan widget seperti itu,, karena akan membuat tampilan blog kita terlihat menarik bukan?? :) tapi saya tidak ingin memakai karena menuh-menuhin tempat blog "Untuk Sahabat" hehehe,, tapi berhubung saya orang yang baik,, niihh langsung saja saya kasih tahu caranya : silahkan disimak...!
- Login dulu ke Blogger kalian.
- Masuk ke dashboard.
- Pilih Tata Letak => Tambahkan Gadget
- Lalu Pilih HTML/JavaScript.
- Masukkan Script dibawah ini
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:500px;
}
#PopularPosts1 ul {
width:300px;
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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:500px;
}
#PopularPosts1 ul {
width:300px;
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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>
- Ingat : Tidak usah diberi judul,, oke??
- Kemudian untuk langkah selanjutnya :
- Masuk ke dashboard kalian lagi.
- Pilih Tata Letak => Tambahkan Gadget
- Lalu pilih Entri Populer / Popular Post,,,
- Simpan dan Lihat hasilnya,,
- Kalau punya saya Hasilnya seperti ini :
- Tapi saya hapus aja, karena saya gak begitu minat,, yaa sekedar coba-coba saja awalnya,,!! truss saya postingkan buat sahabat2 saya aja,, hehehehe,,
- Yang masih bingung silahkan Komentar!
Mohon maaf untuk sementara saya pasang script anti copas, untuk mendapatkan kode tentang Cara Membuat Artikel Populer dengan Animasi Turun di Blogger diatas silahkan bisa add saya di facebook, klik disini! atau bisa follow dan inbox google+ saya!
Semoga artikel tentang Cara Membuat Artikel Populer dengan Animasi Turun di Blogger ini bermanfaat bagi kalian!
7 Responses to "Cara Membuat Artikel Populer dengan Animasi Turun di Blogger"
ijin coba
iya,, silahkan! terimakasih atas kunjungannya!
tq banget artikelnya agan...
sangat bermanfaat buay saya
terima kasih akan saya coba
mantap
Mantap gan
mantab bro.....mampir ke blog ane....
www.widhiarto15.blogspot.com
Post a Comment