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.

page navigation for blogger

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:

<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>

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.

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

 

Powered by OnenaijaBlog

Comments

  1. says

    Hi Babanature – I don’t use blogger, but I think it’s great that you’re helping people to improve their page navigation – it’s such an important aspect of any website or blog. If it’s difficult to find your way around it can really put people off and increase your bounce rate – so this is great advice!

    Sue

    • says

      Hello Sue,
      you’re right, a navigation seems to help reduce bounce rate and above all, it beautifies a website or a blog. Thanks for stopping by to make such a good comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>