January 25, 2010

BEST Method To Truncate Posts In Blogger/BlogSpot Blogs


This post is important for all the bloggers, blogging on Googles Blogger platform. Whether you are presently using any post-truncating method or not, you should read this post at least once.

Best Read More hack for Blogger blogsTruncating posts on homepage/archives/label-pages is a must for every blog. If you care for your readers and search engines, then you should know that truncating the posts will make both of them happy.
By showing only a small part instead of the complete post, you will save some bandwidth and time of your readers. And similarly search engines will load your pages quickly too. Moreover your readers will not miss the posts present at the bottom and when they click on the "read more" links to read the posts in detail, it will increase your pageviews too.
If you are working on Blogger/BlogSpot platform, then you have at least 3 ways to truncate the posts. Two of them involve javascripting to truncate the posts and the third one (that is officially announced and suggested by Blogger) is non-javascript based. You would have seen all three of them being used by different bloggers. Some of the newly developed Blogger-Custom-Templates use the javascript based automatic-read more hack.

Sponsored Ads


What's the problem?
As the first two hacks, (viz. automatic read more hack, and manual read-more using <span class="fullpost">) use javascript to truncate the posts, so most of your readers (at least 90%) will be able to see the truncated posts, but search engines like Google/Yahoo without javascript support in their browsers will not see your blog-pages with truncated posts. So, even though you are using the truncating (read-more) hack in your blog, they are of no help in optimizing your blog for search engines.

If you are also using one of those javascript based techniques to truncate your posts, then I will advice you to stop using that method and better switch to the third option (non-javascript based).

The solution
So I will suggest you to use the official method of truncating posts suggested by Blogger: i.e. use <!-- more --> anywhere in the blog-post to truncate it. Read the complete post here.
And if you are facing any problems in using this method, then read; how to fix errors in Blogger Read-More hack.

Benefits you will get by using this method:
1. Posts are truncated for both your readers and search engines.
2. Decreases loading time of your blog (you can check it in your Google Webmasters account), as posts are truncated for search-engine-bots too.
3. Increases page-views.

A suggestion to further optimize your blog:
Limit the non-truncated part of the posts to only 1 image (that means, show only 1 image per post in the homepage). Hide extra images in the hidden/truncated part, as it will decrease the loading time of your hompage/archive pages.

Check it yourself... - Immediately after implementing this hack in all the blog posts (being shown in the homepage), you can check and see the improvements your blog has made:
1. Go to Pingdom-Tools and note down the loading time of your blog.
2. Now apply this hack to all the posts present on your blogs homepage, and then again check the loading time of your blog at Pingdom.
You'll notice the difference;
- in the total HTML size of the blog (it will decrease) and,
- in the loading time (it will also decrease, that means your blog now loads faster).

Image credits


45 comments:

Adam said...

I use the Read More provided by Blogger. When I use an image at the top of my posts, there is no problem.

However, when I embed a youtube video at the top of my post, the video does not display unless Read More is clicked. So it looks like there is about 5 lines missing in the post on the homepage. And when Read More is clicked, the page loads down to where the text Read More is, so unless the reader scrolls back up, they miss the video.

Is there a solution to this problem? If it helps, the link to my site is on my name above.

Thanks a lot, love your site!

Adam said...

P.S. It can seen if you scroll down to the post titled 'Aliveness'.

sudharsan @ technoskillonline said...

Thanks for sharing

Divya Sai said...

@Adam,

Yes you can avoid that.
In your template, find this code:

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

and delete + "#more" from the above code, so the final code you should use in your template, is this one:

<a expr:href='data:post.url'><data:post.jumpText/></a>

And you can also use any custom text, like "read post" or "continue reading »" instead of "Read more »".
To use your own phrase, instead of

<data:post.jumpText/>

type your your own text.

Divya Sai said...

@Adam,

You'll have to mark the tick-box "Expand Widget Templates" to see that code.

