Wednesday, October 2, 2013

cara membuat poluler post berjalan kebawah


     malam sob,, Popular post merupakan artikel yang sering dibaca para pembaca pada sebuah blog. popular post ini biasanya ditampilkan di sebelah kanan atau kiri atau di bawah sebuah postingan sesuai keiginan kita. ada beberapa fmodel widget popular post yang sering ditampilkan adalah dengan memasang kode HTML/Java Scipt agar popular post bisa berjalan kebawah seperti pada blog saya ini. Hal ini tentu akan meambah tampilan blog kita menjadi lebih menarik.

langsung saja ikuti langkah dibawah bila ingin mencoba :

Berikut caranya :
  1. Masuk ke Blog
  2. Pilih Rancangan
  3. Tambah Gadget "Entri Popular" ( Jika gadget entri popular/ popular post sudah ) langsung saja menuju>
  4. Tambah Gadget "HTML java scrip"
  5. Copy kode di bawah ini dan paste pada gadget HTML java scrip tadi
<style type="text/css" media="screen">

#PopularPosts1 {

 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:600px;
    
}

#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"></s




6.  Gadget "HTML java scrip  jangan di kasih nama sob, lagsung saja klik simpan

Suka Dengan Artikel Ini ?

1 comment:

 
 
Copyright © 2013. Goombes - All Rights Reserved
Design by goombesh | Powered By Blogger.com