How to add READ MORE buttons Automatically for blogger

  

Welcome again dear bloggers, in this topic

After my last article about how to Add some effects of mobility on the images to blogger Blogs will 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 in most of the articles that their liberation - if not all - this considering the importance gained by the its role, which focuses on shorten articles  to a small 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 the title 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 visitor alienate them and thus reduce the order of the blog in Google, in addition to what are adding this addendum, 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 to browse 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 to preview first an example of added here

     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>

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

<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' > </script>

or    

<script type='text/javascript' src='http://way2blogging.github.com/blogger-widgets/w2b-auto-readmore-blogger.js' > </script>

Or

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

Save this Code as " auto_readmore_blogger.js" Upload it in hyper link .


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 here and 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.   Greetings.