Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says “Older Posts”, “Newer Posts” and “Home” and help us to move through the blog posts. This tutorial will show you how to change the word “Older Posts” and “Newer Posts” for post titles and make these to appear in a box “fading” when you scroll down the page.

blogger gadgets, navigation for blogger

You can see it in action on this demo blog – when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search – using CTRL + F – for this line:

<b:include name=’nextprev’/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:include name=’nextprev’/>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’blog-pager-box’>
<h4>Other posts published:</h4>
<b:include name=’nextprev’/>
</div>
</b:if>

Note: you can change the “Other posts published” title with your own

Step 3. Now add just above </head> the following code:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/>
<script>
// <![CDATA[
$(function() {
$(‘#blog-pager-box’).toggle()
.css({
width: ‘520px’,
height: ‘150px’,
position: ‘fixed’,
padding: ‘1em’,
bottom: 0,
right: 0,
background: ‘url(http://4.bp.blogspot.com/-2qUvFgMRqk4/UaD7GSA7C8I/AAAAAAAADbI/eh-qGOnAmeM/s1600/paper.jpg)’
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$(‘#blog-pager-box’).fadeIn();
} else {
$(‘#blog-pager-box’).fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $(“a.blog-pager-newer-link”).attr(“href”);
$(“a.blog-pager-newer-link”).load(newerLink+” .post-title:first”, function() {
var newerLinkTitle = $(“a.blog-pager-newer-link:first”).text();
$(“.blog-pager-newer-link”).html(“<div>Newer Posts:</div>” + newerLinkTitle);
});
var olderLink = $(“a.blog-pager-older-link”).attr(“href”);
$(“a.blog-pager-older-link”).load(olderLink+” .post-title:first”, function() {
var olderLinkTitle = $(“a.blog-pager-older-link”).text();
$(“.blog-pager-older-link”).html(“<div>Older Posts:</div>” + olderLinkTitle);
});
});
// ]]>
</script>

<style type=’text/css’>
<!–
#blog-pager-box {
box-shadow: 0 0 3px #AEAEAE;
z-index:9;
}

#blog-pager-box h4 {
margin:0;
padding:0;
color:#4898B9; /* Widget’s title color */
font-size:16px; /* Title font size */
}

#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color: #4B4B4B !important; /* Color of the links */
float: left;
width: 500px;
clear:both;
}

a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
 
a.blog-pager-newer-link:before {
content: url(http://1.bp.blogspot.com/-2hKXB7FANlI/UaD_wh_InyI/AAAAAAAADbs/S0H4hok2te0/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(http://4.bp.blogspot.com/-VPxzgLQCgrM/UaD_tGXPfnI/AAAAAAAADbk/owLQci4BaYY/s1600/forward.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
 
#blog-pager div {
color:#0577AB; /* Color for the “Newer Posts” and “Older Posts” text */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#4898B9; /* Color for the “Newer Posts” and “Older Posts” text */
}
–>
</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

– There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
– In green you can see where to change the text colors.
– The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the “height” of the scroll is greater.
Step 4. Now, Save the Template and that’s it!

You can also change the “Older Posts” and “Newer Posts” links with posts titles or images.

Related Posts

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will most likely be useful for you….

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show…

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers can “play” with certain…

Share Blog Posts in Social Media using AddThis

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want to use the…

Add a Pinterest Pin It Mouseover Button on Blogger Images

Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media…

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

How a website’s content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be…

Leave a Reply

Your email address will not be published.