Bismillah, Alhamdulillah

Skip to Content

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 :

Demo

image

For bloggers put into Sidebar Gadget(add gadget) select html, copy all html below to that gadget:

image


<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


Categories: Featured, Tips and Tricks Blogger, Widget

Tags: ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Trackback
Leave a response

128 Responses to “Recent posts for blogger with thumbnails and Simple Spy”

  1. wasay says:

    its not working on my blog please help….images are not showing up

    http://addictivegadgets.blogspot.com

  2. wtext says:

    Thanks, excllent.

  3. azwar says:

    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

    • azwar says:

      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

  4. moch.erfan says:

    hi bro, can you make that to black background n light text??

  5. winong says:

    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.

  6. irtiyah says:

    Salam

    Terima kasih. Menjadi.

  7. Diep says:

    I want using it for Label, Abu Farhan please help me!
    Thank you very much!

  8. harfehesaab says:

    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.

  9. Help says:

    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?

  10. luxonalex says:

    Terima Kasih Banyak..
    It’s work,,
    Mohon di kabari Bila ada yang untuk wordpress

    Salam

  11. joudie says:

    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

  12. Afiq says:

    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.

  13. ina says:

    thanks for this tutorial :D

  14. joudie says:

    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

  15. duadua says:

    om abu, script yasng ini kok gak bisa ya?
    yang salah apa?

  16. Richard says:

    Hello, the code is not working. It seems that the java code is down. Please place to download.

  17. WHY ISLAM says:

    PLEASE SOMEONE GIVE ME A CLUE, ON MY SITE IS NOT SLIDING WHY, FRIEND OF MY HAVE SAME TEMPLATE NO PROBLEM ON HIS SITE.

  18. WHY ISLAM says:

    I MEAN NOW IS OK

  19. WHY ISLAM says:

    IS OK NO THANK YOU LADS

  20. WHY ISLAM says:

    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/

  21. Ilia says:

    Why stop work , was perfect

  22. HD MOVIES says:

    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

  23. [...] Recent Post With Thumbnail and Simple Spy: Many would have seen simple spy (fade in post scoller) in some design, this widget makes that [...]

  24. WHY ISLAM says:

    Asalam,Alaykum
    Thank you for the widget, it realy looks nice on my blogger.
    how should I expand the width? please thank you.

  25. Boltushka says:

    it is so usefull for me. thank you

  26. Zaiza says:

    Upss !! thank’s ya saya dapat inspirasinya, saya add ya.

    salam

    zaiza. yusuf

  27. assalamu’alaikum….

    alhamdulillah,….saya pake dalam blog saya walau dengan ala kadarnya tanpa modifikasi (karena keterbatasan pengetahuan). Tapi cukup bagus….

    syukran !

  28. Hendra says:

    thx 4 sharing yach…:)

  29. dil says:

    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

Leave a Reply

Copyright 2009 - 2010  Choen