Cara menambahkan efek slide di Populer Post

Memang pada setiap blogger mau tidak mau harus membuat popular post. Karena dengan cara ini banyak pengunjung akan mengklik postingan tersebut, sadar dan tidak sadar itu lah yang terjadi. Apalagi jika kita buat sedikit sentuhan yang menarik pada widget tersebut.Seperti berupa efek slide..Langsung simak aja gan,,":

Langkah - langkah pembuatan :

• Login ke Blogger dengan account anda
• Rancangan => Edit tata letak
• Add Widget => Entri Popular
• Pada pengaturan pilih banyaknya entri yang ingin anda tampilkan.
• Lalu Simpan.

Langkah pembuatan slide pada Popular post :

• Nah setelah sudah selesai membuat widget pada popular post. 
• Tambah lagi Widget (Add Widget) => Java scrip HTML
• Kemudian Anda Masukkan Kode CSS berikut kedalam kolom Java scrip HTML

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">
<style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:5px;
    width:100%;
    padding:0px 0px;
    height:310px;
    }
    #PopularPosts1 ul {
    width:310px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:10px 0px 0px 10px;
    }
    #PopularPosts1 li {
    width:295px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFxo6JjEjCfrd8E3EvlgwpSL8Izxiv0noK3QQ5y5YHk1SYG7L6lmFWAi0HqWF2ZjgKVJ3bm35CC7yNBwfIsuyceHpaW_JLt63kG-Vsa-0-YVBHM2aS-LIr3eTRJkvHeaI_DrT3nN-rrQ/s400/popular+posts.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
    font-size:1em;
    margin-bottom:0.5em;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#180E43;
    font:bold 12px verdana;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:1px solid #A694F4;
    }
    #PopularPosts1 li .item-snippet {
    overflow:hidden;
    font-family:Tahoma,Verdana, Arial;
    font-size:11px;
    color:#0E0404;
    padding:0px 0px 0px 0px;
    margin:0px 0px 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>
    <scriptsrc="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
</div>
</span></span></span>

Catatan :

• Kuning    :  Dapat anda ubah besar widget dan tinggi dari popular post anda nantinya. 
• Hijau      : Warna dan Font Link Judul 
• Merah :  Image Border Postingan anda 
• Biru  : Ringkasan Postingan anda. 

Nah Jadi deh tutorial ,Cara Menambahkan efek slide di Populer Post..