Thursday, 7 July 2011

How to add Page Navigation in Blogger Theme


I am regularly working on my ShoutMeLoud blogger theme and customizing as the same as the original WP version created by Harsh Agarwal. This is my first article on Thesis Theme Customization for Blogger. In this post I explained about the How to add Page Navigation in Blogger Theme. Excited to add this to your existing  theme?
Check out the live demo of the above mentioned hacks : LIVE DEMO

Step 1 :
First navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. 
Step 2 : 
Search for the following code in your template and remove/delete it.

#blog-pager-newer-link{  float:left;   display:inline}
#blog-pager-older-link{  float:right;   display:inline; margin-right:-20px}
#blog-pager{  text-align:center;   display:inline}
.blog-pager{font-size:12px}
.blog-pager a:link, .blog-pager a:visited{  display:block;   float:left;    padding:6px 10px;   text-align:center;   background:#888;    color:#FFF;   font-size:12px;   font-weight:bold;   margin-right:8px}
.blog-pager a:hover{  background:#444;   color:#FFF} 
  Step 3 :  
Once you find the code given in Step 2, replace that with the following piece of code:

#blog-pager-newer-link{float:left;line-height:1.8em;font-weight:700}
#blog-pager-older-link{float:right;line-height:1.8em;font-weight:700}
#blog-pager{color:#000;float:left;width:620px;height:25px;line-height:1.8em;font-weight:700;text-align:center;padding:0} 
 
 Step 4 :
Add the following piece of code ( CSS part) just after  the code mentioned in Step 3 (after pasting the code mentioned in step 3) .

#page-footer{color:#FFF;background:#2F6180 url(http://lh5.ggpht.com/_1RC6aqxCk8A/TU2XKQ5SamI/AAAAAAAAAxc/l9ydYVjDBdw/bg_footer_thumb%5B31%5D.jpg) repeat-x left top;height:40px;text-align:center;overflow:hidden;position:relative;font-size:12px;padding-top:20px}#page-footer a{text-decoration:none;font-size:12px;color:#FFF}
#page-footer a:hover{text-decoration:underline;color:#F2F2F2;border:none}
#footer-left,#footer-center{width:300px;margin-right:10px;float:left}.showpageNum a{color:#FFF;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;background:#848484;margin:0 2px;padding:4px 10px}
.showpageOf{color:#222;margin:0 6px 0 0}
.showpageNum a:hover{background:#222;color:#FFF}
.showpagePoint{color:#FFF;text-shadow:0 1px 2px #333;-webkit-border-radius:2px;-moz-border-radius:2px;background:#222;text-decoration:none;margin:0 2px;padding:4px 10px} 


Step 5 :
Search for the following code in your template.
</body>

Step 6 :
Add the following piece of code ( Java Script) just above the code mentioned in Step 5.
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=7;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>
 Step 7 :
Save your template! That's it!
Please share your opinions about the customizations which you want to have on the template as well as comment on the customizations that I post. See you soon in another interesting article! 

Post a Comment

 

Random Posts

Man Behind This Blog

Well I'm a technocrack teenager and I love to blog down at my blog,BloggerTank. I'm a big Google Fan and I love to posting for my blog so that some people can benefit from little tweaks which may enhance their productivity skills with blogging

http://techviki.com

This my new tech blog follow @ http://techviki.com