Blogger Navigation by default have 3 buttons newer posts, older posts and home. Today in this tutorial we are going to demonstrate how to arrange blogger navigation after manipulating little bit of Jquery, CSS and Font Awesome, we will explore two different methods for making the navigation more attractive. The trick we are going to show here is not new it first shared by MS-Potilas in 2013 but as i have done research for this hack and finally i come to know that not more hundreds bloggers using the hack or you might say only hundreds of bloggers love this hack.
We called this hack “change older newer links with post title” it will change your default blogger navigation into your post title which is by default “Newer-posts, Older-posts and Home”. and in our second method we will explore how to show image from post as well as snippet of summary.
To apply this hack you have to edit your blog template source code so ensure that you have make backup copy of your template in case of any error.
So let’s start .
Add Fontawesome into blogger
- Goto template>> edit html and search for the following code.
- In the <head> of your template, just after opening head tag add the following piece of code (Stylesheet Link).
-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />
<head>
Note:- If you already have applied fontawesome in your template then skip the above step and proceed to step below.
Installation Of The Javascript And CSS
The hack require Jquery to work so if you alread have loaded jquery in your template then just remove the jquery link from the code below if not then proceed the code as it is.- Goto template>> edit html and search for the following code.
- paste the following code just before the head tag (the code you have search in the step above)
</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.oldernewerpost {
cursor: pointer;
padding: 10px 20px;
margin: 0px 0px;
text-align: center;
width: 300px;
background: #495061;
overflow: hidden;
-webkit-transition-property: background color;
-webkit-transition-duration: .4s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background color;
-moz-transition-duration: .4s;
-moz-transition-timing-function: ease-out;
-o-transition-property: background color;
-o-transition-duration: .4s;
-o-transition-timing-function: ease-out;
transition-property: background color;
transition-duration: .4s;
transition-timing-function: ease-out;
}
.oldernewerright:before {
font-family: FontAwesome;
color: #fff;
content: "
\f104";
float: left;
vertical-align: middle;
font-weight: bold;
font-style: normal;
text-decoration: inherit;
}
.oldernewerleft:before {
font-family: FontAwesome;
color: #fff;
content: "
\f105";
float: right;
vertical-align: middle;
font-weight: bold;
font-style: normal;
text-decoration: inherit;
}
.oldernewerleft {
float: right;
}
.oldernewerright {
float: left;
}
.home-link {
margin-top: 5px;
display: none;
}
.oldernewerpost:hover {
background-color: #3D4351;
}
.oldernewerpost a {
color: #fff;
}
.oldernewerpost a:hover {
text-decoration: none;
}
.oldernewerpost img {
/* thumbnail properties */
margin-top: 2px;
padding: 2px;
width: 72px;
}
.oldernewerpost .title {
line-height: 1.1;
font-size: 15px;
font-weight: bold;
padding: 0 5px 5px;
}
.oldernewerpost .summary {
border-top: 1px dashed #777777;
border-bottom: 1px dashed #777777;
color: #404040;
font-size: 10px;
line-height: 1;
padding: 5px;
text-align: left;
}
</style>
<script type='text/javascript'>
// Post titles, thumbnails and summaries to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2013. See http://yabtb.blogspot.com/2013/11/add-post-titles-thumbnails-and.html
//<![CDATA[
//
// Configuration:
var maxSummaryLength = 160;
// In these you can use [title], [summary]:
var newerLink = '<div class="oldernewerpost oldernewerleft" title="Next - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Next</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
var olderLink = '<div class="oldernewerpost oldernewerright" title="Previous - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Previous</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
// configuration ends
//
function setLink(selector, template, defthumb, entry) {
var date = entry.published.$t.match(/\d+/g);
date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
var url = $(selector).attr("href");
var summary = $("<p>"+entry.content.$t+"</p>").text();
if(summary.length > maxSummaryLength) {
summary = summary.substring(0, maxSummaryLength);
var indexBreak = summary.lastIndexOf(" ");
summary = summary.substring(0, indexBreak)+"...";
}
var htm = template.replace(/\[title\]/g, entry.title.$t);
htm = htm.replace(/\[url\]/g, url);
$(selector).replaceWith(htm);
}
function setOlderLink(entry) { setLink("a.blog-pager-newer-link", olderLink, defaultOlderImage, entry); }
function setNewerLink(entry) { setLink("a.blog-pager-older-link", newerLink, defaultNewerImage, entry); }
$(window).load(function() {
window.setTimeout(function() {
var timestamp = $(".published").attr("title");
if(timestamp && timestamp != "")
$.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
if(postindex > 1)
$.getJSON("/feeds/posts/default?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
setNewerLink(resp.feed.entry[0]);
var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
});
else
$.getJSON("/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
});
}, 250);
});
//]]>
</script>
</b:if>
You can customize the look and feel of the buttons by playing with CSS code we have shared above, In case of any error during installation (in the code above) of the script or having trouble while editing, please don't hesitate to let us know, we will do the job free (it will just cost you one smile for us). Hope you like this, Peace and blessing bodies.. ! :)
on
No comments Post Yours!
Post a Comment