"Read More" In Blogger Main Page (Expandable Posts)

Blogger / Blogspot main page is primarily used to show some of the newest posts of the blog The problem is, showing some full posts can make the main page too long and not effective enough to be viewed properly by visitors. That is why showing some summarized newest posts is much better, followed by some kind of “Read more” links. This is often called “expandable posts”.

Principally, an expandable post is only a part of your post which is summarized to be shown as a part of your main page. If people visit your main page and get interested with one of the summaries, they can use the “Read more” link to view the full post.

I personally had set my main page / home to show some expandable newest posts recently. As far as I recognized, my main page is much better now, more useful, and looks certainly more professional.

Before, I only showed one newest post on the main page, since the page was too long if I put more than one there. Then I felt that the main page proposed a dilemma, because if I put only one post, the main page will be the same as the newest post page. However, if I put more than one posts, the page will be too long and not comfortable to view.

Here I will share how to create expandable posts in your main page. Basically, the template needs to be adjusted a bit, to access it, click “edit HTML” from “layout” section of your dashboard. Then check “expand template widget”, since we need to “play” a little bit on the codes there.

First step, please find these codes: (use your browser’s searching tool to find it faster, ctrl+f in Mozilla Firefox)

]]></b:skin>
</head>

Then please add these codes between the lines above:

<!-- expandable contents tweak I -->
<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<!-- end of expandable contents tweak I -->

Therefore, the result will look like this:

]]></b:skin>

<!-- expandable contents tweak I -->
<style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

span.fullpost {display:inline;}

<b:else/>

span.fullpost {display:none;}

</b:if>

</style>

<!-- end of expandable contents tweak I -->


</head>

Second step, please find these codes:

<data:post.body/>

Then add these codes directly below the line:

<!-- expandable contents tweak II -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>Read more</a>
</b:if>
<!-- end of expandable contents tweak II -->

Therefore, the result will appear as following codes:

</data:post.body>

<!-- expandable contents tweak II -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<a expr:href='data:post.url'>Read more</a>
</b:if>

<!-- end of expandable contents tweak II -->


Save the template, and the code is ready to be used.

Defining the summary

To define which part of your post is to be shown as the summary in the main page, use these codes when writing new posts:

Your summary here
<span class="fullpost">
The rest of your post here
</span>

You can put the codes in “Post Template” to make all your future posts contains the codes. It is accessible through “Settings” then “Formatting”. However, I personally still prefer adding the codes manually. Still, the choice is yours.

If you already have some posts, you only need to add the codes to a number of the newest ones that you want to show in your main page. For example, if you want to show four newest posts, then you need to install the codes only to each of the four. Putting the codes inside posts that is earlier than the four is not necessary.

Variations of “Read More” link codes:

Having your own customized "Read More" links is certainly helpful in synchronizing it to your color theme. Here are some of them:

Custom font size and color

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span ><a expr:href='data:post.url'>
<font size="14px" color="gray">Read more</font></a>
</span>
</b:if>

Bold

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style="font-weight:bold;">
<a expr:href='data:post.url'>Read more</a>
</span>
</b:if>

Like mine (I probably change it in future)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<center>
--------[ <a expr:href='data:post.url'>read full post</a> ]--------
</center>
</b:if>

You are free to pour your creativity in editing the codes to create your own format of the link.

However, clicking on the titles of the posts in the main page serves exactly the same as "Read more" links, so you can omit the links if you wish. Just don't let your visitors get confused.

Having some problems? You are welcomed to use the comments section.

59 comments:

RP said...

Hi Isaac,

Thanks for the wonderful code. It was exactly what I was looking for. I have few things in my mind to customize it. Please let me know how can I change color of only "Read More" because I do not want to change color of other links on my blog.
And also I have observed that even if I do not add the "Read More" link to few of my posts, it still comes at the end of full post. Let me know How can I remove it.

Thanks Again :)
RP
Ravositti.com

Isaac Yassar said...

@ RP: You're welcome. The codes in "Variations of 'Read More' link" codes >> "Custom font and color" (near the bottom of the post) will do the trick, I believe. You can change the "gray" inside the codes to any color you want. You can also use hexa-color codes like #ff44cc or else to match your blog's appearance. It will apply only to the "Read more links".

RP said...

Thanks Isaac. Quick reply with perfect solution.

Hats off to you :)

Regards,
RP
Ravositti.com

MzGunn said...

Hi Issac. I've been trying to implement this code and I keep getting an error message from blogger saying that it is unable to complete my request. I am following the directions exactly.

