Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong. Moreover do it at your own risk. Bloganalyzer is not responsible if anything bad happens.
- Login to your blogger account, go to Blogger dashboard and select 'Template'. You can also select the 'Template' from dropdown menu of more options. Then click on 'Edit HTML'.
- Check whether jQuery library is already included in your blog or not. If not, search for (Ctrl+f) <head> and write down the following line just below <head>.
- Now select one of these following styles and apply the associated code.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
Style #1
Screenshot
Code
Search for (Ctrl
+f
) </b:skin> and paste the following code before </b:skin>.
/*-- Bloganalyzer navigation style #1 --*/
#blog-pager {padding:0;}
#blog-pager span {
text-align:center;
display:inline-block;
font-size:20px;
padding:0;
background:#eee;
border-bottom:3px solid #ccc;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#blog-pager span:hover {background:#89CC00; border-bottom-color:#62B000;}
#blog-pager-newer-link, #blog-pager-older-link {width:270px;}
#blog-pager a {
position:relative;
min-height:70px;
display:block;
padding:5px 45px;
outline:none;
text-decoration:none;
color:#bdbdbd;
}
#blog-pager span:hover a {color:#46a03a;}
.blr-arrow {margin-top:6%; color:#bdbdbd; font-size:30px;}
.blr-arrow-left {margin-left:5%; float:left;}
.blr-arrow-right {margin-right:5%; float:right;}
.blog-pager-title {font-size:15px; color:#adadad; margin:0; font-style:italic;}
#blog-pager a:hover .blog-pager-title, #blog-pager a:hover .blr-arrow {color:#46a03a;}
Ctrl
+f
) </head> and paste the following code before </head>.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var newerLink = $('a.blog-pager-newer-link'), olderLink = $('a.blog-pager-older-link'), homeLink = $('a.home-link');
newerLink.before('<');
olderLink.before('>');
$.get(newerLink.attr('href'), function (newData) {
newerLink.append('' + $(newData).find('.post h3.post-title').text() +'');
},'html');
$.get(olderLink.attr('href'), function (oldData) {
olderLink.append('' + $(oldData).find('.post h3.post-title').text() + '');
},'html');
homeLink.append('Bloganalyzer');
});
//]]>
</script>
Style #2
Screenshot
normal
hover
Code
Search for (Ctrl
+f
) </b:skin> and paste these before </b:skin>.
/*-- Bloganalyzer navigation style #2 --*/
#blog-pager {padding:0; border-top:2px dashed #ddd; border-bottom:2px dashed #ddd;}
#blog-pager span {
text-align:center;
display:inline-block;
font-size:20px;
padding:0;
width:50%;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#blog-pager span:hover {background:#444;}
#blog-pager-newer-link {border-right:1px solid #969696; margin-left:-1px;}
#blog-pager-older-link {border-left:1px solid #b9b9b9; margin-right:-1px;}
#blog-pager a {
position:relative;
display:block;
padding:25px 45px;
outline:none;
text-decoration:none;
color:#bdbdbd;
}
.blr-arrow {margin-top:6%; color:#bdbdbd; font-size:30px;}
.blr-arrow-left {margin-left:5%; float:left;}
.blr-arrow-right {margin-right:5%; float:right;}
.blog-pager-title {font-size:15px; color:#666; margin:0;}
#blog-pager a:hover .blog-pager-title, #blog-pager a:hover .blr-arrow {color:#fff;}
Ctrl
+f
) </head> and paste the following code before </head>.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var newerLink = $('a.blog-pager-newer-link'), olderLink = $('a.blog-pager-older-link');
newerLink.before('<');
olderLink.before('>');
$.get(newerLink.attr('href'), function (newData) {
newerLink.append('' + $(newData).find('.post h3.post-title').text() +'');
},'html');
$.get(olderLink.attr('href'), function (oldData) {
olderLink.append('' + $(oldData).find('.post h3.post-title').text() + '');
},'html');
});
//]]>
</script>
Style #3
Screenshot
Mouse hover on newer post button
Mouse hover on home button
Mouse hover on older post button
Code
Search for (Ctrl
+f
) </b:skin> and paste the following code before </b:skin>.
/* ----- Page Navigation ----*/
#blog-pager {clear:both; position:relative; height:39px;}
#blog-pager span {position:absolute; margin:5px 0;}
#blog-pager a {color:#fff; text-decoration:none;}
#blog-pager a:hover {color:#eee; text-decoration:none;}
#blog-pager-newer-link {left:2%;}
#blog-pager-older-link {right:2%;}
#home-link {left:45%;}
#blog-pager-title {
position:absolute;
padding:5px;
background-color:#eee;
border-bottom:2px solid #ccc;
}
#blog-pager span {
border-bottom:2px solid #346ebb;
text-decoration:none; color:#fff;
margin:0 2px; padding:4px 10px;
background:#4795ff;
}
#blog-pager span:hover {background:#075fc3; border-bottom-color:#1a3c6b; text-decoration:none;}
Ctrl
+f
) </head> and paste these before </head>.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var newPage = $('a.blog-pager-newer-link'), oldPage = $('a.blog-pager-older-link');
var newPageTitle = '', oldPageTitle = '';
$.get(newPage.attr('href'), function (dataNew) {
newPageTitle = $(dataNew).find('.post h3.post-title').text();
},'html');
$.get(oldPage.attr('href'), function (dataOld) {
oldPageTitle = $(dataOld).find('.post h3.post-title').text();
},'html');
var xOffset = 10, yOffset = 20;
$('#blog-pager span').mouseover(function(e){
var value = '';
if($(this).attr('id') == 'blog-pager-newer-link') {
value = newPageTitle;
}
else if($(this).attr('id') == 'blog-pager-older-link') {
value = oldPageTitle;
}
else if($(this).attr('id') == 'home-link') {
value = 'Bloganalyzer';
}
$('body').append(''+ value +'');
$('#blog-pager-title').css('top',(e.pageY - xOffset) + 'px').css('left',(e.pageX + yOffset) + 'px').fadeIn('fast');
}).mousemove(function(e){
$('#blog-pager-title').css('top',(e.pageY - xOffset) + 'px').css('left',(e.pageX + yOffset) + 'px');
}).mouseout(function(){
$('#blog-pager-title').remove();
});
});
//]]>
</script>
This widget is rarely used in blogger platform. So be the first one to implement this in your blog.
I tried my best to keep things as simple as possible. Any type of question related to this will be appreciated.
Happy Blogging.
Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.
0 comments so far on 'Show post titles in Blogger with Blogger Navigation'