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
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