Saturday, 25 January 2014

How to Add Next & Previous Pagination Widget to Blogger.

Posted by Unknown  |  at  Saturday, January 25, 2014 No comments

Pagination or Previous and Next Pages numbering widget for blogger blogs is almost a great widget. You can add it to your blog easily and just with few steps. As many bloggers search for this trick that how to paginate their blog by using the quickest and easiest method. Pagination is a good method to engage visitors within your blog. So if want to include previous and next buttons along with page numbers then you are here to do so.

Blogger numbering pagination widget
The widget is designed with CSS and the functionality is from JavaScript. So you will just need to add it somewhere on your blog template; apparently, you can add this widget by using your blog’s Layout page and add an HTML/JavaScript widget and straight paste the given code [on this page] inside that. The widget won’t affect your blog’s loading speed because of using few codes of JavaScript. So now follow the given steps to add this pagination widget to your blog.

How to add Pagination widget to Blog?

Following simple steps are for you in order to add this cool widget to your blogger blog. So follow them and enjoy the widget.
  • Log-in to Blogger Dashboard
  • Go to Layout
  • Add a Widget
  • Add HTML/JavaScript Widget
  • Copy Below code and paste inside HTML/JavaScript widget
<style type=”text/css”>
#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}
</style>
<script style=’text/javascript’>
var postperpage=3; var numshowpage=3; var upPageWord=”Prev”; var downPageWord=”Next”; var home_page=”/”; var urlactivepage=location.href;
</script>
<script style=’text/javascript’ src=’http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js’>
</script>
Save the widget and view your blog for a live pagination widget with number of pages and next/Previous buttons.
Customization 
In the bolder codes above you can change the number of pages to show from numshowpage=3 to any value you want, also you can  change the text Prev and Next to any value you want.

About the Admin :Muhammad Yousaf

Hi ! This is Muhammad Yousaf, WebMaster of the fileyousaf.bglospot.com. Blogger and SEO Expert from Karachi Sindh Pakistan, Love to serve myself by sharing Tutorials, Tips Tricks about Internet, Computer Search Engine Optimization, Blogging Ideas

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

0 comments:

Please don't create any link in comment. Otherwise your comment will not be approved.
If you have any Question or Problem then tell us by commenting us on fileyousaf.blogspot.com
Regards: Muhammad Yousaf

Ad

Receive all updates via Facebook. Just Click the Like Button Below

?

Dapatkan Widget Ini Di Muhammad Yousaf | Simple SEO Tips @ Blogger Tips

Blogger template. Proudly Powered by Blogger.
back to top