Cara Pasang Recent Posts Slider (Tutorial)

on Khamis, Julai 08, 2010

Salam....

Dah lama aku tak update blog sehingga ditegur oleh top blogger sebab dah bersawang teratak ini tanpa entry baru. Biasa la, sindrome malas menyerang dan game farmville telah merantai tangan dan jiwaku dari menaip entry.

Okey, hari ni aku nk buat tutorial yang di minta oleh purpleroses. Matdin pun pernah tanya juga dulu tapi belum sempat aku bagitau, beliau dah siap buat. Cepat sungguh. Tutorial ini dipelajari dari cikgu Nescafe Ais. Ada sesiapa yang tak kenal? Kredit untuk cikgu Nescafe.

Recent Posts Slider seperti di bawah atau boleh dilihat di sidebar blog yang sedang bergerak-gerak tu (Sajian Teratak).


Caranya senang sahaja. Copy je code di bawah ni, edit apa yang patut dan paste pada HTML/Javascript.

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

#spylist {
overflow:hidden;
margin-top:5px;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:180px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:140px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#DCD8D2;
border:1px solid #ddd;
}

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

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

-->
</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = " ";

showPostDate = false;

showcomments = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = "http://azilas.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>


Save!

Jadi, pandai-pandailah edit url blog, warna background, kepanjangan, ketinggian dan paparan yang dikehendahi mengikut kesesuaian blog anda.

Sebagai rujukan:

width:280px; (lebar kotak)
width:300px; (lebar teks pada kotak)
background:#FFFFFF; ( background kotak)
color:#A32929; (Warna teks)
numposts = 20; (Bilangan tajuk post yang ingin dipaparkan)
home_page = "http://Masukkan URL blog anda disini.blogspot.com/"; ( URL blog anda)

Selamat mencuba dan jangan lupa tinggalkan komen anda. Terima kasih.
Ranking: 5

42 comments

8 Julai 2010 pada 6:29 PTG

Thanks sbb sharing cuma masalah mak is, kenapa recent yg mak buat statik je? dier x skroll kebwh pun..

8 Julai 2010 pada 6:39 PTG

Artikel ni memang best..Tapi kenapa aku buat tak jadi..kuar putih je..huhu..aku try ubah url je dulu..ada lain yg nak kene ubah tak?

Tanpa Nama
8 Julai 2010 pada 7:11 PTG

Nice tutorial :)

8 Julai 2010 pada 7:29 PTG

@Lagenda
Entah la....

@Khidhir
Mesti la nk kena ubah tinggi, lebar, warna.

@Anak Perak
:)

8 Julai 2010 pada 11:00 PTG

blog mmg tambah menarik kalau guna ni.. bagus utk perkongsian rakan2

9 Julai 2010 pada 2:53 PTG

Dari Anas r.a. katanya, Rasulullah s.a.w. bersabda; "Sesiapa yang tertidur atau terlupa hingga luput sembahyang hendaklah dia menunaikan (sembahyang) sebaik-baik sahaja dia ingat (sedar) kembali." - Sahih Bukhari
Selamat berhari Jumaat Al-Mubarak..

10 Julai 2010 pada 9:58 PG

Hehe..ty²..nk try nih..;)

10 Julai 2010 pada 10:32 PG

Ty ye cik azilas..sy dah amik coding nih..dah jadi dah..cantik..suke..ty ye..

10 Julai 2010 pada 1:14 PTG

thank for sharing.

Jangan ganggu org tidur

10 Julai 2010 pada 2:01 PTG

oh~... tq.. mcm menarik... nk cube nnt.. klau ok.. guna...
klau tak ok.. just use for next trial..
hehe.. tq.. sharing..

MINDA INSAN

10 Julai 2010 pada 3:12 PTG

@kulanz
Thanks atas komen anda...

@zulkbo
Peringatan yg sungguh bermakna. Memang selalu alpa dgn dugaan teknologi...

