Pages

Wednesday, November 27, 2013

28

Add post titles, thumbnails, and summaries to Older and Newer Post links

By default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: Add Post titles to Older and Newer Post links – reloaded. In one comment I was asked if it would be possible to display also thumbnail and post summary. It is.

I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):


Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.

Open blog's template, and put this code before </head>:



If you have any previous hack for Newer/Older post links, remove it. Save the template and test.

Configuration

You can configure the following javascript variables:

maxSummaryLength - how many characters can summary text be
olderLink - contains the template for older link
newerLink - template for newer link
defaultOlderImage - if older post has no thumbnail, use this image instead
defaultNewerImage - if newer post has no thumbnail, use this image instead

In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

28 comments:

Chandrakshi Creation said... [reply]

@MS-potilas Sorry for responding lately as I had not checked my other mail for quite some time. But thank you so much for this helpful trick you are a genius I really appreciate the fact that you kindly accepted my request. Thank you once again and I shall implement this trick ASAP.

Chandrakshi Creation said... [reply]

@MS-potilas Hi I tried implementing this trick just like you explained in your post but it's not working like your demo, could you help and explain why? Have I missed on something mentioned in your tutorial?

Here is the link to a post http://justforcheckingstuffs.blogspot.com/2013/01/post-b.html where I've posted your code just before the end of the head section of my template as you mentioned in your tutorial.

Thanks in advance

MS-potilas said... [reply]

@Chandrakshi Creation
Hi,
my hack depends on the template having post timestamp on the posts, and it is turned off on your template. You can change that in Design|Layout|Blog Posts|Edit. If you don't want to display the timestamps, then you can hide it using CSS.

Chandrakshi Creation said... [reply]

@MS-potilas

Hi thank you for your kind help finally it's working just like the way I wanted however I'd love make some changes to the css and try different variations. Thank you once again and I will surely come up with some new questions and curiosity until then take care.

Beben Koben said... [reply]

there is new trick ... xixixi :P

Jhanno SJY Muñoz said... [reply]

hi there, @MSpotilas can you help w please.. can you check my test blog here: http://tse-responsive.blogspot.com/

thanks in advance

MS-potilas said... [reply]

@Jhanno SJY Muñoz
Hi, sorry for the late answer. I checked your blog. The template already has javascript to set the next/previous links, so I think my hack won't work with that. You should have basic Blogger template to use my code without modifications.

Jhanno SJY Muñoz said... [reply]

@MS-potilas

Thank you very much for the response. I think I got the trick for this hack. Take a look ;))

I just added costumed CSS for different look and feel!

cheers for this great work dude!

D Volatility said... [reply]

@MS-potilas, Hi I was just editing my template and everything was looking really good until I noticed that the blog wasn't showing the older and newer titles. Do you have any idea why it stopped working? All of the code should be in place. I have no idea what happened. Thanks so much for this hack.

D Volatility said... [reply]

sorry, the blog is newsmovingmarkets.com

D Volatility said... [reply]

I think I figured out why it's not working. For some reason when I changed my feed to "short" from "until jump break" it stopped working. Very weird. Do you have any idea why that is? I switched it back on my other blog and started to work again. The reason I want to change the feed option is because I was putting the jump right after every title, so the feed was just saying read more. Do you know if there is a way to fix this. Kind of a weird, no?

D Volatility said... [reply]

One more thing (sorry), it appears that it doesn't work only when the Blogger feed is set to "short". It works when it's on "until jump break" and "full".

Thanks again for your great hack.

MS-potilas said... [reply]

@D Volatility
The feed format is slightly different when using short feed and so the script won't work without changes. Glad you figured it out.

El Mexicano said... [reply]

Hi, can you tell me please how to add a script to the template in order to appear at the end of every single post above the comments? Thanks in advance.

MS-potilas said... [reply]

@El Mexicano
Hi,

edit the template, jump to widget Blog1, and scroll down to find the following block of code:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</div>

You can add your script before the two "include comments" lines (after the b:if lines). First one is for pages, second is for posts. You can first add some text just to test that it is shown, then replace it with the script. Hope this helps :)

D Volatility said... [reply]

Hi @MS-potilas

