ADDING PAGE NAVIGATION TO YOUR BLOGGER BLOG

Ok! Here is a true confession coming from my heart; I hate the default NEXT (navigation) on blogger blog, do you agree with me? I kind of like things to be simple but yet unique in a way that the next man would say that’s amazing.

I love the pagenavi plugin on wordpress because it kind of makes the navigational function sweeter to navigate. Why can’t we just have something like that in our blogger blog? Seriously! I love blogger blog so that’s why I brought this cool page navigation for us to use.

If you are looking for a cool page navigation bar then search no further because this widget I am about to drop is cool enough to blow you away in every way possible and I assure you that it will not slow your blog down and the widget is very nice, I mean lovely.

So are you ready for the tutorial? Ok! Let’s get right through it.

HOW TO ADD A PAGE NAVIGATION TO BLOGGER BLOG

Must Read: HOW TO ADD A ROTATIONAL AD PLACEMENT WIDGET TO YOUR SIDE BAR

This widget is easy to implement and it takes no skill or what so ever but the only thing you’ll do is to pay full attention to the tutorial so you can easily grab it.

Go to your blogger dashboard → Click Layout → Click Add A Widget → By clicking the Add A Widget, a new windows will pop up, now search and click to open HTML/JavaScript .

Have you clicked the HTML/JavaScript? Now copy the below codes:

[php]<style type=’text/css’>

#blog-pager{height: 28px;

padding: 10px 0 0;

overflow:hidden;

text-align:center;

}

.showpageArea a {text-decoration:underline;

font-size: 16px;

text-align: center;}

.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}

.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

 

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

 

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}

.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}

.showpage a:hover {text-decoration:none;background: #cccccc;}

.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>

<script style=’text/javascript’>var pageCount=7;

var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>

<script style=’text/javascript’ src=’http://onenaijablog.googlecode.com/files/blogger page navi.js’></script>[/php]

Have you copied it? Paste the code in the HTML/JavaScript and save your work. Now go check your blog and see how it looks.

The navigation looks simple but awesome right? Now go make your blog pages sweeter to navigate.

Must Read: HOW I PUT FLOATING SHARE BUTTON TO MY BLOGGER BLOGSPOT SIDE BAR

If you’d like to drop a comment or thought, please do by using the comment box below. I would really like to read your thoughts and comments.

Was the post useful? Then do click the like button, share us and recommend us with friends. Do not forget to subscribe to our feed for latest updates on the go.