If you have a photography blog, then you have always wanted to have Next and Older post buttons just like the buttons in DamnLOL. We are just going to teach you how to make buttons like that.
It can be done with CSS, copy and pasting it is easy, but writing it took about 30 mins and lot of hardwork. This tutorial will only work for Blogger, if you try this in Wordpress then it's possible that it will not work but you can make it work by putting the right selectors at the right place.
I thought of writing this tutorial because the design at DamnLOL next and previous post navigation is great and can increase your page views and also visitors time on page.
Demo
We have done it by styling the classic Next and Older post button, but to make this CSS work well, you have to remove any customization you made to the Next or Previous links, the navigation links should be classic as given by Blogger. It works best with the blog's having no extra customization to next and previous links.
Let's play with the CSS.
Or
You can paste the CSS with the <style> tag in Template directly by going to Blogger Dashboard | Template | Edit HTML | Find </head> in the template and paste the whole CSS with <style> tag above </head>
Note : Just Copying and pasting the CSS will not work on your blog correctly, you have to make changes to it's position. You need to define where it should be in the right or left, to fit with your blog.
See line 18 and 31, you have to change it's values to fit with your site.
For it to only render on Post page you have to put Blogger Conditional, it will look like this.
If are not able to position the buttons at the right place, then leave comment with your blog address and i will check it and give you the correct position CSS.
Subscribe to our blog for more updates and do comment here if you found this helpful.
It can be done with CSS, copy and pasting it is easy, but writing it took about 30 mins and lot of hardwork. This tutorial will only work for Blogger, if you try this in Wordpress then it's possible that it will not work but you can make it work by putting the right selectors at the right place.
I thought of writing this tutorial because the design at DamnLOL next and previous post navigation is great and can increase your page views and also visitors time on page.
Demo
We have done it by styling the classic Next and Older post button, but to make this CSS work well, you have to remove any customization you made to the Next or Previous links, the navigation links should be classic as given by Blogger. It works best with the blog's having no extra customization to next and previous links.
Let's play with the CSS.
<style type='text/css'>
/* By Deepak Kamat
http://stramaxon.blogspot.com
*/
.blog-pager-newer-link,.blog-pager-older-link
{
position:absolute;
top:1px;
z-index:999;
color:transparent !important;
width:55px;
height:66px;
background-color:red;
}
.blog-pager-newer-link {
position:absolute;
right:-27px; /* Change this value to change the position of newer post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 0px;
background-color:transparent !important;
}
.blog-pager-newer-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 67px;
}
.blog-pager-older-link {
position:absolute;
left:-67px; /* Change this value to change the position of older post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-color:transparent !important;
}
.blog-pager-older-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:0px 67px;
}
</style>
To add this CSS, you don't have to add it by going to Add CSS in the Template Designer. If you want to paste it there, then remove the <style type='text/css'> from top and remove </style> from bottom, then it will be compatible with the Add CSS option in template designer.Or
You can paste the CSS with the <style> tag in Template directly by going to Blogger Dashboard | Template | Edit HTML | Find </head> in the template and paste the whole CSS with <style> tag above </head>
Note : Just Copying and pasting the CSS will not work on your blog correctly, you have to make changes to it's position. You need to define where it should be in the right or left, to fit with your blog.
See line 18 and 31, you have to change it's values to fit with your site.
Want those designs on Post Pages only?
If you don't want this design on home page then you have to use the HTML version of CSS, which you are supposed to paste it above </head> in your template.For it to only render on Post page you have to put Blogger Conditional, it will look like this.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* By Deepak Kamat
http://stramaxon.blogspot.com
*/
.blog-pager-newer-link,.blog-pager-older-link
{
position:absolute;
top:1px;
z-index:999;
color:transparent !important;
width:55px;
height:66px;
background-color:red;
}
.blog-pager-newer-link {
position:absolute;
right:-27px; /* Change this value to change the position of newer post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 0px;
background-color:transparent !important;
}
.blog-pager-newer-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 67px;
}
.blog-pager-older-link {
position:absolute;
left:-67px; /* Change this value to change the position of older post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-color:transparent !important;
}
.blog-pager-older-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:0px 67px;
}
</style>
</b:if>
To add it go to your Blogger Dashboard > Template > Edit HTML > Proceed > Use CTRL+F to find </head> and paste this Code above </head> and Save Template. That's it, now you have the DamnLOL like navigation links on your blog too !!If are not able to position the buttons at the right place, then leave comment with your blog address and i will check it and give you the correct position CSS.
Subscribe to our blog for more updates and do comment here if you found this helpful.
