.....

19 Animated Recent posts for blogger with thumbnails and Simple Spy



STEP #1 Log in to Blogger, go to Layout


page-elements

Add a Gadget of HTML/JavaScript type. 




Then add this code in to it:

<a href='http://bit.ly/work24'><img alt='Blogger Widgets' src='https://sites.google.com/site/bdlab12/24work/Blogspot%2BTutorial.png'/></a><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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8QQml6XeDbcmA-cWOsPncqXsWLinOqEF5ckKV3rwVs1kdbBxYK9oklP5qGX86154kXbAYmkDTpnebqYKJft4pdmmibkOrrxh7HjPwhpDnDRAH-dPv72Jk4TXEHqN9plpwTVsPQV7AqnC/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";



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://24work.blogspot.com/";







limitspy=4



intervalspy=4000







</script>







<div id="spylist">



<script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>



</div>

<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>


And now click Save


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://24work.blogspot.com/”;
2. Style


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



UPDATE:  I updated some of my posts, this post I update Animated Recent posts for Blogger / Blogspot with thumbnails - Simple Spy........

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

19 Responses So Far:

Unknown said...

hmm..
not working on me.. :((

Web Development Company said...

Simply got cleared with the codes thanks for the post. sure i'll update my blogger soon.

4bid said...

Hi.., I was put this post above to my widget themplate, but why the image is changed to the tynipic..?

RAVI ROSHAN said...

in this atutomatic update,,its not showing the image...

showing only this image in all posts

http://tinypic.com/images/404.gif

admin said...

@RAVI ROSHAN

this ok but you Customize picture

you can change below picture

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;



...............................................
you use this picture

http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png

RAVI ROSHAN said...

@ Admin

NO use sir,,again its showing "NO image"

the code is working fine with my blogspot...nd my co.cc domain

but its not working with my www.freezilla.in

help me in this case,,i will b thankful to u...

RAVI ROSHAN said...

@ admin:

for testing perpose i m using all codes here on

http://solosoftbase.co.cc/

have a look nd help me brother..

Surag Pathak said...

This is perfect!! Thanks a lot!

admin said...

@RAVI ROSHAN

I can't test this right now since I'm at work, but I will check this, it's perfect work

Ben said...

The tips and codes here are wondrous fear inspiring! This is the best blog I've ever stumbled upon. I followed the instructions, changed the homepage to my blog's, and it worked wonderfully! Each post displayed showed a thumbnail of an image in the post.

I wonder if there is any blog out there that can favorably compete with this. Yet, no ads!

I can't even leave a link to my blog here 'cos I'm now struck with inferiority complex.

Keep up the good work. Thanks a lot for sharing these unbelievable tips. This blog is my now homepage.

| Faizah Eiz ツ | said...

Thank You so much =)
I agree with Ben. Its is a great blog. =)

RAVI ROSHAN said...

bro... code is working fine... bt again having sme error,,
plz chk here on
www.freezilla.in

nd let me knw if u can

Anonymous said...

My name is Gloria. I'm from U.S. I like chatting on video. If you have a good personality and if you are between 18-35yrs please visit http://sexporn123.info/pic/girl16.php, see my photo , and I video chat. I am so lonely and need some fun with confident guy.

Sobia said...

Nice tutorial, thanks a lot for helping us.

Blogger Nusantara said...

permission to copy and a little editing to publish in my blog .. ;)

admin said...

@Tukang Coding

ok

Unknown said...

very useful article. thank you much.

Design Blog said...

thanks

Anonymous said...
This comment has been removed by the author.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger