Friday, 26 December 2014

Numbered page navigation for blogger

Follow the following steps for numbered page navigation in blogger -


  • Go to Blogger Dashboard >> Template >> Edit HTML.
  • Find ]]></b:skin> tag in your blogger template HTML editor
  • And then copy the below code and paste before the ]]></b:skin>

.showpagePoint {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
font-weight: bold;
}
.showpageOf {
color: rgb(255, 255, 255);
font-weight: bold;
background: none repeat scroll 0% 0% rgb(224, 102, 102);
padding: 8px;
margin: 8px;
}
.showpageNum a:hover  {
color: white;
}
.showpageNum a:link {
background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%) repeat scroll 0% 0% transparent;
color: rgb(51, 51, 51);
margin-right: 3px;
display: inline-block;
padding: 7px 10px;
border: 1px solid rgb(227, 227, 227);
}
.showpageNum a:hover {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
}

  • Now save your template.
Adding the JavaScript Cods:
This is the second and last step. Now you wont to add JavaScript codes in your template.
  • Again Go to Blogger Dashboard >> Template >> Edit HTML.
  • Now find </body> tag in your blogger template HTML editor
  • and then Add below code just above </body> tag

    <script type=’text/javascript’>
var postperpage=5;
var numshowpage=5;
var upPageWord =&#39;&lt;&lt;&#39;;
var downPageWord =&#39;&gt;&gt;&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</script>
<script type=”text/javascript” src=”http://yourjavascript.com/3215021430/www-mybloggerblog-coml.js”></script>

  • Finally Save your template and you’re done!
Now enjoy a new experience with number page navigation.

No comments:

Post a Comment