Membuat Popular Posts Dengan Animasi Bergerak

Monday,9 july 2012
Makkah Saudi Arabia

Bismillah...

Belajarlah dari kegagalan karena dia adalah guru terbaikmu...

Bagai mana iman dan kesehatan tubuhmu sobat...???.Salam hangat dari saudaramu Sanga pendaki cahaya kali ini saya ingin berbagi pengalaman dan sedikit ilmu.

Saya tertarik menulis ini karena desakan teman seperjuangan saya yang ingin sekali blognya bisa seperti saya...gayamu loo kon he...silahkan bisa kunjungi blog beliau yang keren dan serat dengan ilmu...Ustd Ganang Prihatmoko atau lebih terkenalnya Mas Ganang atau bisa add facebook beliau...Jazakumulloh atas Motivasi dan Suport dari antum...jangan berhenti untuk menasehati ane...semoga pertemanan kita akan kekal abadi sampai bertemu dengan Robb yang telah mempertemukan kita...tidak ada yang lebih nikmat selain berteman dan mencintai karena Alloh...waduh kalo denger kata cinta jadi ingin...NIKAH...Sabar belum waktunya...hufh.
NGELANTUR.COM


Owh ya foto error di bawah ini kalo contoh dari Popular Posts yang bisa di lihat di blog saya.

Sorry ya kalo gak jelas gambarnya...biasa amatir...

Oke langsung saja...tidak sulit kog...dan cepat tanpa perlu menguras otak...sebelumnya saya pernah belajar dari mbah google,tapi sekarang lupa link yang sudah mendidik saya,udah tak cari kemana-mana eh gak dapat juga...ya udah buat sendiri aja...kereatip dikit...

Saya anggap sahabat sudah punya entri populer tahap pertama...bila belum punya...ya buat dulu dong...gutu aja repot...hihi

1.Login ke akun Blogger atau Blogspot sahabat dan masuk ke menu Tata Letak.

2.Sediakan 2 (dua) Widget yaitu widget Entri Populer yang saya anggap bahwa sahabat sudah punya semua dan widget HTML/JavaScript.

3.Widget Entri Populer dapat sahabat tambahkan dengan cara klik Tambah Gadget – Entri Populer (Baru!) dan ubah settingannya seperti gambar berikut:

4.Widget HTML/JavaScript sahabat tambahkan pula dengan cara klik Tambah Gadget – HTML/JavaScript lalu masukkan script berikut ini:

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) 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://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

5.Terakhir simpan kedua widget tersebut dan beres sudah lihat deh hasilnya…gampang kan...jangan lemot ya...massyi???

"Tidak ada yang paling sulit di atur di dunia ini melebihi sulitnya mengatur diri sendiri"

KEEP YOUR LIGHT...