The error code I get is bX-y6cz0v

Could it be because I am using the thisaway template?? I'm not sure what the problem is. Any help you can give is appreciated.

AG

Isaac Yassar said...

@MzGunn: From my experiences dealing with blogger error screens, they are most likely to be caused by connection and server problems. Trying again using better connections or in different times is a good solution. If the problem still occurs, please let me know.

RP said...

I need a little help on this code. I have one post in which I do not want "Read More" to appear. So I have not used the expandable code in that post but it still appears at the end of the post. How can I resolve this?

Thanks,
RP
Ravositti.com

Anonymous said...

I can't find the code
data:post.body.
on my template Please Help!!!!!!!!!

Isaac Yassar said...

@RP I see. If you want the post to appear in full length, avoid putting put the tag:

<span class='fullpost'> ... </span>

on the particular post (remove it if it's already there). Then the post should appear in full length in your main page. (But this does not stop the "Read more" to appear under the particular post).

Another method: change the date of the post into (more) past, so the post will not be included in the main page, therefore does not contain "read more" link. As an alternative, you can put links to the post in your sidebar (like mine).

Is this solves the matter?

RP said...

@Isaac,

Thanks for the ideas :)

MzGunn said...

Hi Issac-

Thank you. I've tried all morning and a few time times this afternoon.

I have a pretty fast connection speed (cable). So I think the problem may be coming from somewhere else, but not sure what. Any insight?

Isaac Yassar said...

@MzGunn: If you suspect your Thisaway template as the cause of the error screen, you can visit the designer's website and consult your problem. I viewed your page source and found Dan Rubin as the designer. He will understand the codes of your template best, and he is on twitter too, just search for his name, follow, and contact.

For another methods, perhaps you can check whether the location of the codes are correct, since I have used this codes myself and they work.

To study about the error screen deeper, you can use search engine and type your error code. Then see if others have the same problem, knowing the possible cause, and offering a solution.

Isaac Yassar said...

@Anonymous: Make sure you have checked "Expand Template Widgets" (opt to view widgets codes). Then use your browsers searching tool to find the tag faster. Have you found it?

MzGunn said...

Thanks Isaac!!! I'll keep you posted.

Gantulgan said...

Oh, thank u so much, Isaac.
It's already solved my problem.

Club Panini said...

When I use the code I have problems with internet explorer in the main page: It doesn´t show de sidebar. ANy ideas why?

Isaac Yassar said...

@Club Panini: Do you still use it now? Please provide your link and I'll check it.

Club Panini said...

www.clubpanini.com.ar

Thanks!

assasins stealth said...

dude do you know hhow i can name each posts "read more" to what i want
like say i want to have a tv episode and instead of just having the read more can i put in "tv episode" for that 1 post? if so how?

assasins stealth said...

i mean just like you do on your main page
example:

post title here

summary



and when you click on the post title it turns into a read more link. how do you do this?

Isaac Yassar said...

@Assasins Stealth: The titles function like that by itself (default). That's why I removed my "read more" links, the titles are enough. To do it, simply don't add the tweak II (above in the post). Don't forget to backup first if you are going to try it.

Anonymous said...

thank you great explanation

assasins stealth said...

thank you

this is gunna be sweet ^_^

assasins stealth said...

how did you add a picture then writing on your title?

Isaac Yassar said...

@Assasins Stealth: Using this.

assasins stealth said...

ty and what about the iicralyy layout http://iicarlyy.blogspot.com/

how do i post the titles together?

Isaac Yassar said...

@Assasins Stealth: It is done by manually adding the links inside the post, combined by setting the font size and alignment.

assasins stealth said...

how do i insert a link for a post.
dont i need to have the post existing

Isaac Yassar said...

@Assasins: Use the upper bar of your "new posts" >> "compose" window, there are "links", "font size", and "alignment" that you need to create such links. Yes, you need to write the linked posts first.

assasins stealth said...

but then how does the creator of iicralyy not have them posted or hiden

Isaac Yassar said...

@Assasins: She did posted all the posts in the past. She only set her mainpage to show only 1 newest post, and removed the archive. That's the trick.

assasins stealth said...

dang didnt think some 1 wud be that tricky

assasins stealth said...

so i tryed it but i didnt get caps links do i have to do it on compose? cuz i did it on edit HTML

Isaac Yassar said...

@Assasins: Yes, you have to do it on "compose" to get the links. But you need your keyboard's 'caps-lock' to write the uppercase letters manually, or 'shift' button.

assasins stealth said...

