JackBook.Com

Update: This article is all about learning how expandable post work on blogger, if you want to just apply it now, you can read this post here, i have listed all 7 hack about read more post on blogger.

I must admit that I have never embedded a read more feature on my blogger templates. that is because I think you should be able to install a Read More hack into your blogger template. But then I remember, that even it’s an easy thing, it’s still not easy for people who are not familiar with HTML and CSS codes.

So here it is, I will try to explain how to create a Read More in blogger in as simplest and easiest tutorial as I can make.

The main purpose of this article is to let you understand how does it work? what is the idea, what is the concept of read more in blogger. if you don’t want to learn that, and if you just want to install it, to implement the read more hack on your blogger. Then please read this article, i will just guide you step by step to directly implement this hack on your blog. go here: Step by Step to Install Read More Hack in New Blogger.

This will work both for Classic Blogger Version or either on New Blogger Version.

What is the main concept of Read More in Blogger?

Not like Wordpress or other blogging platform, Blogger doesn’t have a read more feature on their services. On Wordpress or others, we can just easily add a <!–readmore–> inside the post content, and it will be automatically split on the site.

But on blogger, we can’t just do that. Luckily, we can manipulate the blogger template code, so we can manipulate how it shows. Is it going to be split by read more or not.

The idea is, hide all the rest content with a css code.

How?

On your post.

1. Split your post content.

So you should now have 2 parts of your post content, it is the excerpt, and the rest.

2. wrap the rest content with a div.

3. set the div a class named = “therest” or whatever, name it as whatever you like.

Now on the style code (CSS)

4. set a class named = “therest” with this behaviour

If the_page_is_not_a_post_page then “therest”_will_hide end

update: Where is the read more link?

5. done.

5. put a read more link on a non post page. so this will lead people to the post page.

simple logical also,

If the_page_is_a_post_page then “readmorelink”_will_hide end

6. done

Easy right? please read again the steps above carefully until you got what’s the point.

From the steps above, now we know that there are 2 most important parts we will be playing with

1. the content

2. the style code (CSS)

On Blogger Template, the content means <data:post.body/> and the style code is the code inside of this tag

<b:skin><![CDATA[

YOUR STYLE CODE HERE

example:
the code of therest class here.

]]></b:skin>

or you can also create a new tag for the style code.

<style type=”text/css”>

YOUR STYLE CODE HERE

example:
the code of therest class here.

</style>

To make it simpler, we will use the second option. create a new <style type=”text/css”> tag.

OK. Now, How to implement it?

Step #1.

On your post, split your content into 2 parts. that is the excerpt and the rest.

example:

This is an example post. This paragraph is the exerpt. You should see this paragraph only on the homepage or on the front page or on the categories page or on the archive pages or on the search result page.

This is the rest paragraph of the example post. You should be able to see this paragraph only on the post page or on the item page. you can not see this paragraph on front page, or on categories page, or on archives page etc.

This is the third paragraph. and of course this will be also seen on the post page only.

Now we are going to split that post into 2 parts. that is the exerpt and the rest. and then wrap it with a div with a class of “therest”

This is an example post. This paragraph is the exerpt. You should see this paragraph only on the homepage or on the front page or on the categories page or on the archive pages or on the search result page.

<div class=”therest”>This is the rest paragraph of the example post. You should be able to see this paragraph only on the post page or on the item page. you can not see this paragraph on front page, or on categories page, or on archives page etc.

This is the third paragraph. and of course this will be also seen on the post page only.</div>

See the different? now the content has been split into 2 parts. the exerpt and the rest which wrapped by a div with a class of “therest”

Step #2.

On the step #2, we are going to set the behavior of “therest” class and “readmorelink” class.
so here it is.

create this style codes below,

because I use “therest” as the name of the class, so i write “therest” on the example below. I suggest you to give it a really unique name, We should not use a name that already used by another class on the other style code.

this either the “readmorelink” class.

<style type=”text/css”>

<b:if cond=’data:blog.pageType != “item”‘>

.therest {display: none;}

</b:if>

<b:if cond=’data:blog.pageType == “item”‘>

.readmorelink {display: none;}

</b:if>

</style>

Download the script above here, many people got failed if just copied and pasted the code. so I suggest you to download the script from the link above.

Now, where should you place that codes above?

1. Go to you blogger template, tick the Expand Widget Template

2. Find this code </head>

3. Put that code exactly before the </head> code. so it should be like this

<style type=”text/css”>

<b:if cond=’data:blog.pageType != “item”‘>

.therest {display: none;}

</b:if>

<b:if cond=’data:blog.pageType == “item”‘>

.readmorelink {display: none;}

</b:if>

</style>

</head>

4. Set a readmorelink.

For Classic Blogger version,

#1. Go to your template editor,

#2. find this code

<$BlogItemBody$>

#3. replace with this code below,

<$BlogItemBody$>

<a href=”<$BlogItemPermalinkUrl$>” title=”<$BlogItemTitle$>”>Read More…</a>

#4. save your template and done.

For new Blogger version,

#1. Go to your template editor, Tick the Expand Widget Template

#2. find this code

<data:post.content/>

#3 replace it with this code below

<data:post.content/>

<a expr:href=’data:post.url’ expr:title=’data:post.title’>Read More…</a>

#4. Save your template. and done.

Now if you read all the steps above carefully, you should now be able to install a Read More hack on every blogger template, No matter who created that template. and No matter what version the blogger is.

Every template have all the same code.

that is

<style>style code</style>

</head>

Hope it’s all clear and easy to understand.

Now each time you want to have a read more on your post, all you need to do is just split your post into 2 parts, that is the post exerpt and the rest.

wrap the rest with a div with a class of “therest” and done.

Please leave your comment here if you still have any problem with this. If you think this post is useful, please tell this post to your reader. you can even translate this post to your own language, but please give a link to this post as a reference. thanks