Don't Miss

Numbered Page Navigation Widget for Blogger

By Zohaib Liaqat - 9 Comments
Numbered page Navigation widget is one of the most popular blogger widgets. Numbered Page Navigation is only provided to the blogs hosted on wordpress, but now it is also available for Blogger Blogs. Blogger default navigation shows Newer Posts and  Older Posts links, and if you want to change it to Numbered Page Navigation then you're at right place. Today, in this tutorial I'm gonna show you that how to add Numbered Page Navigation to Blogger step by step.

Add this Page Navigation Widget to Your Blog

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</body>

Step 3. Copy the Below code and Paste it just above/before the </body> tag

<style type='text/css'>
    .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
    .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWccrvfaRwSX86AxGmsK8C628Wm_huGwtljuceARhV8_GYIrAML94CDIrUCHCNfgi4w2wwZFdy693WbCLeQFj-h6xD2XmO2DtnW028-TXnuTRWfcenlycQrpQBB3ozV1MKP4wO6QchFO8/s1600/blogolect-npb.gif) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
    .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
    .showpageOf{float:left;padding-top : 6px;}
    .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.gif) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
    .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.gif) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_mN8PtF31fkpWWyr6VFENY7GF7E0uOLOlXi15nThbFNwbkG221DDV-y6DujtdJ2sifqBicQ0W2D78uYwvqMXzrngIIhoMY_7GU43oInjVg1SWPN0Nd5n1KbcScAtvbTRogzm8aUwmTg/s1600/pgn-blogolect.gif) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
    .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script src='https://googledrive.com/host/0B43vwjPtKakCLTdyOExLTm5Vekk' type='text/javascript'/>

  • Replace var pageCount=5; with the number of posts you want to show
Step 4. Hit the Save Button
And you're Done 

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf
I hope that you will like this widget, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated

Tags:

9 comments to ''Numbered Page Navigation Widget for Blogger"

ADD COMMENT
  1. thanks, i want 2 add on my blog ,,,

    aidking24.blogspot.com,,,,,,,,,,,,,,,

    mny,mny thnksssssssss,,,,

    ReplyDelete
  2. concentrate on the piece de resistance-- Viva Video There are additionally amusing lenses-- fantastic.

    ReplyDelete
  3. When it absorbs its blood, the infection is transmitted from person to person. Your health and we are a pest control company in Madinah and Yanbu we kill and exterminate bugs spray insecticide without smell and save you from bugs completelyارخص شركة مكافحة حشرات

    ReplyDelete
  4. Spot on with this write-up, I honestly believe this site needs a great deal more attention. I’ll probably be back again to read through more, thanks for the info!buy old gmail accounts usa

    ReplyDelete
  5. Find all the free software downloads, hardware reviews, online tools, web apps, and tech news.
    Viva Video on Windows PC

    ReplyDelete
  6. Great article. This blog is filled with unique and high-quality articles. Hotstar Live on PC, MPL for PC

    ReplyDelete
  7. https://pvaaccs@gmail.com
    Google has both PVA and non-PVA accounts but if you are interested to use your account for business purposes you should have a google PVA account. Because it helps you to promote your marketing services. These Gmail PVA accounts are made for marketing purposes, accessing social media applications, and for SEO purposes.

    ReplyDelete