How to add Stylish Read more button in blogger

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 thesentences 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). 

</head>

Paste the following code directly above it (before)

<script type='text/javascript'>

var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script type='text/javascript'

src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' >

</script>

in above codes you can change the numeric numbers according to our use

summary_noimg = 430;	:Summary length if no image
summary_img = 340;	:Summary length if it has image
img_thumb_height = 100;	:Thumbnail image height
img_thumb_width = 120;	:Thumbnail image width

 After that find this

  <data:post.body/>

code in your template and replace it with below code.

<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' >Read more ... </a></span>
</b:if>
</b:if>

You can also change the phrase read more of any the phrase you like, and you can also add a picture place of the previous statement, which refers to the pressure to follow up on reading, and this is by copy the code below and paste it place the phrase read more :

<img src="http://2.bp.blogspot.com/-FrowmBL31ws/T28Lo_tJy2I/AAAAAAAAAHg/7jswg7m-nsc/s1600/blue.png" title="read more" alt="read more"/>

You can use the engine google gigantic to search for a different picture, that go to this link hereand write the words "Read More Buttons" and will appear before you, a wide range of results is in a variety of colors and other buttons to read more, choose one of them then copy the link like: http://3.bp.blogspot.com/image.png paste it place the blue link above,
But if you are design professionals on the images you can design a personalized button Read more specifications that you want so characterized from the rest of the sites.
Dear so we got to the end beware our theme for the day, I hope that I have managed to raise this issue, that the gain you like it, please publish it to your accounts on Facebook Twitter.