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

Cara menambahkan efek slide di Populer Post

0 Response to "Cara menambahkan efek slide di Populer Post"

Followers