How To Add Page Number navigation to blogger(4 diff styles)

 I discussed so many times in my previous posts..like Dropdown menu widget. ,how much important is Easy Navigation for your Blog or site..here i’m sharing a gadget to show page number navigation to your blog homepage..like 1 2 3 and so on so that it make easy for your visitor to navigate through your blog.

Follow some simple steps to implement…

1. Just login to your Blogger Dashboard.
2.go to Design>Edit HTML (back up first)
3.select any style below,copy the code given  and paste it above ]]></b:skin>

STYLE 1

STYLE 1 CODE
.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #000;<br /> text-shadow:0 1px 2px #fff;<br /> font-weight: 700;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> border:1px solid #999;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> background: #ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> border:1px solid #888;<br /> background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> text-shadow:0 1px 2px #333;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> border:1px solid #999;<br /> background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }

STYLE 2

.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #000;<br /> text-shadow:0 1px 2px #fff;<br /> font-weight: 700;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> border:1px solid #919106;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> background: #ddd url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> border:1px solid #aeae0a;<br /> background: #ccc url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> text-shadow:0 1px 2px #333;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> -webkit-border-radius:3px;-moz-border-radius:3px;<br /> border:1px solid #919106;<br /> background: #666 url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }

STYLE 3

.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #fff;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> background: #363636 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> background: #044697 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> background: #e30000 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }

STYLE 4

STYLE 4 CODE


.showpageArea {<br /> font-family:verdana,arial,helvetica;<br /> color: #000;<br /> font-size:11px; <br /> margin:10px;<br /> }<br /> <br /> .showpageArea a {<br /> color: #fff;<br /> }<br /> <br /> .showpageNum a {<br /> padding: 3px 8px;<br /> margin:0 4px;<br /> text-decoration: none;<br /> background: #333 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -50px repeat-x;<br /> }<br /> <br /> .showpageNum a:hover {<br /> background: #666 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -25px repeat-x;<br /> }<br /> <br /> .showpagePoint {<br /> color:#fff;<br /> padding: 3px 8px;<br /> margin: 2px;<br /> font-weight: 700;<br /> background: #06a2b9 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 0 repeat-x;<br /> text-decoration: none;<br /> }<br /> <br /> .showpageOf{<br /> margin:0 8px 0 0;<br /> }

4. Now search for code </body> and paste the given code above it.