Animated Recent posts for Blogger with Thumbnails - Simple Spy

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.

Live Demo

How to Install Animated Recent posts for blogger with thumbnails and Simple Spy

Now let's start adding it...


Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.


Step 4. Now Click On Save 'JavaScript' You are done.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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/AVvXsEhr6o6ZDHZ7HNrKp6xeJi2_69yJJTcVHyonZFu8isHHvw2qXDAb-DFLgiH9NPyoHmbMtwMMRoo0Pe4c5J2PhftOSZHP2WA9Oj2M06HF6aR3FjnCl2JMFqJQ56gwF4JLTvMsmfY4THK6nHI5/s1600/24work-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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/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://bdlab.blogspot.com/";



limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script>

</div>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

1. homepage address

home_page = “http://bdlab.blogspot.com/”;


2. Style

from above style/css, you can change :


width : 220px;

width:208px:


customize base on your template

and

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6o6ZDHZ7HNrKp6xeJi2_69yJJTcVHyonZFu8isHHvw2qXDAb-DFLgiH9NPyoHmbMtwMMRoo0Pe4c5J2PhftOSZHP2WA9Oj2M06HF6aR3FjnCl2JMFqJQ56gwF4JLTvMsmfY4THK6nHI5/s1600/24work-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

Stylish Scrolling Recent Posts Widget For Blogger

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6o6ZDHZ7HNrKp6xeJi2_69yJJTcVHyonZFu8isHHvw2qXDAb-DFLgiH9NPyoHmbMtwMMRoo0Pe4c5J2PhftOSZHP2WA9Oj2M06HF6aR3FjnCl2JMFqJQ56gwF4JLTvMsmfY4THK6nHI5/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


You Can Also CUSTOMIZE The CODE According to Your Need

numposts = 10; Total number of posts which you wants to scroll by this widget
limitspy=4; Number of the posts to appear on the widget
intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-2.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


numposts = 5; Total number of posts which you wants to scroll by this widget

Stylish Animated Blogger Recent Posts Widget

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}


#workwidget li:hover {
background: #84f6f5;

}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.





Settings:

Change http://bdlab.blogspot.com to Your Blog address
Change numposts = 10 to Show number of Recent posts with thumbnails

Scrolling Recent Post Gadget For Blogger

Live Demo

Adding The Widget To Blogger



Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work.ucoz.com/24work-blogspot/recent-posts/hb-recentposts-2.js" ></script>
<script style='text/javascript' src='http://24work.ucoz.com/24work-blogspot/recent-posts/hb-jquery-ticker.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.



Optional Customizations


To change total number of posts find this code var numposts = 7;
If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Live Demo

Follow the step by step instructions to add this widget in Blogger:
Sign in to Blogger
Go to Layout > Add a Gadget
Select HTML / JavaScript
Paste the code given below in the field and Save.

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

Customization:
var numposts = 5; (Number of Posts to be shown)
var showpostthumbnails = true; (Post Image)
var displaymore = true; (More Button)
var showcommentnum = false; (No of Comments)
var showpostdate = false; (Post Date)
var showpostsummary = false; (Post Summry)
var numchars = 80; (Characters in post summary)
True is for Display item and False for not to display. Change According to your needs.

Change http://bdlab.blogspot.com with your Website/ Blog URL.

Tooltips Recent Post Widget For Blogger With Thumbnail

Live Demo

Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZlTtP3bwzyqBGt1EzXL1v7DWu3hgoRicnvg_RMzDwIHrKAozqqHemV5-6NmQhTvFIA3l1veC1cqw0L82oZPUPmYcwwKUcLiXwwLl0frB5EzlBofTx9U0Tayf6JnBk-l4ftaYWlDb4QWJ/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript">


var rpTitle = "Latest Post", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNJm-8lUKz5pg9kjT5Xs9Ix8-K8fw9zFQCy_9V_JdEZ9jPk9hNUL5ciE_-Jpoba9Lmu3tgANrm1cSVJWSY6mBq6RwH-VtaUXXK4sDEd0odHcPl9VgLkCbqVIywEs6_wa4Vs67ADxI_Pfa/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://bdlab.blogspot.com/"; // Your Blog Address
</script><script src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-6.js" type="text/javascript"></script>

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 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.



Customization


numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

