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.
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.
Screenshot:
Step 2. REPLACE the code above with this one:
Note: you can change the "Other posts published" title with your own
Step 3. Now add just above </head> the following code:
Note that this gadget uses jQuery, so try to have only one version.
- 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.
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 != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg93GSbikopinvhCLWm_tAxIelUGNtoSZ2sgyMENYvEOxKtisKGO-cPR34dUghu1tSam-rXw0ivveliR_ieUL8HLi5LEAY51XoFxrgXebm1FVo54lqNu_zn2FCjkEjj0S8ST6kNntAfcOS6/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHlCv1_HNbzkQqT9AKearq-fDzj2-k3Yp6mIKq8rzgcHN-QU8h6Ik1V6Cezz9TCOJb3RssmN46oL5gXtSsoH_g-NM0V1SQIoE85DSn0lG2OFt8dq2H7TtR1rl9SdtTXn64-czDAFRqew/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2nTTV_x8vOypZShTzFNNWQVPs7eh0a31FoUQmVQ0dYe7grhy7ufGc4YDr5E6efdwiJXTZKu0ZhKQAoThAKXzXdIElOXxGTLX0-1Qy3zZY7JEoqRXEZBuejISEY5HKdd4sVOXX8V6GnI/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.
Today's tutorial will take blogger comment system one step more closer to wordpress commenting engine. I was amazed today when I discovered that 
This is the first plugin of its kind created for websites which share downloadable resources. The plugin amazingly works with all major blogging platforms like wordpress and blogger blogs. It can even be used in static Sites or any CMS you may be using. This tool will count and display download stats whenever a visitor downloads a resource form your site. The data is stored at your firebase free account. Luckily we are amongst very few who have started developing tools using the newly introduced 
Its tough being a final year B.E student and yet running blogs. Exams for some may sound horrible but it means a complete two months deadlock to my online activities. I just can't express how great I am feeling at this moment, talking to you after several weeks. It felt more like missing my great family and friends. Internet and technology waits for no one, during my absence I observed tremendous developments across major platforms from Blogger till social Media. I was shocked today when I saw the new layout of Google+ Profiles. Changes are going fast at Google side. Amazingly they have even integrated their 
For any field that you might pick for yourself, has its own benchmarks of perfection and if you talk about blogging, Mashable is a winner here. No matter which niche you choose for your blog, there is no doubt that the best place to grab your hands on the latest news related to the online world and 
Making money online and earning your livings via your laptop is becoming one of the most popular earning methods. Statistics have shown that there has been a significant increase in the number of people who are cashing their talent by utilizing the online platform, which for sure is a good replacement of any other real world job.
