Monday, November 28, 2011

Cara Nak Buat Popular Post Bergerak/Slide Show

Cara Nak Buat Recent Post Dengan Slide Show, Cara Nak Buat Recent Post Bergambar Tanpa Perlu Edit HTML, Cara Nak Buat Recent Post Bergambar Yang Lebih Smart, Cara Nak Buat Popular Post Bergambar, berikut merupakan tutorial saya sebelum ini. Tutorial-tutorial tersebut adalah saya berkaitan denagan tutorial saya pada kali ini iaitu Cara Nak Buat Popular Post Bergerak/Slide Show. Untuk contoh bergerak hasil tutorial ini, anda boleh tengok di SINI. Jom ikuti tutorial ini.

Step 1:
Masukkan gadget Popular Post ke dalam blog anda.

Step 2:
Pergi ke Design > Page Elements > Add a Gadget > HTML/Javascript

Step 3 :
Copy kod dibawah dan paste di dalam kotak HTML tersebut dan save.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:330px;

}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMhFci1Igq1Gcx7ZqrRfowO-lW1oxqLR_MUpuwwm6UksmIWRpb_PoAmUBmfzl9V0ImTwn7TzvmfjfY3WiIvfQzL1dVik1Zl9Fn9goECYa3nszhQ0ElBWehfwIbRDr2nYYVb4R833Qi78/s400/popular+posts.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>

Step 4:
Drag kod html tersebut ke bawah gadget Popular Post anda seperti dalam gambar dibawah.


Step 5:
Save !

Selamat Mencuba. Sila komen jika berjaya.

Entri Rakan Blogger