Breaking News
Loading...

Attractive Page Navigation With Blog Pager Design

Tuesday, December 24, 2013


Page navigation for blogger is most important widget for blogger. Generally this widget can make visitors easy navigate to blog posts. For engaging the visitors with your blog page navigation is very powerful widget.  Always readers get bore by Next or Previous page button because they can't visit  according to their desire pages instantly

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML
Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.


#blog-pager{
clear:both;
text-align:center;
margin:10px;
padding:5px 0 0 0;
height:30px;
}
#blog-pager a,.showpagePoint,.showpageOf,.showpageNum a{
text-decoration:none;
color:#fff;
background:#222;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:0 2px 0 0;
padding:4px 10px 5px;
border:1px solid #000;
text-transform: uppercase;
font:normal normal 12px Oswald;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}
#blog-pager a:visited{
color:#fff;
}
#blog-pager a:hover,.showpagePoint {
background-color: #264778;
border: 1px solid #000;
color: #fff;
}
#blog-pager-newer-link{
float:left;
}

Step 5 Now Find this code </body> by pressing Ctrl + F
Step 6 Copy the below code and Paste it Before/above </body> and Save the templates.


<!--Page Navigation by www.uncoverred.blogspot.com Starts-->                                 <script type='text/javascript'> var pageCount=1;
var  var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://uncoverredbd.googlecode.com/files/pagenavi.js' type='text/javascript'/>
<!--Page Navigation by www.uncoverred.blogspot.com Ends--> var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://uncoverredbd.googlecode.com/files/pagenavi.js' type='text/javascript'/>                                                                               <!--Page Navigation by www.uncoverred.blogspot.com Ends--><div class='clear'></div>

Customization:
  • Change the Digit Count=1 for Display Post Per page
  • Change the Digit displayPageNum=3 for display Page Number

0 comments:

Post a Comment

 
Toggle Footer