I was wondering if the thumbnails could be resized without messing up the popular-post thumbnails since Blogger uses 72-c for the default thumbnail size. I tried to figure it out here (http://www.tudor-anghelina.com/2013/10/how-to-easily-resize-blogger-popular.html), but I got lost. Thanks,

Matt

MS-potilas said... [reply]

@D Volatility
Hi, it can be done, but it is easiest to do by modifying this hack.

Search line:
return thumburl;

replace with:
return thumburl.replace('s72-c', 's144-c');

(supposing you want 144 pix wide thumbnails). Also change the width in CSS:

.oldernewerpost img {
/* thumbnail properties */
margin-top: 2px;
padding: 2px;
width: 144px;
}

To resize also the placeholder arrow pics, change these two lines:

var defaultOlderImage = "https://lh5.googleusercontent.com/-rK3a8daWjFs/UpWXOb4up-I/AAAAAAAABo4/2RfPPCI-VPg/s72/older.png";
var defaultNewerImage = "https://lh4.googleusercontent.com/-etSvFmkqF5M/UpWXOXHdEVI/AAAAAAAABo8/wMBH4bQGug4/s72/newer.png";


by adding "-c" to both lines like this (bolded part).

var defaultOlderImage = "https://lh5.googleusercontent.com/-rK3a8daWjFs/UpWXOb4up-I/AAAAAAAABo4/2RfPPCI-VPg/s72-c/older.png";
var defaultNewerImage = "https://lh4.googleusercontent.com/-etSvFmkqF5M/UpWXOXHdEVI/AAAAAAAABo8/wMBH4bQGug4/s72-c/newer.png";


And this should do it. :)

D Volatility said... [reply]

@MS-potilas

It Works! Thanks so much.

Mohammad Ishtiaq said... [reply]

@MS-potilas

how to set character limit for posts title?

MS-potilas said... [reply]

@Mohammad Ishtiaq
Hi,

it can be done for example like this: search for line:

var htm = template.replace(/\[title\]/g, entry.title.$t);

replace that with:

title = entry.title.$t;
if(title.length > 60) {
title = title.substring(0, 60);
var indexBreak = title.lastIndexOf(" ");
title = title.substring(0, indexBreak)+"...";
}
var htm = template.replace(/\[title\]/g, title);

This sets the max length at (about) 60 chars, title is cut at space. You could store the 60 in a variable, like maxSummaryLength (for example maxTitleLength).

Michael Adam said... [reply]

thanks for the trick can i use it in this blog ? communiqué de press publicité facebook . thanks in advence

MS-potilas said... [reply]

@Michael Adam
I'm sorry but it won't work because that blog is a WordPress blog and this hack is for Blogger blogs.

Chandrakshi Creation said... [reply]

@MS-potilas Hope all is good at your end! I have a query again is it possible to achieve this hack just using pure JavaScript and not jQuery and if so then how? Thank you and hope to hear from you soon.

MS-potilas said... [reply]

@Chandrakshi Creation
Hi,

it is possible, although requires work. I'll give you the places in the code you should modify. Basically everything, that starts with $(.

1. Finding the url of the first image. You could do that with a regex, here is some possible solution: http://stackoverflow.com/questions/24601848/node-js-grab-the-first-image-in-an-html-string

d = $("<p>"+entry.content.$t+"</p>").find("img").attr("src");
if(d)
thumburl = d;
else
thumburl = def;


2. Get href from certain link. It may be easier to reference the element by id, when using javascript.

var url = $(selector).attr("href");

3. Strip tags from html. This might work https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/

var summary = $("<p>"+entry.content.$t+"</p>").text();

4. Replace html code in an element. It may be easier to reference the element by id (see 2.).

$(selector).replaceWith(htm);

5. Execute code on page load. You could use addEventListener in javascript.

$(window).load(function() {

6. Get title attribute from element with class "published". Use getElementsByClassName in javascript.

var timestamp = $(".published").attr("title");


These point you to the right direction, although there is still work to do. You might want to reconsider using jQuery after all :)

Mohammad Ishtiaq said... [reply]

@MS-potilas

Hi,
Your support really deserve Hands up for you, Thank you.
I was inspired from you in the past but gonna be inspired again for your great support, as you are one man army.

Peace and blessing for you :)

Chandrakshi Creation said... [reply]

@MS-potilas

Hi!

Thank you for the prompt response, I will give it a try, and thank you once again for your kind support as always. :)

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: