Auto read more for blogger with image and beautiful button

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>
You can change read more image with you text also. Just replace http://3.bp.blogspot.com/-_Z3uvb3Cf2I/Ur2t-zanSZI/AAAAAAAAEkE/mjHufH65s6Y/s1600/read-more.png  to Read More...

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!

2 comments: On Auto read more for blogger with image and beautiful button

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page