INFOSOFTone: December 2012

Attractive Numbered Page Navigation Widget For Blogger

In this post, im gonna explain how to add blogger page number navigation widget with nice style.

I will include 2 style. You can choose it as your like.This will helps to your visitors to visit every
page in your blog. Im using java script ,CSS and HTML for this widget.
1. Log in to blogger account and Click drop down. blog-post-option

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.
Style 1

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMA84UphmgtbhaQDXD1XhUrU1mWq5VpI8SxQ6bY4P6sv-msPIikMj-q1GcIijEmwzGykfFbImDj_acFgQp4uaKcXuc_0ahf882GZYzXPGWaEjZlBQcbJny2CcWLmUqaFU-HS_DH8qoa8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMA84UphmgtbhaQDXD1XhUrU1mWq5VpI8SxQ6bY4P6sv-msPIikMj-q1GcIijEmwzGykfFbImDj_acFgQp4uaKcXuc_0ahf882GZYzXPGWaEjZlBQcbJny2CcWLmUqaFU-HS_DH8qoa8/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMA84UphmgtbhaQDXD1XhUrU1mWq5VpI8SxQ6bY4P6sv-msPIikMj-q1GcIijEmwzGykfFbImDj_acFgQp4uaKcXuc_0ahf882GZYzXPGWaEjZlBQcbJny2CcWLmUqaFU-HS_DH8qoa8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMA84UphmgtbhaQDXD1XhUrU1mWq5VpI8SxQ6bY4P6sv-msPIikMj-q1GcIijEmwzGykfFbImDj_acFgQp4uaKcXuc_0ahf882GZYzXPGWaEjZlBQcbJny2CcWLmUqaFU-HS_DH8qoa8/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__tFZgMAh2f_5x_7bmFJJase5sLqEwsZCmBHozgA8tjV91k6hyphenhyphen2qcyCpQNGWBT2EL2ixhcvJWmogfEron5bNzWLiMUXm2j-56rx-vfzQ1s6oo38o4yVe2vkj6MsUp3_SLoheWbHHXAFU/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5nWAPZ-emvmHMD_7UDbdzW7wMJ_m9ekJZkxzyTHKLk193yolRf0eHy9magDF0P41RQ9WhwT2cCG6Ke9iAtQoRs3qdsQzSshB7dwz7rBOe8Be8MYTU-9Qg-_B4rZwxVN3j953HpfiZB0/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5nWAPZ-emvmHMD_7UDbdzW7wMJ_m9ekJZkxzyTHKLk193yolRf0eHy9magDF0P41RQ9WhwT2cCG6Ke9iAtQoRs3qdsQzSshB7dwz7rBOe8Be8MYTU-9Qg-_B4rZwxVN3j953HpfiZB0/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5nWAPZ-emvmHMD_7UDbdzW7wMJ_m9ekJZkxzyTHKLk193yolRf0eHy9magDF0P41RQ9WhwT2cCG6Ke9iAtQoRs3qdsQzSshB7dwz7rBOe8Be8MYTU-9Qg-_B4rZwxVN3j953HpfiZB0/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5nWAPZ-emvmHMD_7UDbdzW7wMJ_m9ekJZkxzyTHKLk193yolRf0eHy9magDF0P41RQ9WhwT2cCG6Ke9iAtQoRs3qdsQzSshB7dwz7rBOe8Be8MYTU-9Qg-_B4rZwxVN3j953HpfiZB0/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style>

Style 3

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 4 Green

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 5 Red

<!-- REworld -->
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 6 Orange

<!-- StylishPage Navigation Widget For Blogger By http://www.reworldaccess.blogspo.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* 24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>
<!-- StylishPage Navigation Widget For Blogger By http://reworldaccess.blogspo.com -->

5. Now save your HTML/Javascript'.

Add Stylish Blogger Page Number Navigation Easily

This is a nice style page number navigation. Its circle navigation with stylish hover style. Im using java script for this code.you can make your blog attractive by adding this page number navigation.
1. Log in to blogger account and Go to Design >> Edit HTML (make sure backup your template first)

