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
204 Responses to “Recent posts for blogger with thumbnails and Simple Spy”
Leave a Reply
genial gracias compañero me sirvio
Hello, could you help me?
I was wondering if you can put the Recent posts within the post and if you can put them to appear next to the other one, instead of being under each other.
Thank you very much
http://www.womenguccishoes.org/
Hi there, I can’t recognize how to add your site in my rss reader. Will you Allow me, please
When are you going to post again? You really entertain a lot of people!:)
i will try this trick…. please give suggestion
At first it was not working for me. But somewhere i read that we have to set feeds as full(in blogger settings), so i did that and was working fine but again now i want to set my blog feeds a short…what to do please help me….
Great script! Thanks Abu
Great! Thanks for your trick!
thanks abu farhan..
assalamu’alaikum..
HI, I have a problem with displaying a preview to posts.
Instead preview shows here these pictures here.
————————————-
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;
——————————-
Do not tell in what could be the problem?
Sorry for my English:)
Hi abu! thx for this great script! I must to ask you a thing:
Why some month are displayed well (like October=Oct) but some others are not (like September=09). I didn’t do any modify to your script…
AOA,
Thanks for sharing this amazing trick, I added this to my blog, it working but it not show the text, can you pls help how to show text with pic.
Thanks
Thanks, excllent.
Asalmu Aleykum Abu Farahan
I have been useing your spye widget but today it saying somthing upgrade (Bandwidth Exceeded), could you feeds us what went wrong please, I thank you in advance.
That’s surely a good post. An guideline similar to this reveals just how intensely the idea is known by the publisher.
Dear friend,
After long searching I had Put your CSS templates to watchable for my viewers with slide show.
Thank you very much for your extra ordinary work.
Hello,
I have a problem that is bothering me for days.
I’ve instaled on a “Test” blog the Falkner Shine Template and before that, other Templates that have a feature content, your “Recent Posts” widget.
Ok, the problem is that, when i put this widget the slideshow from the featured content stops. This is also happening with a few more widgets and i beg to tell me why, because i’m loosing my mind :))
Thank you and contrats on your awesome blog :)
Mihai
Hi, nice widget!
Only one doubt: is there any chances you can modify it to not deform de aspect ratio of images?
is it very complicated?
Thanks a lot!!
Is there a way to get a summary of the posts to show up under the title and next to the picture?
Error:
chrome://browser/content/tabbrowser.xml:338
its not working on my blog please help….images are not showing up
http://addictivegadgets.blogspot.com
Thanks, excllent.
hello there :)
i have tray the widget, and it’s work. but, image (thumbnail) doesn’t appear. So, can you help me ASAP?
you can reply my answer via email.
Thanks.
Azwar
After read all comment in this post, i find similar problem with me. if someone have same case with me (images/thumbnail doesn’t appear) just setting your RSS feed ‘FULL’ in your dashboard (site feed).
Thanks Abu
hi bro, can you make that to black background n light text??
assalamualaikum brother abu farhan,
i really love this widget. it’s very nice. the problem is it could not run smoothly on my blog (livinghealthy21.blogspot.com). boxes overlapped each other. would you help me, please? i’m using mozilla firefox. is it possible to deactivate spy feature an run this widget in static mode? thank you in advance.
(saudara abu farhan, saya sangat menyukai widget ini. sayang, fitur spy-nya tidak berjalan mulus di blog saya (livinghealthy21.blogspot.com). box-boxnya saling tumpang tindih. mengapa ini terjadi? dapatkah saudara membantu saya? saya menggunakan mozilla firefox. mungkinkah untuk menonaktifkan fitur spy-nya? terima kasih sebelumnya.
Salam
Terima kasih. Menjadi.
I want using it for Label, Abu Farhan please help me!
Thank you very much!
Dear Abu Farhan
Apparently I have sent my comment on the wrong post. It is this widget that I want to use and I want it to show the summary of the post too. Could you please help. I will be checking my email for you response. Thanks.
It works! BUT, when I change the URL from “http://www.raudhatulmuhibbin.org/” to my blogger URL, nothing appears though it still takes up the same space as when it appeared using your URL. HELP?
Can I see your blog ? maybe you pot wrong url or you not active your feed
Terima Kasih Banyak..
It’s work,,
Mohon di kabari Bila ada yang untuk wordpress
Salam
Hello Abu Farhan. I have managed to get the screen up an dpost with pictures but it is not scrolling. What should i do now. Thank you
Salam ya om Abu Farhan,
Harapnya om abu sudi tolong masalah gue.
Gi mana sih mau buat easyslider1.7 untuk menunjuk “Random Image” instead of “show all gallery video” dari setiap posting seperti om punya simple spy?
atau mungkin om boleh buat om punya simple spy jadi seperti easyslider, ada scroll button dan vertical sliding?
terima kasih.
maaf maksud gue horizontal sliding, bukan vertical sliding ya om.
thanks for this tutorial :D
Hello, can you please help. I am not seeing any pictures, and also there is no scrolling. Also i wanted to ask you is there any way we can change this to make it just the picture. And whn you click it it takes you to relevent post. Like this website http://www.noobcook.com.
Thank you
om abu, script yasng ini kok gak bisa ya?
yang salah apa?
Silahkan pake link ini http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js
om, masih gak bisa..
dulu pas dipasang bisa.. tapi sekarang kok gak bisa ya?
udah bisa om, hehe
thankyou2
Hello, the code is not working. It seems that the java code is down. Please place to download.
its not working for me either.. but the widget is runing for allmost every one els.
tjek ex WHY ISLAM .. his is working fine.
mine does not work.. and i cant understand why.
plz advise abu
heh well i got it to work. i uploaded the js files on my server.
Use this link for js file http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv100-min.js
PLEASE SOMEONE GIVE ME A CLUE, ON MY SITE IS NOT SLIDING WHY, FRIEND OF MY HAVE SAME TEMPLATE NO PROBLEM ON HIS SITE.
I MEAN NOW IS OK
IS OK NO THANK YOU LADS
Hi Abu Farhan please help me why the spy widget it be come invisible. I removed it fix me up.
please Thank you this is my link whyyislam.blogspot.com/
Why stop work , was perfect
IS OK NOW IS BACK ON THANK YOU LADS
HI, I HAVE EMABDED THE CODE TO MY BLOGGER BUT IS NOT SLIDING PLEASE HELP. I DID TO MY FREIND BLOGGER VERY GOOD, AND WE HAVE THE SAME TAEMPLATE.
THANK FOR YOUR HELP
[...] Recent Post With Thumbnail and Simple Spy: Many would have seen simple spy (fade in post scoller) in some design, this widget makes that [...]
Asalam,Alaykum
Thank you for the widget, it realy looks nice on my blogger.
how should I expand the width? please thank you.
it is so usefull for me. thank you
Upss !! thank’s ya saya dapat inspirasinya, saya add ya.
salam
zaiza. yusuf
assalamu’alaikum….
alhamdulillah,….saya pake dalam blog saya walau dengan ala kadarnya tanpa modifikasi (karena keterbatasan pengetahuan). Tapi cukup bagus….
syukran !
thx 4 sharing yach…:)
what can i do if want the slider to show spefik labels only.it shows all ur recent posts.
what can i do for it to show only from one label?
plz advise
Salam…Dil and others… There’s actually a way to display selected label. But… you have to modify the jScript and upload it elsewhere.
1. Change this from the code above
…
icon2 = " ";
numposts = 10;
home_page = "http://www2.blogger.com/feeds/6046578068585314330/posts/default/-/iklan";
limitspy=4
intervalspy=4000
...
home_page = “http://www2.blogger.com/feeds/6046578068585314330/posts/default/-/iklan“;
Open your dashboard and replace:
i. 6046578068585314330 with your blog id.
ii. iklan with your desired post label
2. Download the jScript ( http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js )
find this code (the last code):
');
and change it to:
');
Good Luck (“,)
Sorry for the missing (last) code:
Change:
...
script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"
...
To:
...
script src="'+home_page+"?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"
...