Blogging Tip : Creating post/page navigation buttons

Do you love the look of page navigation tabs that stream across the bottom of many WordPress template styles? For this page navigation tab, I'm going to teach you how it can be done, which is seldom used by designers when creating their template designs for Blogspot. Thanks to Anhvo for his wonderful script.

First,login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

.blogpaging {
background:#CCC url(http://i54.servimg.com/u/f54/11/94/91/73/tab110.jpg)no-repeat top center;
padding:2px;
}

Search for this code <b:include name='nextprev'/>. Press CTRL F and type the above code in the search box.



Copy and paste the following code right after it.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>

var home_page = &quot;http://en.vietwebguide.com/&quot;;
var blogID = &quot;1193242412365517650&quot; ;

var pager_max_main = 5;
var pager_num_of_button = 13;

var pager_link_alt_text = &quot;Click to go to page&quot;;
var pager_total_text = &quot;Total: &quot;;
var pager_posts_text = &quot; posts, &quot;;
var pager_pages_text = &quot; pages.&quot;;
</script>
<script src='http://onlinebiztutorials.googlepages.com/blogger_pager_script_v10.js' type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</b:if>

Save the changes. Note - This hack requires some work to utilise it’s full potential. You need to configure:

a- Change var home_page to your own site url with a trailing slash at the back.
b- Change var blogID to your blog ID number.
c- Change var pager_max_main number as to your post per page number. Failure to do so, your post/page navigation will stick to the above number.
d- Change var pager_num_of_button to your liking as long it fits to your post width. For example, if your total post is 100 and your post per page is set to 5, your var pager_number will be 20.
Technorati Profile