17 Widget Popular Posts Dengan Efek Animasi Spy

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Popular Posts Animasi SpySebelumnya saya pernah mengetengahkan tutorial cara membuat widget recent posts dengan animasi spy, kali ini kita akan menambahkan animasi yang sama tapi pada widget yang berbeda yaitu pada widget popular posts.

Widget Popular posts ini sama dengan widget recent posts yang terdahulu, menggunakan script JQuery dan resource dari master blogger indonesia Abu Farhan.

Untuk lebih jelasnya silahkan lihat demo widget popular posts dengan efek animasi spy ini dengan mengklik button berikut:

View Demo
 

Nah jika anda tertarik untuk membuat widget popular posts dengan animasi spy, silahkan ikuti tahap pembuatannya:

  • Login ke akun anda
  • Pada menu tata letak >> tambahkan gadget popular posts seperti image berikut:

Popular Posts Widget 

  • Kemudian klik tambah gadget lagi >> pilih HTML/JavaScript >> Salin dan tempel kode berikut pada form yang tampil

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

  • Sehingga posisi widget seperti image atau screen shoot berikut;

Untitled picture

  • Simpan dan lihat hasilnya pada blog anda!

Demikian tutorial menambhakan widget popular posts dengan efek animasi spy pada blog, Semoga bermanfaat.

Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

Selamat berkreasi!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

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 Tips Trik Blogging

17 komentar :

  1. ditunggu postingan bermanfaat berikutnya kawan..

    BalasHapus
  2. Thanks dah sharing. Kunjungan pertama dan blognya bagus banget.
    Salam kenal dan kalau berkenan mampir balik ya :)

    BalasHapus
  3. @ Rental mobil murah, iklan baris & direktori webblog: Terima ksh kunjungan dan apresisi anda semua.

    BalasHapus
  4. Terima Kasih atas informasinya. Tapi apakah tidak membuat blog itu sedikit lemot ?

    BalasHapus
    Balasan
    1. Jika 1 atau 2 script sj pd widget blog yg anda psg, insyaAllah tdk akn membebani blog lg sbnrx cepat atau lambat loading sebenarnya tergantung koneksi internet.

      Thanks apresiasix.

      Hapus
  5. Alhamdulillah!

    Sudah dipasang, hasilnya mantap!

    Terima kasih!

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  6. Maaf mbak yg di atas salah balas komen hapus aja (p) oh iyah mbak popular post spy nya kok gak muncul di blog aku yah ;-( minta pencerhannya dong mbak, mau banget ama widget yg satu ini p)

    BalasHapus
  7. trims infonya.. kalau lagi santai mampir ke blog saya campursari-210.blogspot

    BalasHapus
  8. Assalamualaikum mbak Amatullah..
    Saya blogger pemula nihh mbak, makasih banget yya atas infonya ini.
    Sumpah yang widget model PSY itu keren banget.=))

    BalasHapus
  9. setelah ane coba,kok animasinya ga jalan yah,,,, kenapa yah....

    BalasHapus
  10. makasih yah sob...!! menarik

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!