Auto Image Thumbnail & ReadMore Link For Blogger Post

Some people looking for this code after seeing this on many blogs templates but he didn't find this because blogger templates provider create a template with this code and force people to use their template. But now peoples are free to use the code with their own desire template. Expandable post or popularly known as “Read More” is a feature that make your blog shows only a part of your posts on index pages i.e. Home, Labels and Archive pages.

At the end of each preview there will be a link to the post page, usually attached to the phrase “Read More”. We will describe her that "How To Add Auto First Image Thumbnail & ReadMore Link After Given Length InBlogspot Posts By Adding Awesome JavaScript Code Easily?"

Blogger’s Official Read More -The Jump Break- Features:

1.) Uses HTML Code For Jump Break.
2.) Need To Insert Code(Jump Break) In Every Post.
3.) Read More Is Applied Only To Those Posts Which Have The Code Added.
4.) Length Of Each Snippet Can Be Customized.
5.) No Thumbnail Will Be Shown On The Main Page. To Show Picture, You Must Place The Picture Inside The Snippet (At The Beginning Of Post).
6.) The Code Loads Full Post But Only Shows The Snippet.
7.) Will Increase Your Page Loading Time.
8.) Did Not Perfect For Better SEO.

Our Customized Auto Read More And Auto Thumbnail Features:

1.) Uses HTML-Javascript Code.
2.) Post Is Untouched While Editing.
3.) Length Of The Post (On Home, Labels And Archive Pages) Can Be Changed, But It Affects All The Posts.
4.) Auto Read More Will Applied On All Posts, No Exception.
5.) The First Picture In Each Post Will Be Automatically Used As A Thumbnail (On Home, Labels And Archive Pages). You Can Also Choose Not To Show Thumbnail.
5.) Only Loads The Snippet (On Home, Labels And Archive Pages).
6.) It's Will Make Professional Looking Blog.
7.) Visitors Have To Click Read More To View The Full Post That Will Increases Your Page Views.
8.) Will DecreaseYour Page (On Home, Labels And Archive Pages) Loading Time.
9.) Perfect For Better SEO.
10.) You Don't Have To Add -The Jump Break- In Every Post.
11.) It Will Effect All Of Your Post InYour Blog (New To Old).
12.) 99% Of Blogger Are Using This Code.


How To Apply The Code On Your Blog:
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Expand Your Template.
5.) Click "CTRL+F" To Find </head> Code.
6.) Now Copy The Below Code And Paste It Before The Above Code.

<!-- Auto Auto Image Thumbnail & ReadMore Link By EXEIdeas Script Start-->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 500;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 250;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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;
}
//]]>
</script>
<!-- Auto Auto Image Thumbnail & ReadMore Link By EXEIdeas Script End -->

7.) After That, Find This Below Code Using "CTRL+F.
<data:post.body/>
8.) You Will Find Three Of Them, Replace The Second One With The Following Code.

<!-- Auto Auto Image Thumbnail & ReadMore Link By EXEIdeas Code Start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>
<!-- Auto Auto Image Thumbnail & ReadMore Link By EXEIdeas Code End -->

9.) Click Preview. If It Works, Then Click Save.


Customization:
1.) Change yes To no If You Don't Want To Show Image Thumbnail.
2.) If Your Post Have No Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 500 You Can Change It With Your Desire.
3.) If Your Post Have Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 350 You Can Change It With Your Desire.
4.) Height Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 200 You Can Change It With Your Desire.(It Is Calculated In Pixels)
5.) Width Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 250 You Can Change It With Your Desire.(It Is Calculated In Pixels)
6.) You Can Change The Words “Read More...” With Your Desire, If You Want To Show An Image Instead Of  Text Then Change It With

<img  src="http://1.bp.blogspot.com/-Tp2IeCY8rwY/TpvG0uIwGUI/AAAAAAAAAfE/T2e0SlO1E5I/s1600/Read-More-Button.png" style="float: right; margin: 0 10px 0 5px;" title="Read The Full Awesome Article" alt="Read More"  />

Note: If You Have Already Inserted -The Jump Break- Option In Your Previous Post, After Applying This Code You Will See The Two “Read More...” Link Below Every Old Post. Then Please Contact Me Or Comment Here, I Will Set It For You.