Thursday

Pin It

Widgets

1

How to add read more to blog

  • Thursday
  • Andy Law
  • Share
  • 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.

    1 Responses to “How to add read more to blog”

    ABOUT ME said...
    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

    SUBSCRIBE NOW to get the latest posts