Blogger ada menyediakan widget recent post yang memaparkan posting posting terkini.Recent post ini memaparkan thumbnail juga jumlah komen pada posting.Tapi kekurangan nya adalah bersifat statik.Recent post ini bergerak ini lebih menarik perhatian pengunjung untuk melihat artikel artikel lain yang ada pada blog kita
Caranya:
untuk dashboard lama:
Masuk ke Design:
Pada Page Element-Pilih Add Gadget
HTML/Javascript
Untuk dashboard baru:
pilih Layout--add a gadget -- HTML/Javascript
Dan masukkan kod dibawah ini:
<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh3.googleusercontent.com/-9407gMGSNm4/TY2F3Ydsu1I/AAAAAAAABqo/uijW48xcpv0/s1600/teknikbuatblogblogspot-com.jpg) 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:#A9A9F5;
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] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[1] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[2] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[3] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[4] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/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 = "http://teknikbuatblog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" 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 url(https://lh3.googleusercontent.com/-9407gMGSNm4/TY2F3Ydsu1I/AAAAAAAABqo/uijW48xcpv0/s1600/teknikbuatblogblogspot-com.jpg) 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:#A9A9F5;
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] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[1] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[2] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[3] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[4] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/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 = "http://teknikbuatblog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
Dibawah ini adalah kod bagi anda yang inginkan widget ini dalam bentuk yang lebih kecil untuk disesuaikan untuk sidebar yang ruangnya agak terhad.
<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:3px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:148px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:145px;
padding: 1px 1px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#fff url(http://2.bp.blogspot.com/-p-XwE0kTrbc/TVtsnJO6LFI/AAAAAAAABW8/bnFmpyHz8Ug/s1600/back2.png) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:2px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[1] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[2] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[3] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[4] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://teknikbuatblog.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:3px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:148px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:145px;
padding: 1px 1px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#fff url(http://2.bp.blogspot.com/-p-XwE0kTrbc/TVtsnJO6LFI/AAAAAAAABW8/bnFmpyHz8Ug/s1600/back2.png) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:2px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[1] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[2] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[3] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
imgr[4] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://teknikbuatblog.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
#Jangan lupa gantikan url blog saya,teks berwarna merah diatas dengan alamat blog sendiri.Kalau nak kecilkan size ubah pada kod warna hijau