Anup@ Hack Tutors said...

I had used to hack for this read more. But I am forced to do it, if I will not use that hack and use default read more function, I have to reverse all the post with read more manually. And i can't do it automatically. Do you have any solution of it?? Any suggestion? Or any ides :-/

Divya said...

@Anup

If you are using <!-- more --> at least for your latest posts, that would be sufficient.
Although loading time of each and every page does matter, but of course we must focus a little more on the loading time of hompage. So use this hack in the latest 5/6 posts which are currently being shown on your homepage.

Anup said...

Thanks for soon reply. I will try it:)

William Manson © 2010 said...

hi this doesnt work for me, says something ABOUT XML ERRORS?

Beben said...

hmmm...:D dont understand ... :(

Divya Sai said...

@William
What's the exact error message being shown?

@Beben
Bottom line of the post:
use the official method of post-truncation in as many posts as possible,
i.e. use <!-- more --> instead of auto-read more hack or the previous manual method of truncating posts (span class='fullpost').

SEO said...

I used to use a couple different blogspot blogs years ago but now I would never in a million years consider using a blogspot blog again when you compare blogspot to Wordpress and specifically the extremely active WP community that offers plugins, themes, etc.

Beben said...

This explanation of the hack trick by you right???
hmmm...

Reza Winandar said...

I already use the third method for my blogs, but anyway , thanks for reminding me that this is important.

Adam said...

Thanks very much! Will do as suggested when I get a bit more time. Appreciate the quick responce.

Sai @ BloggerStop.net said...

@SEO

It's not that I recommend Blogger over WP or vice versa. You can select any of these platforms...which-ever you like and in which you feel comfortable. The point is you should have the minimum know-how of the blogging-platform or at least you should know where to go for help in case a problem occurs. There are examples of famous/popular blogs based on either of these platforms.
Blogger is backed by Google, so as long as the word Internet is synonynous to Google, I'll work on Blogger :)

Anup said...

Wow! Your new header background is coll and good looking:)

Sai @ Blogger Widgets said...

Thanks Anup....glad you liked it :)

Adam said...

Me again. The mod u suggested above does not work. The videos still do not show on posts that have 'Read More' until the 'Read More' is clicked.

Any thing else u can think of?

Thanks!

Divya Sai said...

@Adam,

I don't know the reason behind yor hidden videos problem, I have suggested that code editing, as once you make this change then if someone clicks on the "read more" link s/he will be shown the complete post and not just the hidden part of the post.
Anyways, that code is still present in your blog. Just click on "expand widgets templates" and remove the + #more code, it will solve the problem.

Adam said...

Hi Divya. No, the problem is that the video is not shown on the homepage prior to clicking Read More even though the video should be seen.

Sai @ Blogger Help said...

Yeah I got your problem Adam, and I don't know why your videos are not being displayed on your homepage, when you use this hack.
What I have suggested, will remove the #more tag, so your readers will at not miss the video when they click the "read more" tag, as the post/article will be shown right from the starting, once you delete that code snippet.

Mohammad Mustafa Ahmedzai said...

Thanks Dsai. This is worth praising!

I am glad Blogger has taken the step of finally availing Jump Breaks in Blogger Editor. Though some readers have still problems with it but I am sure the blogger team is working hard to make it a far better platform.
I haven't used the Jumb Breaks in Blogger Editor for I mostly use Windows Live Writer but I guess I must try it now :>>

Anup @ Hack Tutors said...

Divya, I want to send you a personal E-mail, but I think your comtact form is not working...Bcoz I have already send you am email but you do not reply...Can you give me your ID PLZ? Just for suggest...;)

Anup said...

Plz send your emai from my blog's contact me form...See you tommorow. Bye now :) Gud nite...

Divya Sai said...

Ohk...just saw your mail (using that comment-form), I have marked it with a star and left it to answer later...hmm...procrastination is bad!!
Anyways I'll try to reply you as soon as possible!

