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: Blogger Tricks, Featured, Widget

Tags: ,

Enjoyed this Post?

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

Donate towards my web hosting bill!

Trackback
Leave a response

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

  1. skyboyz says:

    the widget is for vertical, how to make it horizontal??can u please help me by send me the Code to my mail here please..mulphsykoz@gmail.com

  2. man … why my recenst post weren’t ane thumnail ??? it was just a text link ???

    Please help me to solve this probelm !!!!

  3. [...] is great trick to Recent Posts for Blogger with Thumbnails Animations and this tutorial from Abu Farhan. You know Abu Farhan? He is  programmer, hack and trick for blogger. Click [...]

  4. Hi Abu,

    Your an amazing tutorial hack for this one in our reviews in Best Blogger Widgets 2012
    http://www.dbestlists.com/featured/best-blogger-widgets-2012

    Thanks. :)

    Warm Regards,

    DbestLists.Com

  5. Cedric Brar says:

    Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  6. This is not entertainment as such, but you can see why comments like this have people confused. From Mike Jewvero at Whatreallyhappened.com-

  7. Lan Grenfell says:

    Glad you got to the 2-tier justice system at the end. That’s a whole other topic, but worthy of discussion as well. ways to travel

  8. abu jquery saya tidak jalan .
    tadi sih pas pertama2 copas bisa .
    ehh pas abis ane otak atik html jadi gk bisa ?
    gimne solusi nya

  9. numus says:

    abu ini kita gk bisa milih artikel nya sendiri yah ?

  10. karim says:

    Buen gadget pero Lastima que funciona solo en la antigua version de jquery,( jquery/1.3.2 ) con la nueva version (jquery/1.6.4 )no funciona .

  11. [...] Abu Farhan. This will show or hide your widget on your sidebar. A first of its kind for blogger. 8. Recent Post With Thumbnail and Simple Spy: Many would have seen simple spy (fade in post scoller) in some design, this widget makes that [...]

  12. Eris Tiyan says:

    Mas Abu Farhan, terima kasih sebelumnya atas widgetnya, tapi ada yg mau saya tanyakan nih Mas, ini widgetnya hanya bekerja di jQuery 1.3.2 saja ya Mas? karena saya coba ganti jQuerynya pake yg terbaru sekarang http://code.jquery.com/jquery-1.7.min.js efeknya gak mau jalan :( dan di blog Saya hanya ada satu jQuerynya, ya jQuery yg terbaru tadi Mas.

    mohon pencerahannya Mas Abu Farhan. Terima kasih.

  13. endy says:

    it’s work! but why the image doesn’t work? my Jqury not showing the image can u help me? please

  14. babblemint says:

    its work!!!!! thank abu- farhan

  15. adigt says:

    assaalamualaikum…
    ..mw nanya nehhh
    cara masang nya sudah pi kenapa ngak mw yea???
    ,,,
    jquery nya mesti ada brapa ,and gmna ngapus jquery yang berlebih???

  16. Shashank says:

    This doesn’t work from Jquery 1.4 and above. Probably due to the change in treatment of JSON calls. Could you please do something about it?

  17. mohamed says:

    looks realy great, i ws wondering how can i make this to work for videos thumbnail, is it possible?

  18. anil says:

    how to modify this script works with selected labled posts sliding …

  19. mm202011 says:

    Подскажите, пожалуйста, что в этом скрипте нужно изменить, чтобы он работал так, как мне нужно. Нужно сделать так, чтобы при наведении курсора мыши движение останавливалось, а когда убираешь курсор, чтобы движение возобновлялось.
    Вот два ресурса где я это нашел :
    http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html

    $(document).ready(function(){
    var first = 0;
    var speed = 700;
    var pause = 3500;

    function removeFirst(){
    first = $(‘#listticker li:last’).html();
    $(‘#listticker li:last’).remove();
    addLast(first);
    }

    function addLast(first){
    last = ”+first+”;
    $(‘#listticker ul’).find(“li:eq(4)”).animate({ opacity : 0}, 1000, function () {
    $(‘#listticker ul’).prepend(last);
    $(‘#listticker li:first’).css({opacity: “0″}).slideDown(function(){
    $(this).css({opacity: 1}, 1000);
    });
    })
    }
    interval = setInterval(removeFirst, pause);
    });

    • mm202011 says:

      Can you please tell that this script be modified to work the way I want. We need to do so when the mouse movement stopped, and when to remove the cursor to move resumed.

  20. Zohaib says:

    Abu Farhan,
    Can you please give me static version of this widget ? Everything is just superb but i dont need animation.

    Please…

    Thanks

  21. Tuyul says:

    Abu ini untuk wordpress nya ada nggak?

  22. [...] from Blogger Stats . Now I made Popular Post for Blogger with animation. This widget I made from my Recent Post with animation using simple spy. [...]

  23. Luv Game says:

    Nice tutorial…..it works dude!
    thax

  24. rahman says:

    friend why how the application will not run ya … please help.

  25. Very nice! Thanks a lots from Italy

  26. Basharat says:

    I’m Speechless, You done a great job , Thanks is not enough word .

  27. RAY says:

    hi… Just want to say that it’ll be great if make a “popular post” version with simple spy and sliding effect like this.

    Kudos for ur works…

    RAY

    • mm202011 says:

      Good day, Abu Farhan. Very nice widget, but maybe I will not be able to install it. I have a similar script. If you choose to help me improve it. Make it so that when the mouse scroll ostnavlivalas. For a man who knows a few minutes. The script is not complicated. If soglastes help. I will send you a code or even source files.

  28. Horier says:

    how i am stupid..this one more look great before the last, thanks

  29. Wonderful says:

    Fantastic go through since I had been uncertain what direction to go and easily uncovered my personal solution :-)

  30. otodeluxe says:

    Very interesting post! THank you

  31. ahmed says:

    Hi,

    I really like the widget “Recent Posts with Thumbnails for Blogger”. However, it is vertical and I need it to be horizontal. Can you please help me figure out what the edit in the code to make it appear horizontally?

  32. can says:

    Thhnks my brodher…

  33. This is really cool trick. It is working for my one blog( http://mustdwnload.blogspot.com ) but not working for other one
    (http://discoverdreamland.blogspot.com)
    In my both blogs JQuery is pre installed. So i escaped that script. So can you suggest me what should i do now ??
    Thanks

  34. This is really cool trick. It is working for my one blog( http://mustdwnload.blogspot.com) but not working for other one
    (http://discoverdreamland.blogspot.com)
    In my both blogs JQuery is pre installed. So i escaped that script. So can you suggest me what should i do now ??
    Thanks

  35. yopi says:

    hanya tiga kata abuu… mantab..mantab..mantab…

  36. Iwthink says:

    hai…
    tolong mas liatin blogq dong, kenapa waktu naruh widget ini slideq gak mw jalan..
    plisss…

  37. Sweet says:

    Alsalam Alaykom,

    Allah yejzeek alkheer for the widget, it is great, works fine in my blog.

    Is it possible to change the posts from recents to random, could you please tell me how.

    Thanks a lot.

  38. vad ca blogul nu merge cum ar trebui cu IE9 se poate remedia?

  39. coach outlet says:

    the best way to support japan.breathtaking suggestions you have How to support the persons of the Japan earthquake.We all will get Discount Coach Handbags.desire people fine and pleased

  40. hiiiii…salam bro
    look at my blog itz not working…plz help

  41. rahul singh says:

    thank you soooo much abu bhai kudos to your hard work…

  42. Just desire to say your article is as astonishing. The clarity in your post is just excellent and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the gratifying work.

  43. Patty says:

    Hi dude I have found this code very helpful and thrilled but i need some more clarification about thumbnail photo url for the post. For showing the thumbnail of the post what should i give in the html code. I have pasted this html code with some little changes like home address. please forward me the help.

  44. This is a great piece of code! Thanks so much for sharing!

  45. uMMa says:

    it’s great mas…
    but how..
    if i wanna put the thumbnail in horizontal not vertical??
    i’ve tried to edit, but i’m failed:(
    would u help me?
    thanks a lot btw..

  46. Boja Linuxer says:

    OK.. artikel bagus.. masuk dalam daftar bookmark untuk perbendaharaan.. makasih infonya ya.. :)

  47. AirFie says:

    my question is same as above,
    but can I remove the picture

  48. suresh says:

    Hi. Can you please tell me how to stop the animation. i just want 4 recent posts and i dont want one disappearing and the next one coming. i just want 4 recent posts.

Leave a Reply

Copyright 2009 - 2010  Choen