Register Login Featured
Stats: 1839 members, 1468 topics. Date: Monday, 18th June 2018


General Wordpress Blogspot Forums Crypto Traffic Money

How To Add Post Titles To Previous and Next Posts Footer Links On Blogger Blogs

Now Trending on GithubNG

How To Add Post Titles To Previous and Next Posts Footer Links On Blogger Blogs by : 4:18 pm On November 22, 2017

By default, only links to older and newer posts are available for post to post navigation on blogger blogs. However, having the titles of this posts titles attached to the link gives I a more sophisticated look. Not to mention, it can increase the chances of he posts getting viewed by a reader thereby increasing pageviews.

It’s quite very easy to make Previous and Next Posts display with their titles on blogger blogs. If you want your blogger blog to also show post titles along with the Previous and Next link, then follow the procedure outlined below:

==> First, ensure to have a backup of your template, in case anything goes wrong, you can easily restore it.

==> Open your template in the HTML Editor.

==> Scroll down to the end of your template. Or search for </body>.

==> Just before the closing </body> tag, or before the numbered pagination if present, paste the following code:

<b:if cond=’data:blog.pageType== &quot;item&quot;’>
<script type=’text/javascript’>
//<![CDATA[
(function($){
var newerLink = $(‘a.blog-pager-newer-link’);
var olderLink = $(‘a.blog-pager-older-link’);
$.get(newerLink.attr(‘href’), function (data) {
newerLink.html(‘<b>Next &#187;</b><br>’+$(data).find(‘.post h1.post-title‘).text()+'</br>’);
},”html”);
$.get(olderLink.attr(‘href’), function (data2) {
olderLink.html(‘<b>&#171; Previous</b><br>’+$(data2).find(‘.post h1.post-title‘).text()+'</br>’);
},”html”);
})(jQuery);
//]]>
</script>
</b:if>

 

==> Now save the template and check your blog posts if the titles are now being displayed or not (both on mobile and desktop view). If its not being displayed, you have to identify the type of heading tag being used to wrap your blog posts as well as the CSS class, both on mobile and desktop view. You should carefully insert it into the code separated by a comma.

For example, if my template is using <h2> and not <h1> for my post heading but the same CSS class, I will insert it to my code as seen below:
<b:if cond=’data:blog.pageType== &quot;item&quot;’>
<script type=’text/javascript’>
//<![CDATA[
(function($){
var newerLink = $(‘a.blog-pager-newer-link’);
var olderLink = $(‘a.blog-pager-older-link’);
$.get(newerLink.attr(‘href’), function (data) {
newerLink.html(‘<b>Next &#187;</b><br>’+$(data).find(‘.post h1.post-title, .post h2.post-title‘).text()+'</br>’);
},”html”);
$.get(olderLink.attr(‘href’), function (data2) {
olderLink.html(‘<b>&#171; Previous</b><br>’+$(data2).find(‘.post h1.post-title, .post h2.post-title‘).text()+'</br>’);
},”html”);
})(jQuery);
//]]>
</script>

</b:if>

So keep experimenting till it shows both on mobile and PC.

==> Once you’ve gotten your Previous and Next Posts titles showing with the links, you should add CSS to have them placed and arranged well. You can add the following CSS to your blog skin section (.i.e. before ]]></b:skin>).

#blog-pager-newer-link {float:right; padding:0; max-width:45%; text-align:right}#blog-pager-older-link {float:left; padding:0; max-width:45%; text-align:left}

==> Save the changes and check your blog for he effect. You can also modify the CSS to your liking.

0

Publication author

offline 7 months

GitHubNg.Com

18

GitHubNG.com - An All in one Solution Forum Where we discuss Blogging related Issues, Make Money Online, Traffic and Adsense tips. Etc.

Comments: 101Publics: 663Registration: 31-10-2017

Reply


You must be logged in to post a comment.

 


(Go Up)

Links: (0) (1) (2) (3) (4) (5) (6) (7) (8) (9)

GitHubNg.Com - Copyright © 2017 - Henry Ijogu. All rights reserved. See How To Advertise.
Disclaimer: Every member is solely responsible for anything that he/she posts or uploads on this Forum.

v3.0.1

Authorization
*
*
Registration
*
*
*
Password generation