Animated Recent posts for blogger with thumbnails and Simple Spy

STEP #1 Log in to Blogger, go to Layout

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/AVvXsEgbbFIkDKbj8acXelwb8GReTirL831VGXLTEPrRf0oVJiF7mb5iFtpi0DLFKLAJel1Lz_14Bjso1qb9Ws25pj_LfNxkLcPgmKn3XtfmE4wh8eBiF18SHvXfEsFSgIsA0rO8zowKKq9_SI41/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/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";







imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";







imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";







imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";







imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/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;

or background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbFIkDKbj8acXelwb8GReTirL831VGXLTEPrRf0oVJiF7mb5iFtpi0DLFKLAJel1Lz_14Bjso1qb9Ws25pj_LfNxkLcPgmKn3XtfmE4wh8eBiF18SHvXfEsFSgIsA0rO8zowKKq9_SI41/s1600/bdlab-blogspot-com.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

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

Scrolling Title in Browser title bar for blogspot

One of the most common uses of JavaScript is to create a scrolling message in the browser's status line. You can create a scrolling message using the string methods you have learned in this hour.

To begin, you'll need to define the message to be scrolled. You will use a variable called msg to store the message. To begin the script, initialize the variable (feel free to choose your own text for the message):

Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template

<head>

And immediately before it, paste this code:

<script type='text/javascript'>
//<![CDATA[
msg = "==>Blogspot Tutorial<==";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Now click Save Template 

How to Make your Blogger Blog ready for Mobile Phones

As you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

1. Sign into your Blogger account > Design > Edit html

2. Search (Ctrl+f) for the following line (it will be on top side)

<b:include data='blog' name='all-head-content'/>

3 .Now after this line add the following code -

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Now click Save Template 


4. That’s all, now your blog is mobile compatible and will load faster for mobile users.