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!
Post Comments (Atom)
Click on a single comment to hide/show its text
31 comments:
@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.
@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
@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.
@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.
there is new trick ... xixixi :P
hi there, @MSpotilas can you help w please.. can you check my test blog here: http://tse-responsive.blogspot.com/
thanks in advance
@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.
@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!
@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.
sorry, the blog is newsmovingmarkets.com
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?
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.
@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.
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.
@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 == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 :)
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
@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. :)
@MS-potilas
It Works! Thanks so much.
@MS-potilas
how to set character limit for posts title?
@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).
thanks for the trick can i use it in this blog ? communiqué de press publicité facebook . thanks in advence
@Michael Adam
I'm sorry but it won't work because that blog is a WordPress blog and this hack is for Blogger blogs.
@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.
@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 :)
@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 :)
@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. :)
Thanks for sharing the wonderful content.
Best SEO Company services in Coimbatore
EFFECTIVE AND POWERFUL LOVE SPELL CASTER AND LOTTERY SPELL 2019 GBOJIESPIRITUALTEMPLE@GMAIL. COM OR WHATSAPP HIM :+2349066410185 Hi i am from USA I have just experience the wonders of Dr. gbojie love spell, that have been spread on the internet and worldwide, How he marvelously helped people all over the world to restored back their marriage life and get back lost lovers, and also help to win lottery. I contacted him after going through so many testimonies from different people how he help to bring back ex lover back, i told him about my husband that abandoned me about 8 months ago, and left home with all i had.. Dr GBOJIE only told me to smile and have a rest of mind he will handle all in just 24 hours, After the second day my husband called me, i was just so shocked, i pick the call and couldn't believe my ears, he was really begging me to forgive him and making promises on phone.. He came back home and also got me a new car just for him to proof his love for me. i was so happy and called Dr Gbojie and thanked him, he only told me to share the good news all over the world .. Well if you need an effective and real spell caster contact Dr gbojie Via email: gbojiespiritualtemple@gmail.com, gbojiespiritualtemple@yahoo.com or Call or WhatsApp: +2349066410185 website : http://gbojiespiritualtemple.website2.me/
Very Nice Article
I really like it
Please carry on
Waiting for your next post
Good job
Nice blog,keep sharing. if u have time visit our
best website design company in coimbatore
seo companies coimbatore
digital marketing company in coimbatore
Luxury Cars Detailing & Polishing at urcae.com .
See the hack to make the 'Post a Comment' link bigger.
Post a Comment