Cara Membuat Popular Post Bergerak ke Bawah

Unknown Reply 5:10 PM

Ok kita lanjut postingan Belajar Blog bersama, kali ini admin mau share Cara Membuat Popular Post Bergerak ke Bawah. Mungkin bagi para blogger membuat popular post sudah pada tau dan sudah tidak asing lagi karena memang sudah disediakan di menu tambah widget, namun tampilan yang disediakan/defaultnya masih biasa saja dan tidak bergerak. Nah, pada kesempatan ini admin akan memberikan trik agar popular post tersebut jadi bergerak kebawah. Yuk mari disimak :

Untuk menggunakannya ikuti langkah berikut ini :

1. Login/masuk ke situs Blogger.com
2. Masuk ke TATA LETAK
3. Tambahkan Gadget Widget (HTML/Javascript) untuk popular post biasanya disidebar

Cara Membuat Popular Post Bergerak ke Bawah

4. Copy Semua Kode ini & paste ke Widget (HTML/Javascript) tersebut

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

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}

#PopularPosts1 ul {
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
width:292px;
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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>


Keterangan:

   - Untuk ganti lebar/panjang kolom bisa menganti height dan width yang berbau" itu
   - Untuk ganti warna backround cari yang berbau background, ganti warnanya #fff
     atau bisa mencari background dengan menggunakan url
   - Selebihnya dicoba sendiri untuk font, border, dsb

5. Ok, sudah beres sekarang simpan kode HTML tadi dan lihat di kanan blog untuk hasilnya

Cara Membuat Popular Post Bergerak ke Bawah


Cara Membuat Popular Post Bergerak ke Bawah

Related Posts

Belajar Blog 8319119017191039123

Post a Comment

Search

Popular Posts

Labels