Friday, October 26, 2012

Automatic Read More Effect For Your Blogger With Thumbnail

Friends,Now i share Read More hack for Blogger with automatic Thumbnail creator script which will automatically create excerpts of blogger posts and with a thumbnail. It is help to decrease your page load time.

Go to Blogger Dashboard.

Click on DropDown Menu and select Template.

Backup your Template before making any changes to your blog.

Now Click on Edit HTML --> Proceed --> Expand Widget Templates .

Press Ctrl + F and find </head> tag.

Copy the code shown below and paste it Before/above </head> tag.

<span id="preservef1239e3ceee443a8b3f0dc7d0a37843c" class="wlWriterPreserve"><script type='text/javascript'> //<![CDATA[ function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.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)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f} //]]> </script></span> <span id="preservef290a38e0c4748028d0fb91322445e80" class="wlWriterPreserve"><script type='text/javascript'> summary_noimg = 550; summary_img = 450; img_thumb_height = 150; img_thumb_width = 200; </script></span>

Now find <data:post.body/>

Replace it with the code shown below.

<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> <span id="preserve0a3806fe2046486c9acd4c85269fca84" class="wlWriterPreserve"><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script></span> <div style='clear: both;'/> <span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span> </b:if> </b:if>