2. Find this tag by using Ctrl+F ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

4. Now Find this code by using Ctrl+F </body>

5. Paste below code Before </body> code

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggertrix.googlecode.com/files/pagenaviii.js' type='text/javascript'/>

6. Now save your template
you are done.

Add Blogger Page Number Navigation With Simple Steps

Most if page number navigation are not easy to add to your blog.Because, you have to do more steps to add it to your blog.This is justsimple steps.
1. Log in to blogger account > Go to Design >> Page Element
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.

<style type='text/css'>
.showpageArea a {
text-decoration:none;
}
.showpageNum a {
 display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.showpageNum a:hover {
padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #de7d26;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpagePoint {
 display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
 display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=4;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

By changing 1 and 4 , you can change how many page to view.

4. Save HTML/Javascript.
you are done.

How To Show Blogger Gadget/ Widget In Specific Pages

In this tutorial im going to explain How To Show Blogger Gadget/ Widget In Specific Pages. When we designing the blogger templates. sometime we want to change out gadget/ widget.Sometime need to show gadget/ widget homepage only.some time inside post only. At that time we don't have any option for customize like that. We need to understand about code.But most of are not good at coding.So in this
tutorial will helps to arrange your gadget/ widget as you want. follow these steps.
1. Log in to blogger account and Go to Design >> Edit HTML (make sure backup your template first)

2. Put checked mark in Expand Widget Templates

3. Now you have to press Ctrl+F key and type the unique title that you gave to gadget or widget.
Lets say you gave title as Subscribe, the code will show like this.

<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

So,code start with <b:includable id='main'> and end with </b:includable>
you have to find this both code.
lets see how to show this gadget in specific pages.

How to show blogger gadget in home page and other pages.(Except post pages.)

So,show gadget in home page and other pages.You have to add that red code like below.

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

How to show blogger gadget in Post pages only.

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

How to show blogger gadget in only specific page

<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

you can replace URL of the page with URL which you want to show the gadget only that page.

7. Now save your template
you are done.

Attractive Feed Subscription Form Widget For Blogger

This is a Cool Rss Subscribe box. Actually if we hope to increase our Rss, we must have good article with attractive subscription gadget. Therefore visitors force to subscribe via Rss because they can get quality articles via emails.
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste One of below code style as your like

Style 1

<style type="text/css">
#btrix-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSZZpqiv8xM68TsI71MIgRor_PkTWI5XoXg5bsZhMz80rBmoZTHT8yW5Ul6K7PioswRO5NiYJKUclaF9HR0r8fw9hQDLWeOIt9fMvK3IgA8R3Lt4PRINm348LJBlWVPz8tEVvkara84M42/s1600/btrix-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=INFOSOFTone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="INFOSOFTone" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Style 2

<style type="text/css">
#btrix-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdwiSRkSpqd5qj5oSU-WNCyFtDsO-U3HtIEmqgTsbve9xVGHpPiikAhkuXMY3fOgbCq4vgnt1o0D5OckzHPE-jZf6DrfzLJFSNzKjlwohLCBiH4LMfDD4kiPOf2ScAQqGhnekYbSg2QOM/s1600/btrix-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=INFOSOFTone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="INFOSOFTone" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Style 3

<style type="text/css">
#btrix-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNfbYCslAvLUoKzx7h87LTDGEA9AJ-_VNmlh5NVVC13is7Az3eFA0ClEEdcVeCdHray2srp9F0O1Dv5vEl88JK3haEFpBNhcbcrrx5ojX0JU5Ho2qg3TTNmYZ2Qy6M-eBup_WHzTbvVUR/s1600/btrix.blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=INFOSOFTone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="INFOSOFTone" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

After paste one of above code
* Replace INFOSOFTone with your feedburner name

4. Now save your HTML/Javascript'.

You are done...

From	%%v_FLG%% %%v_IP%%
Location	%%v_CR%% ,%%v_RG%%, %%v_CI%%
OS	%%v_OS_IMG%% %%v_OS%%
Browser	%%v_BRW_IMG%% %%v_BRW%%
Blog	INFOSOFTone