How to implement this code into wordpress

Status
Not open for further replies.

XTU_short

Member
18
2012
1
0
I would like to add next / previous buttons on my post pages similar to DamnLol. I found this code code online but its for Blogger. Can someone help me with converting this to Wordpress? Here's the code:

Code:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.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>

Thanks guys
 
2 comments
That's just css, which works everywhere. You need the backend (php code) to display the pagination. Insert this in the page you wish to display the next/prev buttons:

PHP:
<div class="blog-pager-older-link"><?php previous_post(); ?></div>    <div class="blog-pager-newer-link"><?php next_post(); ?></div>

Then add styles to your style.css file:

PHP:
.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;   
}

You're most likely will have to edit the css to work with your theme, but that should get you started.
 
i really appreciate it. I will try this now

---------- Post added at 03:56 PM ---------- Previous post was at 03:12 PM ----------

Issue resolve by RT . He went above and beyond to help me out. You guys have great mods here. Cheers
 
Status
Not open for further replies.
Back
Top