Thursday, July 21, 2011

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:

  1. You're in draft.blogger.com, go to Template (on the lower left sidebar)
  2. Scroll down to the end >> Backup/Restore Template >> Download Full Template 
  3. Click on Edit Template >> Tick the Expand Widget Templates box
  4. Press Ctrl + F , and type  " ]]></b:skin> "
  5. Just right above it, copy and paste this code:
  6. /*READ MORE*/ .jump-link a { background: #ffff00; padding: 3px; color: #fff; } .jump-link a:hover { background: #000000; padding: 3px; color: #ccc; }
  7. Place this code between the ]]></b:skin> and </head>:
  8. <!--READ MORE--> <b:if cond='data:blog.pageType != &quot;item&quot;'>     <style>     .post-body img {     img {     max-width: 100px;     width: expression(this.width &gt; 100 ? 100: true);     float: right;     }     </style>     </b:if>
  9. In the search box, type " <data:post.body/> " or " <p><data:post.body/></p> " if you use custom template
  10. Place this code right below <data:post.body/> or <p><data:post.body/></p>
  11. <!--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 + &quot;#more&quot;'><span><a expr:href='data:post.url + &quot;#more&quot;'>Read more &gt;&gt;</a></span></a></span> </div> </b:if>
  12. Click SAVE Template
  13. To add read more: Just after your introduction paragraph, click on the "break" icon located above the content box like this.
If you can't follow the instruction, just leave a comment below. I will sort it out for you. Best luck !
Thank you for dropping in this blog and reading my tip.

adsense
 
 
Copyright © blog
Blogger Theme by Blogger Designed and Optimized by Tipseo