ty
lol im never satisfied
how do you add a comment signature like this place (its not a blog)

fourm.cheantengine.org

Isaac Yassar said...

@Assasins: The address you provided is not valid, there is no website there.

Cat said...

Hi Issac,

I have a variation on this situation

what if i want just one post displayed per page but i want a "next" button at the bottom so readers dont have to scroll back to the top to click on the next post?

Thanks!

Isaac Yassar said...

@Cat: in default templates, older / newer post button is perfect for the need. If you don't use one, you'll need to get a template with the buttons, since adding one manually is very complicated.

assasins stealth said...

ok just type in cheatengine (if you have firefox)on the top address bar you should see a list of giant links
click fourm then click the small search butten at the top
of the page then type in hell quest click the first one and then scroll down till you start seeing short comment
...see how they all have signatures is that posable for a blog to have?

Cat said...

where can i find a template with the buttons? i use one of the standard templates but it doesnt have them

Isaac Yassar said...

@Assasins: I have visited the forum, but I don't see any signature there.

@Cat: Do you use Classic Blogger or New Blogger? Classic accounts with classic templates don't have them.

cat said...

i managed to get to the default template with the older/newer posts buttons but now i have a blogger navigation bar at the top of the page... is there a way to get rid of it?!

Isaac Yassar said...

@Cat: Yes, use this.

Belle Chen said...

Hi Isaac,

I have a related topic to this post.

How do I set a certain post as a homepage?

My blog: www.360jewels.blogspot.com

I would like to set the blogpost "Home" as my homepage. This means everytime people visit "www.360jewels.blogspot.com", they will find my "Home" homepage first.

Thanks!
Belle

Isaac Yassar said...

@Belle: Make sure the 'home' post has the most recent publishing date (set from edit post >> post options) and set your blog to show only one newest post (dashboard >> setting >> formatting). Therefore, the 'home' post will always stick in the front page.

Belle Chen said...

Oh...this is pretty manual. I'm using this method you mention and wondering if there is other efficient technique :-p

Thanks for the reco anyway.

I'll keep coming back to check your new tricks.

Thanks!

ΒΑΣΙΛΙΑΣ ΤΗΣ ΜΟΝΑΞΙΑΣ said...

Hi guys.
I can't add the "Read More" in my blog, because there is not the data:post.body in my HTML.
I replaced the blogger template with a template from Pyzam.com, and after that, the data:post.body
disappeared. Can anybody help?

Isaac Yassar said...

B-T-M: Are sure that you had checked "Expand Template Widgets" in the 'edit HTML' (opt to view template widgets)?

ΒΑΣΙΛΙΑΣ ΤΗΣ ΜΟΝΑΞΙΑΣ said...

Hi Isaac

I would appriciate if you give me more details.
What exactly do you mean about the check of
"Expand Template Widgets"?
Forgive my ignorance, I'm a new blogger and not so much familiar with the topic.
Can you lead me step by step?

Many thanks.

Isaac Yassar said...

@B-T-M: Sure, first login to Blogger, then go to dashboard >> layout >> edit HTML. Look above the frame that contains lots of codes, there are the words "Expand Template Widgets". Leave a mark (check) in the small box before the words. Then your page will load automatically and the frame will show more codes. You can search inside the frame and you should be able to find the 'data:post.body' . Good luck!

ΒΑΣΙΛΙΑΣ ΤΗΣ ΜΟΝΑΞΙΑΣ said...

Hi again Isaac.

At last I found the code! It was simple and easy, thanks to you. Sometimes simple things seem to be a huge problem but they really aren't, if there are good people to show you "how". I don't know how to thank you!
God bless you.

Manohar Negi said...

Hi,
I need to display only a single page in the main, but this page is not the latest. Say i have a page by name "xyz.html". I need to show only this page in my main page.

Can you help me on that.

Isaac Yassar said...

You can change the date of your particular post to the latest, and keep it in the front page. I currently don't see any other option for it.

Manohar Negi said...

Thanks a lot. I'm using that approach only.

Azhan's said...

thnks aloT!!! you are helping me aloT! thanks

OddsArenan said...

Is there a way for me to make all but the latest post summarized, so that the newest post will be the full version and below it follows the rest in the summarized version?

Isaac Yassar said...

@OdssArenan: I don't think so. Unless the manual way.

OddsArenan said...

The manual way?

Isaac Yassar said...

Yeah, using the method on the post.

Ray said...

Finally! I've tried so many other codes and everything other bloggers say...this is the one that finally worked!