Home » » Tutorial Post Terbaru (Animasi)

Tutorial Post Terbaru (Animasi)


بسم الله الرحمن الرحيم

Tutorial, Tutorial Blog, Tutorial Post Terbaru, Post Terbaru, Recent Post, Cara nak Letak Post Terbaru

Assalamualaikum

Sekarang saya nak tunjukkan kat kawan-kawan macam mana nak buat post terbaru yang bergerak-gerak macam kat sidebar saya tu..senang je.Ni permintaan daripada seorang kawan kita.. Jom buat.



1. Design-> Add a gadget-> HTML/Javascript

2. Copy kod ni eh..

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "URL BLOG";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>


URL BLOG tu kawan-kawan letak url blog masing-masing..dan kalau kreatif, boleh edit-edit kod tu sendiri biar nampak lebih cantik. :)

Cuba dulu eh..go0d luck~

 والسلام



Syukran kerana sudi membaca..boleh Like dan Share entri ini

11 luahan hati:

CIK FERRA AWW said...

OHHHHH SO SWEET OF U. MEKASEH SGT2 I REALLY2 APPRECIATE. WLUPON CODE TU PJG GILER, TAPI I DAH BERJAYA WAT. I NAK EDIT SKET2, TP TAKUT CODE ERROR PULAKSS ;P TENKIU BEBEH!

Ms JuLia said...

jelesnya sbb blog kamu sgt comel tapi sy tak ley copy ler kod yg kamu bg nih..huhu..

Atika Aula said...

@CIK FERRA AWW
sama-sama :)

Atika Aula said...

@Ms JuLia
untuk copy, tekan ctrl+c :)

miraedo92 said...

npe sya wat xmnjadi ye kak?isk3

Atika Aula said...

@miraedo92
cuba awak tengok balik kod tu..myb ade yg tertinggal or template awak tak sesuai dengan tutorial ni~

pengemis cinta~ said...

Salam ziarah lagi atika..^_^

macam best je tutorial ni..saya amek tau..syukran kathira^_^

Mohamadazhan.com said...

blog saya tak dapat buat benda ni..hehe.dah try dulu..tak tau knp..huhu

khairunnisa khairul rizal said...

cam ne nak wat salji keluar 2...cntiklh...

Zawifatul Aziah said...

best2..izin share ye :)

vendettatraveller said...

nape sy buad then die tak gerak2 macam akak ? sy buad dia statik je . ke memang mula2 macam tuu ?

Related Posts Plugin for WordPress, Blogger...

ShareThis

Copyright Control : Atika Aula