Install pagutd - blogger pagging script. Click the image to view demo

How to install pagutd - blogger pagging script for my blogger blog?

1. Enter in the code of your template (Dashboard -> Layout -> Edit HTML->Expand Widget Templates) and search for:
   

   <b:include name='nextprev'/>

2. Place under that line the following:
   

   <!-- start pagutd - blogger pagging script - code by vietutd dot com
   http://pagutd-script.vietutd.com/
    -->
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <style type='text/css'>
   .pagutdnav li {
   list-style-type: none;
   display: inline;
   }
   .pagutdnav a {
   border:1px solid #ef8116;
   margin:0 3px;
   padding:3px 7px;
   text-decoration:none;
   }
   .pagutdnav a:hover {
   background-color:#ef8116;
   border:1px solid #ef8116;
   }
   .showpagePoint {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:#ef8116 none repeat scroll 0 0;
   border:1px solid #ef8116;
   color:#ffffff;
   margin:0 3px;
   padding:3px 7px;
   text-decoration:none;
   }
   .pagutdnav a:link {
   color:#333333;
   text-decoration:none;
   }
   .pagutdnav a:link:hover {
   color:#ffffff;
   }
   </style>
   <span style='float:right;margin:0;padding:0;border:0;'><a style='margin:0;padding:0;border:0;' href='http://pagutd-script.vietutd.com/'><img alt='Pagutd - Pagging Script for Blogger Blogs by Vietutd Dot Com' src='http://sites.google.com/site/vietutd/pixel.png' style='margin:0;padding:0;border:0;display: none;'/></a></span>
   <script type='text/javascript'>
   var home_page = &quot;<data:blog.homepageUrl/>&quot;;
   var div = document.getElementById(&quot;blog-pager&quot;);
   var atag = div.getElementsByTagName(&quot;a&quot;);
   var pager_max_main = (atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)==-1) ? atag[atag.length-2].href.substring(atag[atag.length-2].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-2].href.length) : atag[atag.length-1].href.substring(atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-1].href.length);
   var sub_nav_half = 3;
   var pager_first_text = &quot;First&quot;;
   var pager_last_text = &quot;Last&quot;;
   var pager_pages_text = &quot;Pages&quot;;
   </script>
   <script src='http://vietutd-js.googlecode.com/files/pagutd-bver.js' type='text/javascript'/>
   </b:if>
   <!-- end pagutd - blogger pagging script - code by vietutd dot com
   http://pagutd-script.vietutd.com/
    -->

3. Save the Template and see the Result.

Pagutd - blogger pagging script - Countdown Version

1. Enter in the code of your template (Dashboard -> Layout -> Edit HTML->Expand Widget Templates) and search for:
   

   <b:include name='nextprev'/>

2. Place under that line the following:
   

   <!-- start pagutd - blogger pagging script - code by vietutd dot com
   http://pagutd-script.vietutd.com/
    -->
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <style type='text/css'>
   .pagutdnav li {
   list-style-type: none;
   display: inline;
   }
   .pagutdnav a {
   border:1px solid #ef8116;
   margin:0 3px;
   padding:3px 7px;
   text-decoration:none;
   }
   .pagutdnav a:hover {
   background-color:#ef8116;
   border:1px solid #ef8116;
   }
   .showpagePoint {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:#ef8116 none repeat scroll 0 0;
   border:1px solid #ef8116;
   color:#ffffff;
   margin:0 3px;
   padding:3px 7px;
   text-decoration:none;
   }
   .pagutdnav a:link {
   color:#333333;
   text-decoration:none;
   }
   .pagutdnav a:link:hover {
   color:#ffffff;
   }
   </style>
   <span style='float:right;margin:0;padding:0;border:0;'><a style='margin:0;padding:0;border:0;' href='http://pagutd-script.vietutd.com/'><img alt='Pagutd - Pagging Script for Blogger Blogs by Vietutd Dot Com' src='http://sites.google.com/site/vietutd/pixel.png' style='margin:0;padding:0;border:0;display: none;'/></a></span>
   <script type='text/javascript'>
   var home_page = &quot;<data:blog.homepageUrl/>&quot;;
   var div = document.getElementById(&quot;blog-pager&quot;);
   var atag = div.getElementsByTagName(&quot;a&quot;);
   var pager_max_main = (atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)==-1) ? atag[atag.length-2].href.substring(atag[atag.length-2].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-2].href.length) : atag[atag.length-1].href.substring(atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-1].href.length);
   var sub_nav_half = 3;
   var pager_first_text = &quot;Oldest&quot;;
   var pager_last_text = &quot;Newest&quot;;
   </script>
   <script src='http://vietutd-js.googlecode.com/files/pagutd-coundown.js' type='text/javascript'/>
   </b:if>
   <!-- end pagutd - blogger pagging script - code by vietutd dot com
   http://pagutd-script.vietutd.com/
    -->

3. Save the Template and see the Result.