Automatic Thumbnail and Read More Function for Blogger

Automatic Thumbnail and Read More Function for Blogger,

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.

Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code

<data:post.body/>
4. Replace with this code below
here is code:
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>


5. Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>
clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Auto Read More Hack:

                               make your blog looking awesome and reduce your blog page loading time, so that blogger hack is important for any bloggers and Almost every blogger use this hack.That hack automatically create post summaries with thumbnails.Most of the Bloggers share this blogger hack but this time we are sharing new updated auto Read more hack.That Blogger hack script provided by Rilwis  and some updated and compressed by Techtuts hub.





Features of that New or Updated Read More Hack:

1.Add Automatic default thumbnail image when posts don’t have any images.
2.Easily turn off auto readmore for some first posts.
3.Option to turn on/off auto readmore for homepage and label page.
If you're Using Already Auto Read more Hack ,So first Remove old Auto Read More Hack then add this New Auto Readmore Hack.






6 comments:

  1. I havе been exρlоring for a little for any hіgh-quаlity artiсles oг weblog posts οn thiѕ kind of house . Exρlorіng in Υahoο I eѵеntually ѕtumbled upοn thіs web sitе.Rеading thiѕ information So i am glad to eхhіbit that I've an incredibly excellent uncanny feeling I discovered just what I needed.
    website design

    ReplyDelete
  2. Keep it up dude!!!

    -http://easytodownloadz.blogspot.com/

    ReplyDelete
  3. I tried doing exactly what you said. Twice! but Didnt work at all. My blog is www.nadiyanajib.com
    I really want to change my Read More plain text to a black colored box with white writing. Can you help me please.

    ReplyDelete