Cara Membuat Entri Populer Blog Dengan Animasi Bergerak

Cara Membuat Entri Populer Blog Dengan Animasi Bergerak

Ada beberapa hal yang bisa dilakukan oleh Blogger untuk mempercantik tampilan Blognya sehingga kelihatan menarik dan aktraktif. Dengan harapan tentunya semakin banyak yang mengunjungi Blog anda sehingga pesan-pesan yang anda sampaikan dapat lebih banyak dibaca dan semakin cepat sampai . Salah satu hal yang dapat anda lakukan diBlog anda adalah dengan menampilkan Entry Populer dengan Animasi yang bergerak. Bagaimana caranya?

Berikut cara pembuatannya:

1. Login ke akun Blogger atau Blogspot 
2. Klick Desain 

2. Klick menu Tata Letak. 

3. Pasang Widget Entri Populer, kemudian

4. Pasang Widget HTML/Java Script:

Copas kode HTML berikut: 

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

#PopularPosts1 {
overflow:hidden;
margin-top:2px;

padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:none;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:12px;
    margin-bottom:2px;
}
#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:12px;
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"></scrip >

<div style="margin-bottom: 5px;">

<style type="text/css">

#rp_plus_img{height:870px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}

#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:55px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>

<script type="text/javascript">

var speed = 800;

var pause = 1500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 50;

var numchars = 90;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

</div>

Simpan, dan lihat hasilnya akan muncul seketika.

Jika anda mengalami kesulitan mempraktekkan langkah-langkah diatas, silahkan hubungi saya di Contact.

RELATED POST

• Cara Membuat Popular Post Simple Keren
• Cara Membuat Tombol Menu di Blog
• Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog
• Cara Membuat Widget Recent Posts Bergerak di Blog
• Cara Menambahkan Pop Up Like Box Facebook