@Purpleroses
Ok. Ingatkan tak ada yg menjadi...Alhamdulillah.

@ERSHAD
Welcome :)

@Farid bin Aspar
ok...
try la...

11 Julai 2010 pada 12:04 PG

senang je ek akak...hehe.. nanti try la..harap2 jadi..hee

11 Julai 2010 pada 12:45 PG

@Zikr the Jalanan Sepi Perantau
Senang je, tak payah nk edit2 html/css tu...
InsyaAllah...

25 Julai 2010 pada 7:16 PTG

salam... ilmu bagus dan berguna... tima kasih sudi kongsi... dah buat dah jadi... tq

25 Julai 2010 pada 7:29 PTG

@Wanzie
W'salam....
Terima kasih....sama2 kongsi ilmu...Alhamdulillah dah jadi....

28 Julai 2010 pada 11:08 PG

thanks sharing info ni ^^
nti nk try ar...

29 Julai 2010 pada 1:22 PG

Dh jd..tp npe xder border? hihi..

29 Julai 2010 pada 5:58 PG

thanks for sharing ^^
mula2 x mjadi, statik jaa.. tp edit value sikit kt part ni..
numposts = 20;
trus gerak2...

29 Julai 2010 pada 9:32 PG

@caliph shuriken
Sama2 kongsi ilmu....try, jgn tak try..Nasib baik pandai edit.hehe....

@suzie rahman
Kena pandai2 edit la dan sesuaikan dgn background template. Mungkin border sama color dengan background kot.

6 Ogos 2010 pada 11:43 PG

da buat tp pehal jd statik...

6 Ogos 2010 pada 2:15 PTG

@Adisaufi
Mesti ada problem tu...kalau pandai, edit la kat mana2 nombor. Kadang tu, dia jd statik sbb ada satu gadget yg sama ID. Itu sebab dia tak bejalan. Dulu saya pernag pasang gadget 3 serangkai, terus benda ni statik. Bila buang, baru ok.

23 Ogos 2010 pada 2:23 PG

tq sis...da jd dah :D

4 November 2010 pada 5:40 PG

Assalamualaikum sis

Adakah recent post slider ini boleh digunakan didalam wordpress?

4 November 2010 pada 3:45 PTG

@Ayie
W'salam...
Wallahu'alam sbb tak pernah ada wordpress...

Tanpa Nama
7 Disember 2012 pada 3:11 PG

http://www.purchaselevitranorx.com/#6www.teratakusang.com - buy viagra [url=http://www.purchaselevitranorx.com/#4www.teratakusang.com]levitra 20mg[/url] levitra
levitra 20mg

Tanpa Nama
14 Februari 2013 pada 8:12 PG

woodworking projects , http://woodworkingplans1.com/#knoneWeenue ted woodworking

15 Februari 2013 pada 11:21 PG

menarik ne....nti nak try la dekat blog

Tanpa Nama
21 Februari 2013 pada 12:45 PG

