Recent posts for blogger with thumbnails and Simple Spy
July 26th, 2009
Bismillah
Alhamdulillah, finally I made modification the widget from Bloggertricks.com and animation Simple Spy . Simple Spy style taken from Scarlet theme, results for wordpress can be found in this blog. View as below, For the demo on the blogger click :
For bloggers put into Sidebar Gadget(add gadget) select html, copy all html below to that gadget:
<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 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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:#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://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 = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.raudhatulmuhibbin.org/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :
1. homepage address
home_page = “http://name-your-blog.blogspot.com/”;
2. Style
#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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
from above style/css, you can change :
width
width : 220px;
width:208px:
customize base on your template
and
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
Customize the colors of backuground
3. image size
thumbwidth = 70;
thumbheight = 70;
Match your needs
4. How many post you will show
numposts = 10;
Base on what you need to show
128 Responses to “Recent posts for blogger with thumbnails and Simple Spy”
Leave a Reply
Alhamdullilah mas,matap….terima kasih
Alhamdullilah mas, mantap……terima kasih…
makasih kang abu…
I have a problem… I modified the code, so I’ve made something like this http://blog.dbasely.net
but I don’t understand why does the summary not work… just the date, title and thumb…. anyhelp?
Waiting for your reply. :(
Hi brother,
I use this Recent posts for blogger with thumbnails,but the problem is that it does not generate small thumbnail.it loads full image which makes pages to load slower.
please can you make a script to generate a thumbnail(I mean making thumbnail size 1kb or 2kb,currently it loads the full image)
Thank you for the very nice things to share widgets did.
Hi
Thank you for the Amazing tutorial
I got it but seem that I have small troulbe
I’m using jquery2.js and s3Slider2.js for my blog
and when I add this gadget it the new gadget works but the older one (use jquery2.js ands3slider2.js )does not work
so please help me to solve it
Thank you and keep writing
alhamdulillah..
ketemu juga..
udah 3 hari nyari, eh.. akhirnya nyangkut..
thx.
Alhamdulillah recent post sudah saya pasang dan ini sungguh bagus sekali dalam mempercantik blog saya.
Terima Kasih
Wassalamualaikum
Kursus Internet Marketing Gratis
kenapa ga’ jalan slidenya master
thanks for the widget..awesome!
Om… cara biar cuma gambarnya yg keliatan giamana?
jadi deskripsi sama yg lain2nya hilang… terima kasih
assalamualaikum abu…ijin pasang link n banner di blog saya…tapi kalo abu gak berkenan saya memasang banner blog anda, saya akan menghapusnya. Terimakasih abu.
Wa’alaikumsalam, silahkan
Terimakasih abu atas ijin nya.
thanks for you tutor,.,.
hi , i just installed ur widget but i m not able to change the colour and size of the text (link)
Please help me how to fix it. Thank u
You can try change css style
one more question
how to change the text colour of
Name of the post
Date
Comments
pls tell me
ok i find all things but pls tel me the size of back ground image in “pix” so i create in photo shop
sorry for irretating u
thx
how can i change the size of the box and bground colour
becoz my blog is black in colour if bg is image then pls tell wat is size of dat image & url
thx
is there any way to alter this script in order to only include posts with a specific tag? for example if i wanted to only include posts with the tag ‘construction’…thanks for your help
Actually can but I have to modify the script, maybe after my exam two weeks from now, Insya Allah I’ll change to Categorized way
hi Abu i m R.yadav . thanx for helping me but how can i change the box widh and bground colour . i want it in black becoz my blog is in black colour pls reply me thanx
Yes you can change from CSS, no need use background but give bakcground color, because font color is black you have to change font color is white
Askum,
Mas kalau pasang di widget wordpress gimana caranya ya? udah tak coba sendiri tidak bisa2 nih. mohon bantuannya… trima kasih sebelumnya.
Wa’alaikumsalam (afwan salam jangan di singkat)
utk WP emang belum ada, kalau di WP ana ini pake PHP emang belum ada pluginnya, Insya Allah kalau ujian ana selesai ana bikin plugin utk WP
he Abufarhan i want to a slider which you r added in your
sidebar above the featured so can u help me
This post is to make like my sidebar for blogger.com, you can try
great script! i have it insalled at http://www.heavymentalist.com and am about to install in at http://www.thelastnerve.com. instructions are simple as well.
Thanks for your widget… but I can’t see my images in the box :(
Why can I do?
Thanks again!
Your RSS feed setting used summary thats why the script can’t take the image, use Full Feed at blogger dashboard setting
Hallo!
Thanks a lot for this widget. But I’ve got a problem :(.
It works properly, but I can’t see the images. I don’t know why…
Can you help me?
Thanks a lot again!
Kisses
Your RSS feed setting used summary thats why the script can’t take the image, use Full Feed at blogger dashboard setting
Thanks for your quick answer, but I don’t understand :$.
I put my images from my Computer, is not a right way to do this?
Thanks again and sorry for the inconvenience…
Ohhh, I see now!!!!!
I understood, and it works ok!!!
Thanks a lot!!
mantap bos artikelnya, ini baru sip…
Terima kasih banyak, saya baru lihat juga ini widget di satu blog spanyol.
Paling cepat bisa, mau pasang di blog saya.
Salam kenal dari Barcelona (Spain).
Gildo.
Dear Abu Farhan
I have faced a problem when I am trying this tricks in my site. So I comment here but don;t know unfortunately it deleted. It’s ok..
When I am using this tricks then title coming but pic not coming there. I can’t understand the reason.
Pls tell me the solution.
I’m sorry your first comment not show in here because have two links my WP automatic not show that comment.
Problem for you blogger is becase you set your Feed in Summary not Full, change setting in you blogger dashboard for Feed Setting to become Full Feed
Thank you very much Abu.
It’s a really cool trick.
Here I hv set this script (Recent posts for blogger with thumbnails and Simple Spy), it’s working but showing NO IMAGE.
How can I solve this prob.
My site is: http://www.moviesworld4u.com/
Also noted that I have set it in my another blog where it’s going very well.
http://rapidsharedownload4you.blogspot.com/
hi friends.. such a cool widget! I’ll try this on my blog.. thx very much!
mas. kemarin saya pasang widget ini…lalu recent posnya bisa tampil dgn baik di blog saya. kemudian saya pasang recent comment yg dr blogger, lalu kok recent post yg dr mas abu gak bisa tampil lagi ya??..
walaupun recent comment bloggernya kemudian saya hapus, tetep recent post yg ini gak bisa tampil lagi…gimana atuh..??? :(
*padahal copas kodenya udah bener, apanya yg salah ya??
mohon pencerahannya..
Afwan, Dropbox ana ada masalah, silahkan ganti alamat yg dropbox dg ini
http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js
http://popular-post-blogger.googlecode.com/files/post.jpg
asslmlkm…
wah, sudah bisa dgn mulus nih recent post nya…
terimakasih mas…
Jazakallah khoiron …
Makasih kang, Jadi Recent Postnya bisa nampil nech
sama2 tapi skr dropbox masalah, jadi ganti alamatnya ke googlecode aja
makasih kang…jadi bisa nampil Dech Recent Postnya
Thanks it use OK you good job !!
boss Abu Farhan, gimana caranya ya biar yang di spy itu bukan comments ama postdate.. kalo mau ganti jadi label ama posted by gimana ya?
trus bisa ngak kalo label yang mau di spy itu hanya label tertentu saja..
Mohon pencerahannya ya..
thanks before..
Wah ini request lumayan harus ngutak ngatik js lagi, mungkin kapan2 bisa ana bikin, karena ada loop label itu yg agak males nambahnya
boss.. kalo cuman mau yang di spy itu bukan comments ama postdate tapi label ama posted by gimana ya?
Please use IE open my blogger up:iframe NG down:Normal load OK, but if use firefox all OK!!
my blogger: http://kimihu-test.blogspot.com/
Sorry, I’m busy, last time I check in IE browser have problem with css, I’m not expert for css so I have to check carefully, and problem IE don’t have Firebug so I have to chek manual.
I found the mistake not because CSS but Ms can’t read JSON perfecly have to write complete meta tag for utf , Download this http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/play.html I checked, it can use for IE 6
I test this css OK but change my home page set no picture!!
I’m sorry I can’t understand, where you put the script, you said before in iframe ?
I recently study iframe set,I don’t know this Gadget Can write html mode ? can you try Because I like this Gadget.
thanks
Yes this one can use in html directly you can try to make one html file and input that script with css
Note :If your template already have a jquery do not put again, just copy after it
after it, after dimana?
after <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
mantep boss.. kalau ngga salah ini asalnya dari blogger vietnam – pake table :D
cuman ada beberapa yg ingin ana tanyakan
1. date ama comment bisa sejajar ngga ( soalnya sy pingin nyimpanya pada kolom 160px )
2. terus kalau ingin menampilkan 10 post sekaligus gimana boss.. soalnya meskipum numpost di set 10 hasilnya tetap empat juga..
3. mohon pencerahannya sj dari newbie mas.. sebelumnya sukron atas petunjuknya
Pertanyaan tiga wah antum mah bukan newbie (baru aja klik link blognya). Ini kang Jaloee ya. Btw pengen ana bikinkan Page Navi kayak google ga ?
Aslinya males jawab, abis pura2 newbie :
1. Nanti deh tak edit scriptnya buat akang he..he..
2. wah pertanyaan mengena nih ternyata tutorial ana yg salah tulis, udah deh nanti tak ganti, gantinya di limitspy=4
Page Nav dari google wah mantep tuh kang :D .. jadi ngereputin neh .. aslinya kalau urusan javascript masih tebak-tebakan tidak seperti antum ..
Page Navi bentuk google dah jadi, kalau mau coba dulu yg normal Page Navigation for Blogger (Problems Solved) kalau bisa jalan nanti ana kasih script dan css page navi google
wah recent post kek gini emang bagus mas enak di lihat.. dah ana pake di blog lain..hehehe.. oh iya mas.. ttg page navigation itu apa bisa mengatur untuk jumlah archive-nya perpage ? kalau bisa mesti di tambahin apanya ?
sekalian izin ngepos ttg ini ?
oh iya.. Jazakallahu khoiran
Kehabisan thread Comment jadi di bawah.
Alhamdulillah semoga bermanfaat.
Mengatu jumlah perpage gimana khan udah ada Maximumnya udah tinggal isi dan disesuaikan dengan settingan di Dashboard.
Silakan kalau ingin ngepos soal ini.
Oh iya sudah ana kirim js dan css nya semoga bisa
tadi iseng nyoba Online Alhamdulillah bisa
http://contoh-page-navi-google-abu-farhan.blogspot.com
Semoga cocok sama boogle nya, ganti2 aja tuh imagenya ana cuman ambil dari google he..he..
Waiyyakum
Ana mah pake yg dr blogger ajah ahh, kan blogger udah ada buat recent postingannya Bos, trus yg baru ada jg tuh ttg widget dr blogger…pokokke blogger trus beubeunah bos…wuekekekekekkk (tak ambil trik yg gampang & ringan buat blog…LoL)
Wah kalau yg dari blogger kekurangannya pake Iframe coba deh perhatikan, Lagian ga ada animasinya.
Widget recent post bukan dari blogger tapi dari amanda, coba perhatikan baik2 deh.
Tetapi kalau antum bilang pengennya pake dari blogger aja biar cepat, kenapa blog antum buanyak bgt widgetnya dari luar blogger bahkan lambat bgt dibukanya, seperti calender dari phydeaux3 (ini jelas2 bukan dari blogger dan bikin lambat karena harus membaca semua postingan), Menu pake suprefish dan nyimpan jquery di ripway harusnya gunakan dari google aja utk jquery.( How to Use Popular Javascript from google ) dan banyak lagi.
waduh komentnyah dibales nih…justru itu BOS…kagak ngerti nih…ngomong banyak yg berat, tapi pas aku check di webtools sama yg lain2nya…gak jauh kok bedanya BOS…baca itu ahhh .. ihihihihihi How to Use Popular Javascript from google
gimana pakeknyah bos …. >.<
My blogger OK but blog speed slow…..^^”
maybe because you used two jquery in your blog and you put 50 recent posts to show in animation.
I mail to you thanks you help me !!
Tomorrow I’ll check
I mail my HTML file please help me EDIT because
i dont edit HTML …….thanks
ok you can send to admin@abu-farhan.com
my blogger add this but not moveing why?
In your blog you put three jquey in different place you have to choose only of that. The Simple spy can’t work because of that. I try to save your blog an try in offline it can work if only one jquery is use.
Hey Abu Farhan, every time I add this recent posts and recent comment script of yours onto my blog, it does not make my slider featured content run properly or it makes all the images on my featured slider fall down on my page. I am using your nice template Falknersphere that you converted from wordpress and for some reason, the slider always stops working once I add this script.
My blog is http://games206.blogspot.com/
maybe have var conflict between mootols (gallery) and jquery (recent post with spy) I have to check that script.
Btw its not recomended use jquery and mootools togather because your user have to download two big js file
http://www.sigmirror.com/files/26260_4oaqk/recentpostthumbspy-min.js tidak bisa diakses boss
Bisa di akses kok, coba aja demonya
kodenya nggak bisa muncul diblogger….
Nggak bisa muncul gimana ?, harusnya bisa sesuai dengan demo, bisa tau blognya apa biar saya lihat.
alhamdulillah pesanan sudah jadi, tinggal ngepas.. jazakallah khair. (Lg mikir pesanan selanjutnya) :d