• Home
  • Computing
  • Internet
  • Tips
  • Designs
  • Downloads
  • Inspiration
  • Wallpapers
  • DIY
  • Technology
  • Travel
  • Home
  • Computing
  • Internet
  • Tips
  • Designs
  • Downloads
  • Inspiration
  • Wallpapers
  • DIY
  • Technology
  • Travel
HomeBloggingHow to create POST SUMMARY blogger blogspot with a ...
Previous Next

How to create POST SUMMARY blogger blogspot with a READ MORE…… function

Posted by: JackSimz , December 23, 2008

Creating a post summary only format (selective expandable posts) is very useful for bloggers especially for those who write long posts. Besides, this method provides a teaser of their full post on the main page that would encourage readers to read the whole article on the exact post pages instead.

The circled “Read More……” method above is what we are going to create to prevent from showing long long post.

This method will also makes a tidy blog, prevent long loading time of showing all the exact full post of your blog if you have lots of long long post as below in font page of your blog.


With a combination of JavaScript and Blogger code, you can edit to select which summary post format will be displayed on your main, archive and search pages.
Only on the exact post pages, the full content of your post will be displayed.

This is an improved method adapted from the previous hackosphere’s original method.

Guide below showing steps to do it.

The blue color code is your original code in blogger, while the red color is the add on code.

This modification only add on the red color code into the original code, that’s it.

Make sure you download your existing blogger template for backup before you start.

Ok, Let’s start.

Step 1.
Select the checkbox named “Expand Widget Templates”, which is right above the
template code, to expand it into more code. You can use “Ctrl + F” to find the code for replace.
Instruction step 1

Step 2.
Find the div “post-body” and add the portion of code in red color.
Instruction step 2

Step 3.
Create a blank test post in your blog with any title such as TESTING 123, select Edit Html mode, and paste the post code from “Instruction step 3” in your new post:
Instruction step 3

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post.

Please notethat you could divide some or all of your old posts into summary and full post by editing them. The “Read more” link will appear only for the posts that have been divided like this.

Adding the circled “post code” from Instruction step 3 to where the summary stop.

Adding the circled “post code” from Instruction step 3 to the bottom of post.

Tips:

If you click “Older posts” link, the “Read more” link will not appear, you can use the same code method in step 3 for the test post you created to adjust the summary content that you want to show in your post.

Related Posts

Get Your Readers’ Attention in Blog Post [Infographic]

In this infographic, you will learn a way how you can improve your blogging skills to keep your ...

How to Add Links on a Picture of Your Blog

If you decided to add links and descriptions on any parts inside a picture of your blog, so tha ...

Easily Create a Favicon For Your Website with Favicon Generator

Favicon could be an important part of a website’s brand, it is the tiny image that appear ...

Check the Readability of a Website with Free Readability Test Tool

A website that is able to attract a large number of visitors must be readable no matter how int ...

Leave a Reply Cancel reply

Powered by Wordpress. Hosted with Exabytes. Copyright © All Rights Reserved.| Sitemap.
  • About
  • Contact
  • Privacy Policy