Cara Buat Popular Post Widget Bergerak

Blogger widget: macam mana cara nak buat popular post bergerak di sebelah bahagian sidebar kiri  atau kanan blog saudara (ianya bergerak dari atas ke bawah) ia kelihatan lebih dinamik dan menarik


Langkah 1. Login masuk akaun blogger, pilih  Dashboard > Layout > Add Gadget > Popular Posts seperti gambar di bawah :




Bagaimana Cara Buat Popular Post Widget Bergerak



Bagaimana Cara Buat Popular Post Widget Bergerak


Bagaimana Cara Buat Popular Post Widget Bergerak



Langkah 2.
Login masuk akaun blogger, selepas tu pilih 
Dashboard > Layout > Add Gadget HTML/Javascript ,
selepas tu copy & paste semua kod di bawah pada HTML/Javascript,


***Nota penting : Sila rujuk gambarajah di atas.


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


#PopularPosts1 {


overflow:hidden;


margin-top:5px;


padding:0px 0px;


height:400px;


}


#PopularPosts1 ul {


width:340px;


overflow:hidden;


list-style-type: none;


padding: 0px 0px;


margin:0px 0px;


}


#PopularPosts1 li {


width:340px;


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>


Langkah 3.
klik butang Save. 
O.K dah selesai, sekarang anda boleh preview blog untuk lihat hasilnya, selamat mencuba.

Follow BB di Google+ sekiranya anda mendapati tutorial ini membantu, dan jangan lupa share dengan rakan blogger yang lain, selamat mencuba.


Comments




Subscribe to Our Newsletter

Dapatkan Update Terkini Terus Ke Email Anda...


*Kami Benci Spam!

Popular Posts

Apakah Maksud Kelajuan Internet Mbps dan Kbps

Bagaimana Cara Hack "Wifi Password"

Bagaimana Ketahui Phone Kena Hacked

Cara Padam Akaun Instagram

Cara Membuka UnLock Pattern Android, PIN Kata Laluan

Cara Membuat Video Montaj