Dah lama rasanya aku tak kongsi tutorial ni..bukan tak nak..tapi tak kemampuan lagi..hehe..dan tak ada sebarang request..so..aku assume..tak ade ape yang nak ditanya lah gitu..tutorial ni, aku buat untuk someone yang nak sangat tahu camane nak buat recent post/entri yang korang leh tengok contoh dekat blog aku ni..

          So atas request..aku nak tunjuk/ajar la sikit camane..sharing is caring rito?..bukan berkurang pun ilmu kalau berkongsi..kan?..so kalau korang-korang yang nak aku buat tutorial pasal something..jangan malu bertanya..kat formspring ade..kat email direct kat aku pun ade..selagi aku boleh membantu..aku bantu...

 1st sekali. buka notepad..copy code kat bawah ni..paste dekat notepad...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /> <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:220px; overflow:hidden; float:center; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:200px; padding: 2px 2px; margin:0px 0px 5px 0px; list-style-type:none; float:center; height:70px; overflow: hidden; background:#FFFFFF; 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:10px; background:#EFEFEF; 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><br /> <script language="JavaScript"> imgr = new Array(); imgr[0] = "link gambar1"; imgr[1] = "link gambar2"; imgr[2] = "link gambar3"; imgr[3] = "link gambar4"; imgr[4] = "link gambar5"; 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://LINKBLOGKORANG.blogspot.com/"; limitspy=4 intervalspy=4000 </script><br /> <div id="spylist"><script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script><br /> </div>

2nd...edit yang mana patut..erm..korang boleh edit part berikut mengikut kesesuaian:
- "link gambar1" dan seterusnya...letak lah link gambar kat sini..gambar yang korang nak di appearkan dekat tepi post nanti. dan seboleh-bolehnya..jangan besar ye..lambat nak load nanti...
-thumbwidth = 70 lebar gambar yang akan appear..
-thumbheight = 70 tinggi gambar yang akan appear..
-summaryFontsize = 10 saiz font..
-summaryPost = 40 panjang tajuk entri yang akan appear..
-limitspy=4 tu korang leh ubah..kalau nak 5yang appear..ganti dengan 5.
-intervalspy=4000 lak korang leh ubah speed..so..cuba-cuba adjust mengikut kesesuaian.
-edit dan gantikan LINKBLOGKORANG.blogspot.com dengan link blog korang..

3..copy code yang selesai dimodify tuh...

4. Login akaun blog korang..amek Layout > PageElement > Add a gadget > Html/javascript.. paste dekat situ code yang korang dah siap modify tadi..

5. Save..dan view la blog..

Selesai Recent Post korang..^_^ Selamat Mencuba..sebarang pertanyaan..macam dah cakap tadi..so..enjoy~

Tweet