Many thanks to abu-farhan And Rahul for making this code and I just tested and modified to work on blogger

Read more > Animated Recent posts for Blogger with Thumbnails - Simple Spy

How to make a new category / folder in your The Old Reader subscriptions list

This article explains how to make new categories for listing and organizing feeds in The Old Reader.

Recently I migrated from Google Reader to The Old Reader, in readiness for Google Reader's upcoming retirement.

(If you're not sure why I bothered, you might like this simple explanation of RSS and why it matters for Bloggers, in particular ones who want to research things).

I used Google Takeout to migrate my existing subscriptions from Reader to The Old Reader. (And yes, I did carefully file that exported file away, just in case I want to migrate to some other service.)

Because my subscriptions in Google Reader were organized into categories, these categories were automagically imported into my The Old Reader account.

But today I wanted to change my categories - and it wasn't obvious how to do this from either my settings or profile.

How to make a new category AKA folder in your The Old Reader subscriptions list

To add a new grouping to the subscriptions in a The Old Reader account:

• Click one feed that you would like to move to into the new category - and hold it down.

• Drag it to the empty space below your last folder, and drop it into place.  
  Note:   as you do this, the words "NEW FOLDER" appear at the bottom of the list of categories.

To move other items from your existing subscriptions into the new category, just drag-and-drop them too.

How to rename your new folder

To change the name of a folder/category in The Old Reader:

• Double-click on the existing name - this makes the name open for editing.

• Type the new name, and press Enter to save it.

How to change the order of your categories

You can re-organize your folders - but only one at a time.

• Click the folder that you want to move, and hold.

• Drag-and-drop it into the new place.

Putting feed-items into multiple categories?

For the moment, this is not possible: each item that you subscribe to in The Old Reader can only be in one folder.

---

Related Posts

Understanding RSS, and why it can make you a better blogger

Google Reader is being retired

Choosing a replacement for Google Reader

Read more > How to make a new category / folder in your The Old Reader subscriptions list

Why enabling a mobile template just became more important to some bloggers

This QuickTip explains some recent announcements from Google  about SEO and mobile devices, and what they mean for Blogger users.

If SEO matters for your blog, and your blog is relevant for users with moble devices, then you pretty much need to enable a mobile template.

Why?   In short, because this recent post from Webmaster Central says that for Google the ranking of search results on mobile devices is now impacted by how well sites are optimized for mobile devices.

This means that if you haven't set up your blog for mobile, then it won't come up so highly in the search results seen by mobile users.

As well as the template, there are a range of other factors that affect how well your site works for mobile. Blogger users cannot control a lot of them, though we can think about:

• Page load speed 
• Using the Pages gadget as the top menu bar, rather than a linked-list or labels gadget, - because it converts into a drop-down menu in when a mobile template is applied.

Also, remember that if you make a home-page using a custom re-direct, this will only work in your desktop version. The re-direct isn't applied for mobile viewers, they just see your most recent posts in mobile-friendly tiles.

Read more > Why enabling a mobile template just became more important to some bloggers

Apple announced Mavericks new iOS for Mac and mobile devices

Apple’s new OSX Mavericks will be available for later series of iPhone 4, iPad 2 and iPad Mini. Craig Federighi, SVP of Apple’s Software Engineering officially announced this new iOS at the 23^rd Apple Worldwide Developers Conference at Monday, June 10 2013. At this San Francisco event a Apple’s own  Digital Radio Service, new MacBook Air and few more extra software updates were announced also.

This is not the final version. We’ll have to wait until October this year to grab the final Maverick. Don’t worry, it’s workable now. You can read a comprehensive details of Mavericks features on Tech Goes Strongand GNT

BusinessInsider has a great post about Mavericks also to check out.

If you think that any of these information contains wrong information and need an upgrade or change, please kindly inform via comment box below. Your valuable comments will definitely make this blog rich and informative also.



**Disclaimer:Information and images collected mainly from manufacturer's website, manuals, user guides and some other online resources. Only some editorial touch given for better understanding and viewing experience. Author of this blog will not bear any liabilities on this regards.

Read more > Apple announced Mavericks new iOS for Mac and mobile devices

How to install Facebook's Open Graph tags into Blogger

This article shows how to install Facebook's Open Graph tags into Blogger

Why Open Graph 

Neil Patel recently explained on Quick Sprout why having Facebook and Twitter tags installed into your blog is important.

To cut his long story short, if you install them, then when someone shares your blog-post, the shared item looks better. This means that more people are likely to follow the link and/or share it themselves - so your blog gets more traffic, and people think you're more professional and thus credible.

Neil also stated that if you don't use Wordpress, "you’ll need to manually generate meta tags for each page on your site" - but fortunately for Blogger users who are brave enough to edit their template that's not true.   Blogger provides lots of SEO-supportive features these days, and you can easily use them to make OG-tags work on your blog - even if you haven't quite got your head around what OG is - personally it too me months to understand what it was all about.

The following sections have more details about how to do this.

How to install Facebook's Open Graph tags into a blog made with Blogger

Edit your template in the usual way.

1     Tell Google about the namespace:

Find the opening <html  ... statement, and add the Open Graph namespace information to it.   The code to add is

xmlns:og='http://ogp.me/ns#'

and it goes after the existing namespace statements.   For example, my current tag looks like:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'    >

or like this after the line is added:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>

2   Add the Open Graph tags

Find the closing </head> tag.
(Hint:  I often search for just </head   ie without the closing >, in case there's something else in the tag in my template)


Put the following code immediately before it:

<!-- Begin Open Graph metadata --> 

<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>

</b:if> 

<meta expr:content='data:blog.title' property='og:site_name'/> 

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' property='og:image'/>
</b:if> 

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

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<b:else/>

<meta expr:content='data:post.snippet' property='og:description'/>

</b:if>

<!-- End Open Graph metadata -->

This code needs to be adapted for your blog.   In particular:

• en_US

This value is fine if your blog is written in US-English. But if you are writing in UK-English, you may want to change it to en_GB.   

And if you are using a different language altogether, you should change it to the two letter code for that language-territory combination:   see https://developers.facebook.com/docs/internationalization/  for more information about the codes that they support

• URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST 

Replace this with the web-address of a picture that you want to use if the individual post doesn't have a thumbnail  - perhaps your logo, or a blogger logo.

• App-ID and Facebook-Profile-ID

If you have got an App-ID associated with your blog, perhaps because you signed up to use Facebook commenting with it, then you may also want to add the following statements, just before  the "<!-- End Open Graph metadata -->"

<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>

Of course putting in your own values instead of the ones in red   (I'm assuming that if you knew enough to get an App-ID, then you will know how to find it, and also about the risks associated with linking your Facebook-profile-ID to your blog.)

3    Check it's complete:

Preview the template changes to make sure that they've worked, and then save them.

Troubleshooting

Testing the OG tags

Facebook have a tool that you can use to see what values the OG tags in your blog have.
It is found here: https://developers.facebook.com/tools/debug

Enter the URL of one of the posts from your blog and click Debug to see the OG tags which Facebook finds for it.

Descriptions

The Descriptions tag will only work if you have Search-descriptions on (Option > Search > Meta-tags > Enabled), and have entered a search description for each post using the post-editor.   I had hoped to be able to use post.snippet when this wasn't available, but have not been able to work out the correct syntax to do this.

Pictures

Facebook would like you to use an image that's at least 200x200 as your posts's thumbnail image or as the default image to use for posts that don't have one.

If the picture that you use is smaller than this, they do appear to use it.

However you will see the following message when you use a debugging tool to look at what tags Facebook is reading from your site:

og:image should be larger
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://3.bp.blogspot.com/XXX.png' will be used instead.

---

Related Articles:

Advantages and disadvantages of editing your Blogger template

Post.thumbnail:   a summary image for a post

How to edit your Blogger template

Linking your blog to the social networks

Read more > How to install Facebook's Open Graph tags into Blogger

Numbered Page Navigation For Blogger New Script

Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.

Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot




Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization


How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

Stylish Numbered Page Navigation Widget with Colored Styles For Blogger


Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.

An error was found in some blogs and it is also fixed in this widget.
eg.hiding at top


How To Install This Widget On Blogger :-

1. Click the below Button
2. Customize the Options given in Widget form
3. Click on "Generate" Button
4. Finally click On "Add To Blogger" Button

How to Add Numbered Page Navigation Widget for Blogger / Blogspot

Page navigation is awesome widget that allows navigation of page number to the visitors. You might have seen numbered page navigation in many WordPress blogs. It is simple JavaScript that allows your older posts, new posts and links to the house numbers. Have you seen older posts, new messages and links at home bored.



How To Add Numbered Page Navigation Widget to Blogger Blog?

I am giving best customizing options to this widget

Note:-Choose colors for your convenience you feel good.

1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget

Blogger Page Navigation Widget With DIfferent Styles

How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

UPDATED

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + &quot;?&amp;max-results=5&quot;'

Change 5 base on how many post every page

Many thanks to Harish for making this code , Some Stylings and PageNavi Script by Abu Farhan and I just tested and modified to work on blogger

Read more > Numbered Page Navigation For Blogger New Script

Choosing a replacement for Google Reader

This post tells the story of my choosing a replacement for Google reader.

Every so often, I do a post here on Blogger-HAT which is a little "different".

Today, I'm starting the quest to choose a replacement for Google Reader (yes, the turn-off was announced back in March, but there's no point in starting these things too soon - I expect that a few options have improved considerably since then.

One way that this post is different is that I'm going to hit publish very soon, with the post just started not just finished.    So if you're a subscriber and want to see what I end up with, you might like to sign up on Facebook or somewhere, so you get a notification when I've finished.

So let's get started:

First stop:  google.com   [google reader replacement]
A cool 66-million results.   Yeah, I'll zip through those in no time.

Scanning down the list, I don't recognise some of the top placegetters:

The first three are from Google News.   No, don't want to check them - I want comparative reviews, no press-releases.

A post from "howtogeek" - nah, I don't want to be a geek.

One from "workflowing.net" - sounds like a sponsored listing, even though it's not.  But the summary does say "Note: This post is a running list and will continue to be updated with new options and " - let's take a look.   They have five options:
Feedly
Feedbin
Feed Wrangler
Fever

Feedly is the only free one.   They're making the usual mutterings about "look what happened to the last free option" - but I remember Picnik:   it wasn't free, but it still got shut down.    So I'm not hung up about free = no control.

Not enough to compare yet, need to check another list or two.

6 June update:   

Saw this comment on another site.

Looked atThe Old Reader - Clicked on the sign-in with Google and see that The Old Reader is requesting permission to: View and manage your Google Contacts - That's a NO
Looked at Feedly - Clicked on the Get Feedly for Chrome and it states it can Access your data on all websites and Access your tabs & browsing activity - That's a NO

I'm not so fussed about whether something accesses my tabs and browsing activity - but I don't want a Chrome app:   I need something that works in whatever browser I happen to use, be it IE in the office or Firefox or Chrome at home.

12 June:

I found a reference to Rolio somewhere.    Signed up - even though the screen looked rather bare and pale ( = trendy, but harder to read).   Then I subscribed to one feed, and got an email confirming that I'd subscribed.   Ahh ... no, that's going to get wayyy too painful.

16 June:

I'm starting to get concerned about the number of de-recommendations I'm seeing.   There seem to be lots of reasons not to use tools, and no compelling replacement.

So I decided to try The Old Reader.  

The bit about it wanting to access your Google Contacts may be true - but it's not necessary.    I decided to keep the two services separate, and signed up with a totally new account, no Google Contacts requests involved.

It looked a bit odd to start with, but once I realized that it doesn't actually work with IE8, and switched to Chrome, it worked ok.   Personally I think the design is a little ugly - but the basics of Google Reader are there.  

Reading their blog, it's still a very young product - three developers, now getting help from the wider community, but still working out a sustainable model for their product.    So it could start charging subscriptions (I'm not keen) or showing ads (doesn't worry me, provided they're not too intrusive) or get bought of by a large player (I'm guessing that won't be Google :-)  ), and I might be searching again.   But it's worth the risk for a while I think.

Criteria for choosing:

The classic approach to choosing software is to determine your requirements, then evaluate options against how well they meet them.    But I've found it hard to distil my requirements.

Bottom line - it must let import and let me read the RSS feeds I have now, and let me add new ones.

Pretty important:

Not a stream:  I want to catch up with everything in each feed every so often - not just a stream of what's recent.

Must read RSS feeds - not tweets or other stuff.

Nice to have:

Browser independent

Used my Google account (maybe)

Read more > Choosing a replacement for Google Reader