Tips Membuat Popular Post Animasi Pada Blog

1. Silakan Login ke akun blog anda.

2. Kemudian pilih Design > Page Elements

3. Jika pada blog anda belum terpasang widget popular post, silakan tambahkan dulu dengan mengklik “Add Gadget” sesuai keinginan dan jangan lupa akhiri dengan mengklik tombol Save


4. Selanjutnya Klik lagi “Add Gadget” dan tambahkan gadget  HTML/Javascript kemudian copas kode dibawah ini dan akhiri dengan mengklik tombol Save.

    <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>

Untuk melihat hasilnya Klik View Blog.

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku