How To Add Attractive / Stylish Read More Buttons

Welcome again dear bloggers, in thistopic

We learn today how to add a very important feature in the special field of additions, it is the property of blogger "Read more".

As you are aware, many websites and blogs with most widely known in the field of blogging use this property inmost of the articles that their liberation- if not all - this considering the importance gained by the its role, which focuses on shorten articles  to asmall articles.

I'm not saying that it delete the sentences and words from the original article, but rather showing this last on the home page as a brief includes thetitle of the article and some sentences that commence and an Introduction as well as a thumbnail imageif available, and of course this post will be beside the shortcut button "Read more "and which would transmit it if pushed to display the full original post as a vector of sentences and details, do not forget to mention the importance of this topic in addition give an impressive beauty to the blog rather than the traditional form that appears entries complete and long on the main page, which could affect way or another on the performance of the blog and in causing weight browse, which makes visitoralienate them and thus reduce the order of the blog in Google, in addition to what are adding thisaddendum, from splendor and attractive appearance of the blog it contribute also to benefit of the number of visits considerable compared to previously where we force through which the visitor tobrowse all blog entries on the unit and thus ensure more visits.

     After identifying the benefits of add "Read More" move on Beware dear readers to the most important thing in this whole subject is to explain how to add this feature, I suggest you topreview first an example of added here 

 Demo

     After previewing the previous example we turn to the control panel of the Blog, press the "design", then "Edit HTML" then tick the box templates expand the user interface elements.

Find the following code, through the use control panel (CTRL + F). 

Now here we have to do two things:-

1. Removing read more link or jump break line.
2. Adding custom read more buttons.

First of all removing read more link

1. Go to Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand widget Templates" Box
4. Search for this,

                <data:post.body/>

    5.   and just below it find and delete this code,

          <b:if cond='data:post.hasJumpLink'> 

             <div class='jump-link'> 
            <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
             </div> 
            </b:if >

   6.   Save your template and you are done

Secong thing we have to do is

1. Go to Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand widget Templates" Box
4. Search for this,

                <data:post.body/> 

    5. Replce the above code by

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>

<a expr:href='data:post.url' ><img src="http://2.bp.blogspot.com/-FrowmBL31ws/T28Lo_tJy2I/AAAAAAAAAHg/7jswg7m-nsc/s1600/blue.png" title="read more" alt="read more"/> </a></span>
</b:if>
</b:if>

              

    6.You can change url written in blue by your own read more button.

    7.You can download read more button through below link ,then upload it through picturepush.

                                                               DOWNLOAD