How to Create Read More

September 04, 2008

If you want to read an article or post at your favourite blog, you must be see "read more". This function to separate the articles so it just shown the headlines of the articles. How to create this its very simple, what you is..

1. Login to your blogger
2. Choose Layout ---> Edit HTML
3. I advise you to backup first yout template by clicking Download Template
4. Then cheklist Expand Template Widget
5. Find this code "</head>", then copy and paste above "</head>"
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

6. Then find this code "<div class="post-header-line-1">"
7. After that, below that code, there is code like this "<div class='post-body entry-content'>"
8. Change the code to be like this
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[-] Resume...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

9. "Read More" and "Resume" text can be change what ever you want
10. Then Save Template
11. Choose Setting menu ---> Formating
12. At the bottom, find "Post Template", then fill this code at the box
<span id="fullpost">





</span

13. Finish...
14. How it work is.. put the headline articles above <span id="fullpost">
then the main content is between <span id="fullpost"> and </span>
15. Have a nice try...^^

source : http://trik-tips.blogspot.com

10 comments:

andri mengatakan...

nice

techniqueal t. mengatakan...

wow, i've been wondering for sometime how you did your expandable posts. will definitely try this on my test blog. hope it works this time as the others didn't.

this is a great find! thanks for sharing ^_^

andri mengatakan...

thanks for you comment,,
hope it will work at your blog,,^^

techniqueal t. mengatakan...

woohooo! it worked!!

the code is so simple. the script is so neat. the instructions are so easy to follow.

worked like a charm!

thanks so much for sharing this!! iv waiting for this for a looong time. ^_^

techniqueal t. mengatakan...

by the way, i blogged about it too. ^_^

Fransiska Ike mengatakan...

Very nice, andri. ^^a I'll try it on my blog.

Melia mengatakan...

Thanks a lot for the tip to create readmore.. it has worked well in my blog...

Virgil mengatakan...
Komentar ini telah dihapus oleh pengarang.
joe mengatakan...

hey i tried this..But it made matters worse..Kindly help me out..This is my blog
http://joe-apple.blogspot.com/

websilog mengatakan...

this is a fantastic tweak. accordion effect read more is very reader friendly as there is no need to go to a different page just to read the entire post. blogged it too and linked to your post :-)

3 ways to add read more on blogger

Poskan Komentar

 
 
 
 
Copyright © Sharing Everyone