BTW, you can mail me at bloggerstop.net {at} gmail {dot} com

Darksaturn7 said...

This method is x10 easier to implement than the last one. Only thing is...I can't seem to get the 'Read More' text to show on my blog posts. It's makes it look as if there's no more to read! Problem encountered http://hotaruchan-darksaturn7.blogspot.com I looked for the code you mentioned in another poster's question but my template seems to not have those codes.

Darksaturn7 said...

Ah durr...saw the article you linked on truncated errors. Pays to read further LOL

Darksaturn7 said...

I had 2 blogs that used the old way. One was easy to remove the old code out, but in one (diaryofanexwowaddict.com) I found searching for the older code next to impossible and left it as is, but also went ahead and put in this new hack. The blog pages seem to pull up fine with this but is there a chance both codes will clash against each other?

Or will inserting the more tag instead of the span class="fullpost" tag be fine?

Divya Sai said...

@Darksaturn

Don't worry, you can use either of those two methods simultaneously (i.e. in some posts use "more" that while in some others use the span method, but try to use the <!-- more --> method more often.
The "span class" has a unique advantage over this "more" method, as it allows us to hide more than 1 part of the post.

Yap said...

I have an issue with an audio podcast not appearing before clicking read more. I used divshare to host it. I guess it is similar to Adam's problem with the Youtube video. Is there any solution to this?

Blogging Tips said...

I use blogger's read more hack.Its very easy when compared to manual read more hack

Divya Sai said...

@Yap,

Not sure about the issue/solution, but try changing the filehost, I would recommend datanest ot sigmirror:
http://bloggerstop.net/2009/10/file-hosting-sites-with.html

Augustine Okoh said...

post buzz

Amal Asyura said...

Thank you for the method!
I really works =D

Manu Adam said...

Hello Divya, Thanks for very informative articles. I read many articles written by you and found them very helpful and knowledgeable. What is the best about you is your keenness to help the readers warmly. For long I had been searching such article which deals with SEO aspect of "Read More" link. As such blogger now provides this feature with "Insert Jumpbreak" to add read more link. But what if we want to add something like " Read More on "Post Title of the Article" " automatically when we insert jumpbreak or

Sai - Blogger Widgets said...

Hi Manu,

Thanks for your comment and appreciation.
I couldn't get your question...can you please rephrase it?

Manu Adam said...

Hello Divya , I meant to ask for the way to do the hack so that at the end of entro it is not just a "Read More" link but rather something like that " Read More on "[Title of the article]" ". with the code ..More... we just get a "Read more" link without any added reference to the article. Hope i make my query clear now. If you could suggest a solution for blogger, I wud be much obliged.

Sai - Blogger Widgets said...

Yes that's certainly possible:
In your template, instead of simple read more, use this:

Read more On "<data:post.title/>"

So, it should look like this:

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/> On "&lt;data:post.title/&gt;"</a>

Sai - Blogger Templates said...

Instead of those smileys, the code is this:

:p

ADSENSE TIPS said...

hello sir i have a blog i want to show only small part of each post that i write in my blog homepage how can i do it
my blog url is- crunchybloggerdotblogspotdotcom

craig1985 said...

hey I love this and have added it to my blog. One question I have though is that I use the Ads Theme and the 'Read More' Link shows in black, is their any way of changing the link colour to blue or red?

Thanks and great post

craig1985 said...

Nevermind, I worked it out :)

Tina Peterson said...

Hi - thanks for posting this. I've been wanting to truncate my posts for a while now (I'm a little windy with my posts LOL). I'm using the read more #3 hack and I can't get it to skip only 1 line so my truncated post is much shorter. I hope that makes sense. You can see it here:

http://familyliteracyandyou.blogspot.com/2011/05/1st-book-for-summer-book-club-is.html

Thanks for any help/suggestions you have... Tina

Oyon said...

Thanks a bunch! I tried it and it works!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy