Thursday
1
How to add read more to blog
Sometime you want to add a read more function to your blog home page because it doesn't look cool if you only have one (few) posts in the home page; and when visitors first time land on your blog, they just only see your very single post (if your post is too long). Does it look right to you? Actually, there are quite a few tutorials out there where you can learn to add the read more function to your blog. But in most of them, you have to use the tag <span class="fullpost"></span> every time you write a blog article. It's quite inconvenient, isn't it? Therefore, today I will show you how to add read more to blog just by one click. Just follow the instruction below:
Thank you for dropping in this blog and reading my tip.
- You're in draft.blogger.com, go to Template (on the lower left sidebar)
- Scroll down to the end >> Backup/Restore Template >> Download Full Template
- Click on Edit Template >> Tick the Expand Widget Templates box
- Press Ctrl + F , and type " ]]></b:skin> "
- Just right above it, copy and paste this code:
- Place this code between the ]]></b:skin> and </head>:
- In the search box, type " <data:post.body/> " or " <p><data:post.body/></p> " if you use custom template
- Place this code right below <data:post.body/> or <p><data:post.body/></p>
- Click SAVE Template
- To add read more: Just after your introduction paragraph, click on the "break" icon located above the content box like this.
/*READ MORE*/ .jump-link a { background: #ffff00; padding: 3px; color: #fff; } .jump-link a:hover { background: #000000; padding: 3px; color: #ccc; }
<!--READ MORE--> <b:if cond='data:blog.pageType != "item"'> <style> .post-body img { img { max-width: 100px; width: expression(this.width > 100 ? 100: true); float: right; } </style> </b:if>
<!--READ MORE--> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <span style='float:right; font-weight:bold;'><a expr:href='data:post.url + "#more"'><span><a expr:href='data:post.url + "#more"'>Read more >></a></span></a></span> </div> </b:if>
Thank you for dropping in this blog and reading my tip.
Subscribe to:
Post Comments (Atom)
1 Responses to “How to add read more to blog”
5 April 2012 at 11:54
I followed this post (thanks!) and was able to implement the READ MORE link in my posts.
I went back into Edit HTML and changed the color properties of the READ MORE links, but now it shows up twice:
Once in bold to the right at break
Once again regular (not bold) on the left side next line.
I am trying to remove the second regular "read more" link but i can't find step 7 % 8 cods to work with and edit... please help!
amandamshulman@gmail.com
www.therealshiksa.com
www.therealshiksa.blogspot.com
Thank you!
Post a Comment