Membuat Popular Post Bergerak

Membuat Popular Post Bergerak turun random - Menampilkan artikel yang paling sering dibaca atau popolar post dengan gambar dan bisa bergerak turun, menempatkan widget popularpost disidebar atau disebelah kolom postingan, bisa dikiri atau dikanan tergantung selera masing-masing,

Setelah posting seputar facebook dengan judul (baca: membuat cover facebook timeline,) dan  mencoba menulis ulang artikel cara membuat popular post atau menampilkan artikel yang sering dibaca dengan sedikit animasi random.

Pada dasarnya artikel popular post sudah banyak yang mengulas dan membahasnya, jika sahabat tidak suka membuat popular post atau artikel terkait dengan animasi bergerak turun seperti tutorial blog yang akan dibahas dibawah ini, sobat bisa mencoba membuat artikel terkait lainnya dengan hanya menampilkan gambar saja (baca : Tutorial Membuat Popular Post Gambar Thumbnail ), atau bisa juga dengan membuat keduanya.

Apa guna menampilkan artikel yang sering dibaca / Popular Post ? 

Dengan memasang widget popular post pada sidebar blog dapat membantu pengunjung untuk melihat top artikel, artikel postingan terbaik yang paling banyak dilihat oleh pengunjung / visitor, cara ini juga diklaim bisa menurunkan bounce rate blog.

Manfaatlain bisa membantu blog / web agar terkenal di google karena sering dan lamanya waktu pengunjung untuk melihat-lihat isi web tersebut. sebagai contoh popular post  pada situs ini ditempatkan disidebar kanan dengan judul top entri.

Default widget popularpost blogger, blogger sendiri telah menyiapkan widget popularpost sehingga para pengguna tidak disulitkan lagi dan mengharuskan membuat script html khusus untuk membuatnya, cukup dengan menambahkan widget dari pengaturan yang sudah disediakan, tulisan kali ini membuat popular post bergerak turun tetap menggunakan widget defaultnya blogger / blogspot, dengan menambah script css untuk menghasilkan sentuhan animasi agar popularpostnya tidak monoton.

Cara Membuat Popular Post Bergerak Turun Random

membuat-popular-post-bergerak

bagi sobat yang ingin membuat dan memasangnya berikut caranya :

1. Logi ke dasbor sahabat

2. Pilih Rancangan

3.Tambahkan Gedget "Entri Populer"

memberikan-efek-entri-popular

4. Tambahkan Gedget "HTML Java Scrip"

postingan yang sering dibaca

5. Paste code dibawah ini dan paste di Gedget HTML Javascrip tadi.

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

#PopularPosts1 {

 overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:280px;

    

}

#PopularPosts1 ul {

width:342px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#PopularPosts1 li {

 width:334px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:80px;

overflow: hidden;

background:#fff url() 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://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>

Simpan Tamplate Sahabat dan lihat hasilnya.