Sunday, November 2, 2008

How to add 'read more' in the Blogger?

My friends have asked me about how to add 'read more..' in a post. They told me that they also confused when they read long article about how to add 'read more'.. I think that I decided to write about short article - step by step only so, it help them to understand it so easily..Ok, lets me explain..

STEP 1 - Open Layout > Edit HTML

Before you start to do and don't forget to save a copy of full template,

-You need to tick the "" in the Edit Template. See below;

- You try (CTRL + F) to search the codes like <div class=’post-header-line-1′/> in the Edit Template. If you cannot find this code, then try <data:post.body/> because the template sure have it since you updated new template blogger..


- If you already found it, you try to find <div class=’post-header-line-1′/> and <div class=’post-header-line’> again. Nevermind, you have it or not..you just this new code before the <data:post.body/> tag.

Here, copy and paste it before <data:post.body/> tag
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


The result should look something like this:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>


STEP 2 - You should put new code again..

-Be careful not to delete any other code during this process*.
- Copy and paste new code after <data:post.body/>


<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>


Now let’s look at what the final result should be:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>

-Ok, you’re all done editing the template code.Go to save it~

STEP 3 - Add a Class Tag in your default post template.

- After you save it in the 'Edit Template', you go to 'Setting' > 'Formatting'
- Then you find the last option; 'Post Template'
- Copy and paste the code;
<span class="fullpost">

</span>

See the picture below;
-You click 'Save Setting'..DONE!
You can enjoy to write in a post~ If you cannot see <span class="fullpost"> and </span>, you click 'Edit HTML' in a post. :)

For example, you want to hide the words..you can write like;
<span class="fullpost">
Selina's Wing
</span>

Because this is hide words in Read More..
You done then you can publish post and will see how like this! :D

Advertisement

No comments:

Post a Comment

My Award:

Like Me on My Facebook Page