Catat Ulasan
Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.
71 Comments:
@ayie4630kalau dah ada pasang jquerry pada blog,abaikan baris pertama dan kedua pada kod.
menarik2. nice sharing bro. thanks.
nice tutorial!
Terkini : Rumah Berbentuk Telur
tq, nice info. nk try sat
tq, dah jadi.
rasanya ketika mula2 memasang widget ini tidak timbul masalah statik...
Blog Baru (2010) Pilihan??? kalau berbesar hati untuk undi saya. UNDI N0.108. nak tahu lebih lanjut? tekan sini
http://miela-tahril.blogspot.com/2010/12/blog-baru-2010-pilihan-undi-no108.html
terima kasih kerana sudi meluangkan masa :)
kenapa akyn buat x jadik??
@..:akyn:..mungkin ada silap masa copy...satu tanda koma ; saja tertinggal tak jadi..cuba semak kembali
@yahaya
saya dah try banyak kali.. tapi still x ley..
camne ek??
nice :)
@..:akyn:..saya encode semula kod diatas cuba lagi..saya dah cuba ok..
dulu pernah pasang
P/S : Kenapa Perlu Diadakan Benda Yang Tak Pernah Wujud?
@yahaya
yeah!! dah jadik.. tengs yahya... :)
napa x jadi erk pu3 wat??
alhamdulillah dah menjadi.. :) terima kasih atas tutorial ni..
hehehehehe...terims kasih....dah jadi la....alhamdulillah...
dh bwat..thnx!!XD
@biskutsetiap org ada minat tersendiri...
assalam..saya punye pon tak bergerak...nape erk en.yahya??
@SyilAdlinsaya cuba dgn template dari blogger ok tiada masaalah.mungkin ada kod pada template yg menyebabkan ia tidak bergerak,
Terima kasih sbb bg tutorial..
tp kenapa dalam sy punye blog saiz nya agak besar....
@Atika Noursaya dah ubah ukuran untuk letak kat blog saya.jadi kecik..sebab sidebar tak muat...boleh ubah pada kod spylist ul dan spylist li..ubah pada width aya letak 140px dqn 135px
yahya saya tak berjaya melakukannyalah...satu lagi apa maksud yahya jquery. tq
@wafimamap3baris no3 dan dan 4 adalah kod jquerry.buang kod tu kalau tak boleh..saya letak diblog ini dan blog saya yang lain tiada masaalah.Masa copy kod pastikan tiada kod yang tertinggal.
MACAMMANA NAK BUAT WIDGET ANIMATED TUK POPULAR POST???
bagaimana saya nak buat widget animated pada mybloglist....
Sangat2 berterima kasih!!! :)
@wafimamap3
bloglist guna marquee..lihat tutorial membuat teks berjalan
mekasih yea.. :)
terima kasih... ibu dah ambil widget di atas, minta dihalalkan
saya dah cuba buat yang ini, tetapi kenapa gambar tidak keluar bahagian kotak gambar keluar TINYPIC the image has been removed or deleted.....kenapa yea jadi begitu? harap bantu
terima kasih
@Syieda
saya dah betulkan bahagian dimaksudkan..
hi..Syieda lagi..saya dah cuba buat ikut kod baru, tapi masih tak boleh keluar imej..keluar kat kotak tu No Image Available..kenapa yea... terima kasih
@Syiedaimej pada posting tiada akan keluar No Image Available
Terima kasih ye...
daa lame saye cari care nk buat ni. lastly jumpe jgak. thanx for the info :)
sy berjaya... thanks.. :)
tq ye bro!dulu kite dah buat tp ada mslh tiba2.ni sggh sini nak add widget ni semula.tq ye!
nice..thanks
thnks utk code kt ats ni. mmg tgh cari. dan ianya berhasil.
apesal buat widget ni xbegerak ek?
@farysaada widget atau kod pada template yg menyebabkan ia tak bergerak..
bagi saya yang baru belajar.. blog anda banyak membantu. terima kasih.. =)
dah buat dah..tapi dia punye tulisan alignment dia jadi centre plak..camne nak left kan dia?
@M.Z's Sitedari apa yg saya lihat pada blog saudara rasanya ok dah tulisan tu.
alahai x gerak aaaaaaaaa
@aimanimanmungkin ada kod lain yg menyebabkan ia tak bergerak..
Ass.Alaikum...Posting (Tutorial) bagus dan manfaat, coba saya aplikasi ke blog saya...Yuk ditunggu kunjungan baliknya N sayajuga sdh pasang Link bannernya..salam sukses :)
tq for this tutorial...
Singgah sini....Blog nie bagus la....semua cara2 nak buat blog ada...
terima kasih, sy dah ambil widget diatas tu..
trima kasih :)
Artikel menarik, its work terima kasih sob
terbaik..............
thanks! =)
kenape statitk je??? x animated pon
http://usharemine.blogspot.com/
help me ! nape ble tkaq url blog sy , jd xtmbul .
@ifah dafilamungkin jquerry dah ada cuba remove kod <script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
ble xubah url blog 'teknikbuatblog' ia b'fgsi jer . tp ble tkaq url blog ifah , ia xb'fgsi . ap yg xkne ea ??
@ifah dafilakalau mcm tu mungkin ada salah pada url blog
Saya sudah buat...dan berhasil. Tetapi tidak ada gambar foto nya " No image available"
bagaimana menampilkan fotonya?
@Arinmas Redimej akan keluar jika posting kita ada imej bersamanya...
Salam.
Sy dh follow semua tapi bila nak save dia takde respon.
Bila sy save tanpa tukar ke link blog saya, boleh pulak.
bila sy edit dia degil balik.
macamana eh?
@Murnisaya x pasti sebabnya mungkin masaalah dengan browser atau kod lain pada template yg membuatkan ada masaalah
trima kasih :)
Terima kasih sangat2...blog yang amat membantu..
Asalam..
Bagaimana cara nak remove ruang lebih [bila tak aa letak tajuk widget]diantara 1 widget ke widget yang lain kat sidebar.?
ble tak ajarkan?
@Numa BAPw/salam...
satu soalan yang baik,saya akan buat tutorial nanti...
thanks yer for this tutorial..:)
TERIMA KASIH ;)