|
|
|
Hi friends!!! I received a lot of emails regarding the newer post and older post links. Many bloggers who run their blog especially those run on Revolution Church Blogger Template wanted to add "Newer Posts And Older Posts" link just like the one displayed on my blog. So, this post is specifically targeted to those who wish to have their page navigation as displayed below - check the encircled part in the picture below.
1. Navigate to "Design->Edit HTML" from your blogger dashboard. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Now, search for the following block of code in your template. Use "CTRL+F" to fasten your search.
2. Now, search for the following block of code in your template. Use "CTRL+F" to fasten your search.
#blog-pager-newer-link {
float: left;
display:none;
}
#blog-pager-older-link {
float: right;
display:none;
}
#blog-pager {
text-align: center;
display:none;
}
float: left;
display:none;
}
#blog-pager-older-link {
float: right;
display:none;
}
#blog-pager {
text-align: center;
display:none;
}
Note: If you do not find the above block of code, then you should find the following block.
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
3. Now, replace the above mentioned block of code with following block of code.
#blog-pager-newer-link {
float: left;
display:inline;
}
#blog-pager-older-link {
float: right;
display:inline;
}
#blog-pager {
text-align: center;
display:inline;
}
float: left;
display:inline;
}
#blog-pager-older-link {
float: right;
display:inline;
}
#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;
}
.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;
}
4. Save your template. That's it. Very simple!!! Isn't it???
CUSTOMIZATION:
CUSTOMIZATION:
You can change the colors of the blocks by changing the color codes. To do so, first finalize what color you want the button to display before hovering. Later, decide what color the button should display on mouse hover. Check out the HTML color code table here - HTML Color Code Table. Now, replace the text highlighted in green on step 3 with the code you chose from the HTML color code table.
If you find any difficulties in installing the above mentioned scripts, then leave your comments below or contact me via email. If you got inspired by a page navigation style run on some other blog, you can share it with us. We will find the code for that style and post it on our blog in the upcoming weeks. So, keep your comments coming.
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
nice blogg, very wonderful blog
REPLYmaybe you can teach me how to make a good blog right?
i hope.
@buldani/slimmingherbal: Thanks for the comment! I would love to help other bloggers, especially newbies like you! Connect with me on gtalk or FB.
REPLYhi, this is very informative, I only used the blogger template, maybe I could pick some of your tips
REPLY@air: Yeah! Apply them and make it more attractive. I hope you enjoy the other articles on my blog as well!!
REPLYBro many many thanks for sharing your knowledge!
REPLYMay God bestow his love on u.
I have a blog:
http://bdclaymart.blogspot.com
Can you please go through and let me know how to make it more attractive.
T.C.
@Chy: Sure! I would love to have a look at your blog and try providing you tips to improve them. Contact me via email. Would love to help newbies like you!!!
REPLYThank You Mukund!!It is certainly a good post,I liked the information. I may apply these changes to my blog..
REPLY@Navya: Thanks Navya! I'm happy to know that your interested to apply these changes on your blog! Hope you enjoy the other articles on my blog and you comment there as well!!
REPLYwow this was also one of the greatest ...keep rocking...mukund, thanks for the great article...except these link building is also necessary, which i am doing now ;)
REPLY@All about hacking: Thanks for the comment! Hope you enjoy the other article in this series!!! Yeah! Link building is definitely a concern for webmasters!!!
REPLYExcelent post with clear information. I try different solutions on other sites but this is the only one witch works perfectly on my site http://montreal-blog.blogspot.com
REPLYThanks
@montrealblogadmin: I'm glad that the tip on my blog worked perfect for your blog. Hope you enjoy the other articles on my blog as well! Thanks for the comment buddy!
REPLYwow this was also one of the greatest ...keep rocking...mukund, thanks for the great article...except these link building is also necessary, which i am doing now ;)
REPLYHey, why does your home link appear on the left. Did you want it to align at left part?
REPLY@Amit: Yes! I have aligned it to the left! The ultimate aim is to navigate to the left. So, if you want it to appear at the center, just use the center tag!
REPLYGreat tips. I also agree that if your design stands out it would be more appealing to people. Thanks.
REPLY@sep reseller: Yup! Exactly! Design plays a major role to make your blog look unique on the web. Thanks for the comment buddy!
REPLYUse the tab below to comment. No spam please!!!
POST YOUR COMMENT