Add page navigation widget on your Blogger Blog

New attractive page navigation widget is a great widget for new blogger to increase your page views with attractive css effect.

Add widget on your Blog

1.Log on to your Blogger Account
2. Select your Blog.
3.Select Layout

4.Click on Add a Gadget

5.Select HTML/JavaScript

6.Now paste the following code given below

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>

You can also modify these colors according to your template by changing yellow colored field.
By default Number of post per page=5.

How to use styling HR tags with simple CSS codes

The HR tag defines a thematic break in an HTML page,it is also used to separate content (or define a change) in an HTML page.However, the tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.In HTML5 it is used as a thematic break,where as in HTML4.01 it is used as horizontal rule.But today we are going to show you how to  customize this horizintal line(HR tags) using simple CSS code to make it more stylish and professional.

Customizing HR tags using simple CSS codes

Process:
1.Go to Blogger >>Design
2.Search for ]]></b:skin>

3.Paste the following code just above or before ]]></b:skin>

STYLE 1.

---

hr#pbthr1{
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}

4. Now paste <hr id="pbthr1"/> where you want to use this styling horizontal line .

you can also use those other codes given below,just by changing  hr id.<hr id="xxxx"/>

STYLE 2.

---

hr#pbthr2 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

STYLE 3.

---

hr#pbthr3{
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}

STYLE 4.

---

hr#pbthr4{
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

STYLE 5.

---

hr#pbthr5 {
border: 0;
height: 0; /* Firefox... */
box-shadow: 0 0 10px 1px black;
}

STYLE 6.

---

hr#pbthr6 {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}