Blogger and WordPress do not provide any
user-friendly gadget for adding advanced features to your blog, and one such is
to add previous-next button. But still, it is an easy thing to do and makes
your blog look more appealing and easy to access.
For that, all you need to do is play with HTML
elements in two steps:
Step
-1>>
·
Go To Blogger dashboard > Template > Backup the Template.
·
Click on Edit
HTML botton
·
In the blogger search box of the
template, search for ]]></b:skin> .
·
Just above ]]></b:skin> ,
paste the following coding.
/* --- Previous and Next button
Section --- */
#blog-next-link{position:absolute;
right:48%;text-transform: uppercase;}
#blog-previous-link{position:absolute;left:-2%;text-transform: uppercase;}
.PreviousLink{position:absolute;bottom:
-18px; display:block;text-decoration:none;width:280px;height:30px;opacity:0.2;}
.PreviousLink:hover,.PreviousLink.showFull{background:rgba(0,0,0,0.8);
opacity:1}.PreviousLink:hover
.detail,.PreviousLink.showFull .detail{width:625px}
.PreviousLink.label{weight:bold;family:consolas;size:16px;
color:#ffffff;display:block;position:absolute;top:5px;left:14px;
right:14px;-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);opacity:0.5}
.PreviousLink
.detail{width:0;line-height:1.8em;}
.PreviousLink .detail
span{padding:15px;display:block;height:90px;overflow:hidden;width:195px}
.PreviousLink .detail
span:hover{color: #BE9494}
.PreviousLink.arrow{width:0;height:0;font-size:0;height:0;position:absolute;top:50px}
#prevLink{left:40px}
#prevLink .arrow{border-right:20px
solid rgba(231,231,231,0.3);border-bottom:20px solid
transparent;border-top:20px solid transparent;
left:-20px}
#prevLink:hover
.arrow,#prevLink.showFull .arrow{border-right-color:rgba(231,231,231,0.6)}
#nextLink{right:30px}#nextLink
.detail{right:70px !important;left:auto}
#nextLink>span{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
#nextLink .arrow{border-bottom:20px
solid rgba(231,231,231,0.3);border-left:20px solid
transparent;border-right:20px solid transparent;
right:-30px}
#nextLink:hover
.arrow,#nextLink.showFull .arrow{border-bottom-color:rgba(231,231,231,0.6)}
.PreviousLink{border:5px solid
gray;margin:0px;opacity:1;
background-color: #990000;}
.PreviousLink:hover,.PreviousLink:active,.PreviousLink:focus{background-color:
blue;}.PreviousLink .label{opacity:1
!important}
.PreviousLink .arrow{
position:absolute;top: 15%;
left:20px;
width:
0;
height:
0;
border-top:
10px solid transparent;
border-bottom:
10px solid transparent;
border-right:10px
solid white;}
#nextLink{right:10px
!important}#prevLink{left:10px !important}
.NextLink{position:absolute;bottom:
-18px; display:block;text-decoration:none; width:280px;height:30px;opacity:0.2;}
.NextLink:hover,.NextLink.showFull{background:rgba(0,0,0,0.8);opacity:1}
.NextLink:hover .detail,.NextLink.showFull
.detail{width:625px}
.NextLink.label{weight:bold;family:consolas;size:16px;color:#ffffff;
display:block;position:absolute;top:5px;left:14px;right:14px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);opacity:0.5}
.NextLink
.detail{width:0;line-height:1.8em;}
.NextLink .detail
span{padding:15px;display:block;height:90px;overflow:hidden;width:195px}
.NextLink .detail span:hover{color:
#BE9494}
.NextLink
.arrow{width:0;height:0;font-size:0;height:0;position:absolute;top:50px}
#prevLink{left:40px}
#prevLink .arrow{border-right:20px
solid rgba(231,231,231,0.3);border-bottom:20px solid
transparent;border-top:20px solid transparent;
left:-20px}
#prevLink:hover
.arrow,#prevLink.showFull .arrow{border-right-color:rgba(231,231,231,0.6)}
#nextLink{right:30px}#nextLink
.detail{right:70px !important;left:auto}
#nextLink>span{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
#nextLink .arrow{border-bottom:20px
solid rgba(231,231,231,0.3);border-left:20px solid
transparent;border-right:20px solid transparent;
right:-30px}
#nextLink:hover
.arrow,#nextLink.showFull .arrow{border-bottom-color:rgba(231,231,231,0.6)}
.NextLink{ border:5px solid
gray;margin:0px;opacity:1;background-color: #990000;}
.NextLink:hover,.NextLink:active,.NextLink:focus{background-color:
blue;}.NextLink .label{opacity:1
!important}
.NextLink .arrow{
position:absolute;top: 15%;
right:20px;
width:
0;
height:
0;
border-top:
10px solid transparent;
border-bottom:
10px solid transparent;
border-right:10px
solid white;
-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
#nextLink{right:10px
!important}#prevLink{left:10px !important}
|
Step
-2>>
In the template window only, search for <b:includable
id='nextprev'> to find the rest of coding upto the line <a class='home-link' expr:href='data:blog.homepageUrl'>. The code may vary from template to template. But only first and
last line matters. Replace the section of code:
<b:includable id='nextprev'>
.
.
.
.
.
.
<a
class='home-link' expr:href='data:blog.homepageUrl'>
|
with :
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if
cond='data:newerPageUrl'>
<span
id='blog-pager-newer-link'>
<!-- Next post -->
<a class='NextLink' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle' id='nextLink'><div
class='relative'>
<span class='arrow'/>
<span class='label'>Next</span>
</div></a>
</span>
</b:if>
<b:if
cond='data:olderPageUrl'>
<span
id='blog-pager-older-link'>
<!—Previous post-->
<a class='PreviousLink' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle' id='prevLink'><div
class='relative'>
<span class='arrow'/>
<span class='label'>Previous</span><br/>
</div></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'> |
Customise:
· The position of the button is set absolute to make it relative to the post
window position (other options: fixed, relative, inherit, etc)
· Set the width, height and
opacity of the buttons.
· Label means the text you want to add to the button. Change the
attributes such as weight, size, family, rotation, opacity of the text.
· Change the background
colour of the button here)
·
Change background
on mouse hover
·
Set the attributes of an additional arrow
such as position and size – two different arrows for previous and next buttons
·
change
the text to appear on button
No comments:
Post a Comment