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)
Then please add these codes between the lines above:
Therefore, the result will look like this:
Second step, please find these codes:
Then add these codes directly below the line:
Therefore, the result will appear as following codes:
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:
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
Bold
Like mine (I probably change it in future)
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.
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 == "item"'>
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 == "item"'>
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 != "item"'>
<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 != "item"'>
<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.
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 != "item"'>
<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 != "item"'>
<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 != "item"'>
<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.
