How to Add Next & Previous Pagination Widget to Blogger?



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

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .
  • very nice tutorial thanks

  • kaam nahi karraha…..

  • Dear Sir
    how are U ? and men ne ap ka pagination script try kya but kuch b na hua wo pagination zahir na hui plz meri problem hal kr den sir men ne 1 page par 100 wallpapers add kye hen aur un ko pagination me lana chahta hn but bahot koshish k bawajud na kr saka so plz sir ap ko tarika bta den bahot mehrbani ho gi.thanks
    Sabir Jamil

  • Abdulwali bahi apply ki yah hain yah sahi work nhi kar raha please guide me .

  • pleas help i am trying to add this into my website http://www.dieorhack.com but fail

    • shoaibraza134

      hey umar aap ny to apni website me next or back k buttons kesy lgay hn would you like to help me shoaib499@yahoo.com this is my fb id

  • aslam u alikum bhai me ne ap ka yeh code apne blog me add kia ha magar work nae kar raha next page pe ki gae post show nahe hoti fir me ne is ko remove ker k save kia magar yeh still blog pe nazar a raha h please help me

  • Hi wali Khan,
    Great teacher like wali, I follow your All Articles
    its Very helpful for biginer.
    Thank you.

  • how to add pagination on blogger page ?

  • shoaibraza134

    Aslam-0-alikum Wali bhai me Peshawar sy hn or aap sy me ny last months 3 dvd courses liy thy but un me aap ny yeh ni btaya k (next or back buttons) kesy add karain. plz reply me mery page py sirf 6 he products show ho rhe hain. i am waiting. agar yahe oper wala code hy to yeh code kahan paste karna ho ga.

  • avtar

    very nice blog

  • sir! how to add post views below every post in blogger…?

  • Furquan Ahmed

    Sir Can I make my blog famous with blogger subdomain?

  • waseem

    sir i have put but code is not working