2009/02/16

Create "Read More"-Simple form


You see my every entry has "Read more" and you have to click on it to see all the inside contents.
This trick will make your blog become pro and it will look like a website.This is the simple version so if you like to create "Read more" in advance way,you can view Auto Read More with thumbnail for more information.You will see the effect of each form.

So now i will lead you how to do it
First and dont forget to back up your template ( click "Download full Template")
I will divide the steps into 3 steps for you to be easy.
After you back up , go to blogger.com and loggin ( of course huh?)
then click Layout----->Edit HTML
STEP 1 : ADD CSS

Ok now, find the code
</head>

and add this code before it:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


STEP 2:ADD "READ MORE"
Next, you have to concentrate to find this code:
<data:post.body/>

It also look like this :
<p><data:post.body/></p>

Ok? have you found it ? Now add this code after it:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more</a>
</b:if>

STEP 3:"Read more" OPTIONS

If you want to load in a new window when click on "Read more", add this:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more</a>
</b:if>


Incase you want to change the "Read more" size(change the % to change the size), add this:
<b:if cond='data:blog.pageType != "item"'>
<span ><a expr:href='data:post.url' target='_blank'>Read more</a></span>
</b:if>


You want the "Read more" has color, add this:(pick the color code)
<b:if cond='data:blog.pageType != "item"'>
<span style="color: rgb(255, 0, 0);"><a expr:href='data:post.url' target='_blank'>Read more</a></span>
</b:if>


And you can combine all of them into 1

Ok , when finish you have to do 1 more step to make it appear
.....The summary or Title....
<span class="fullpost">
.....The rest
</span>


You have to remember this structure when post new entry.Your entry has to follow this structure, if you feel very hard to rememberm go to "Settings"--->Formatting-->find "Post Template" and save it.Every time you click new post it will be already added for you.

Good luck
If you are in difficult please leave a comment.I will answer you.

4 comments:

Deezy said...

i cant find <
data : post . body...???

help me plz

vuluganck said...

I think you have "played" with your template very much so that code has been deleted.Dont worry , I will post some way to create "Read more" in other ways within tomorrow.

This way will be very easy and you just have to add code and dont have to do anything else after add code

Amaresh said...

not working for me .. it's coming to base of my content!!

have alook
"http://bloghelpforbegineers.blogspot.com/2009/06/create-cool-images-with-wet-floor.html"

sive me your mAIL ID , i want to tell u something....

Thanks!
-Amaresh

vuluganck said...

@Amaresh
I have visited your blog, can you tell me what is the problem are you having ? I cant help you if I dont know the problem, Please find the exactly code and I advise you to create "read more" with this tip, it is simple easy to add.

http://zenplate.blogspot.com/2009/02/creat-auto-read-more-support-thumbnail.html

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.