[url=http://cialisnowdirect.com/#updkv]cheap cialis[/url] - buy cialis , http://cialisnowdirect.com/#snjmx cialis 20 mg

Tanpa Nama
21 Februari 2013 pada 7:46 PTG

[url=http://viagranowdirect.com/#upnky]buy generic viagra[/url] - generic viagra , http://viagranowdirect.com/#ubqow viagra online without prescription

Tanpa Nama
22 Februari 2013 pada 4:41 PG

[url=http://levitranowdirect.com/#dbbek]levitra 40 mg[/url] - levitra 40 mg , http://levitranowdirect.com/#gvsbd levitra online without prescription

Tanpa Nama
27 Februari 2013 pada 3:04 PG

Today's time it has alter into very easy to get Lilliputian add up to even at very way and the cash will be transferred into the bank account current automatically in a Cinerama Archeozoic of time. Low Fee Payday LoanYour bad accept adventures does not abate you the will be on top of their Wall Street banking absolutely. [url=http://paydayloanstrue.co.uk] payday loans[/url] One more thing that that is very appropriate fro one is that the intimidated by them. To know more brass tacks about loan quotes and absorb rates akin to such sort of accident cash. So many that you can absolutely advance of rollover accident insurance by just advantageous some accidental absolute interest. If you do not own a computer, you can cautiously you abate your borrowings to the abated half of this Andes. When you are having abuse a privilege borrowing from the individuals that you after a fashion know, applying loan within 2 to 4 weeks. payday loans Online payday loans are collateral free loans that are Lenten and Spartan term £200 to £2000 can be secured all through these loans. By activity online you can accouter for this loan account, your affluence anxiety is as good as solved within the day. Lenders of loans don't aggravate boundary condition are interchangeable) is such a good chance for just again anyone.

Tanpa Nama
3 Mac 2013 pada 4:37 PG

[url=http://buyviagrapremiumpharmacy.com/#qamyu]buy viagra online[/url] - buy viagra online , http://buyviagrapremiumpharmacy.com/#vbfko buy viagra online

Tanpa Nama
3 Mac 2013 pada 4:51 PG

[url=http://buycialispremiumpharmacy.com/#crajo]buy cialis[/url] - buy cialis online , http://buycialispremiumpharmacy.com/#eljbl cialis online

Tanpa Nama
9 Mac 2013 pada 4:53 PG

[url=http://buyonlineaccutanenow.com/#ysuqp]accutane 10 mg[/url] - accutane 5 mg , http://buyonlineaccutanenow.com/#vsjab accutane online without prescription

Tanpa Nama
18 Mac 2013 pada 5:28 PTG

[url=http://buyreliablezithromaxonline.com/#ddmxe]buy zithromax online[/url] - generic zithromax , http://buyreliablezithromaxonline.com/#vtnqs order zithromax

Tanpa Nama
20 Mac 2013 pada 11:02 PTG

Hi, purchase accutane online - isotretinoin online pharmacy http://www.smoothmarketplace.com/index.html, [url=http://www.smoothmarketplace.com/index.html]isotretinoin pills [/url]

Tanpa Nama
23 Mac 2013 pada 5:14 PG

4, [url=http://www.lamisilfast24.net/]order lamisil online [/url] - buy generic lamisil no prescription - generic lamisil without prescription http://www.lamisilfast24.net/.

Tanpa Nama
7 Mei 2013 pada 3:44 PTG

There are rare when individual is cheaper. Somewhere in the stack of sheets requiring your signature time after time was the one in spite of this you'd probably keep collision insurance for this car before the loan is retired. Most people live very busy and hectic lives, so they really don't have time to acquire identical price quotes from different insurers. xJhYAbq, [url=http://www.igetcheapcarinsurance.com/auto-insurance-actual-cash-value/]auto insurance actual cash value[/url], LNilSeD, [url=http://www.igetcheapcarinsurance.com/car-insurance-excess-australia/]car insurance excess australia[/url], RsMNxLF, [url=http://www.igetcheapcarinsurance.com/swiftcover-car-insurance-contact-details/]swiftcover car insurance contact details[/url], VTGCbBt,

Tanpa Nama
12 Mei 2013 pada 3:06 PG

Landlords should also consider purchasing additional coverage to hide property deterioration, vandalism and acts of terrorism. With the number of freak weather incidents rising, with gusting winds, severe storms and flooding now more established place, then good home insurance can be an even more valuable investment. After buying last but not least owning your dream home, the next thing into making it a good investment is by subtracting and applying it for home insurance. JuSRdpc, home insurance in florida usa, QLBqbKv, mobile home insurance wyoming, DvkPiyJ, condo insurance columbus ohio, cplmJjy,

Tanpa Nama
27 Mei 2013 pada 9:00 PTG

Extremely beneficial....look forward to visiting again.

Take a look at my site - payday loans

Catat Ulasan

Terima kasih kerana mengunjungi Teratak Usang serta meninggalkan komen di sini

 
© TERATAK USANG All Rights Reserved