Home » » Slide Populer Post Blog

Slide Populer Post Blog


Kumpulan Blog Keren - Selamat siang sobat blogger semuanya, kali ini saya ingin berbagi informasi cara membuat slide pada populer post di blog, seperti postingan saya yang sebelumnya cara membuat populer post bergerak. Namun untuk yang satu ini merupakan populer post terbaru dan tampilanya populer post nya  nanti adalah slideshow. lihat demo, untuk itu bagi sobat yang sedang mencari ataupun ingin memasangnya di dalam blog para sobat berikut ini adalah cara-caranya:

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<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:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.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:#7CA2C4;
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:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
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>

Lalu simpan dan taruh di bawah populer.
Demikianlah info yang dapat saya  berikan untuk sobat sekalian moga bermanfaat 
Selamat mencoba dan berkreasi............salam blogger.............^_^
 
Keterangan :
pada  kode width:100%; merupakan ukuran lebar
pada kede height:310px  merupakan ukuran tinggi

11 komentar:

vivi said...

thanks sob buat infonya......:D

Blog Gue said...

terima kasih sob....infonya sangat membantu..........:D

Kumpulan Blog Keren said...

@vivi > sama -sama sob..thank yah dah berkunjung........:D

@Blog Gue > sama² sob....terima kasih juga atas kunjungannya sob....:D

Suhu PTC said...

Scriptnya panjang banget sob..?
Apa ngak berat loadingnya...??

Uem Cuters said...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

my creativity said...

thanks infonya gan,,,,,

mariyanto widodo said...

saya dah coba tapi kok gagal ya..?

Yanz Jasad said...

widih informasinya keren gan ... baca infor masinya gug membosan kn
maksih gan infor masinya

karya flanel said...

all,,ada pernak-pernik lucu loh dari kain flanel,,,tertarik?.....kunjungi blog http://handcraftflanels.wordpress.com

hakadvertising said...

maksih atas dokumennya

uangonlineblog said...

Tasks4Job adalah sebuah situs baru berinovasi kerja, di mana Anda akan dipekerjakan untuk melakukan beberapa tugas, berbeda dalam jenis dan jumlah. dan Anda akan dibayar hadiah yang diperkirakan untuk saat itu dalam akun Anda, setelah itu para pemberi kerja akan meninjau layanan dan menyetujui status pembayaran Anda, maka Anda akan dibayar untuk pekerjaan Anda melalui Cek. Uang gram juga segera hadir. Anda harus membuat account dengan kami untuk memulai dan login ke member area anda, dan lakukan setiap hari pekerjaan Anda dan Anda akan benar-benar hebat setelah menggunakan layanan kami.

Kami menjamin Anda bahwa Anda akan mendapatkan $ 1500 dalam minggu pertama Anda dengan tugas sederhana dari 5 - 10 menit

25 $ Bonus Signup!
kunjungi link
http://tasks4job.com/?refer=157242