Auto read more automatically shorten your blog post and create a image thumbnail which is present in the post. It also helps to load your blog page faster. You can check this example on TricksWay.
How To enable ?
You just need to add two codes in your blogger xml template and no need jquery or css. Now lets start to add auto read more with thumbnails for blogger. You can also find demo below:
Demo
Steps:
Go to Blogger Dashboard > Design > Edit HTML.
Find
Place below code just before .
If you want to change preview image thumbnail size then find these numbers 120 and 140 and change according to your required size.
<script type='text/javascript'> var thumbnail_mode = "no-float" ;summary_noimg = 430;summary_img = 340;img_thumb_height = 120;img_thumb_width = 140;</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(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>
Now find and replace it with below code :
<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'><img src="http://3.bp.blogspot.com/-_Z3uvb3Cf2I/Ur2t-zanSZI/AAAAAAAAEkE/mjHufH65s6Y/s1600/read-more.png"></a> </b:if> </b:if>
2 comments: On Auto read more for blogger with image and beautiful button
Hi, I truly like the theme... but i dont want the image stream from flikr only .... i would like to get it from picasa.. the best way to do that?
http://www.6cfzsP4cu9c6cfzsP4cu9.com/6cfzsP4cu96cfzsP4cu9c
Magnificent site. A good amount of beneficial data the following. I will be submitting them a number of close friends ans additionally giving inside delicious. And clearly, thank you for your effort!