After a long time the most awaited Blogger feature called static pages or stand alone pages has been launched in drafts . But it has some issues with automatic expandable summaries read more trick for blogspot. With this new code you can minimize your blogger posts so that only some of your description and image appears on the homepage and the rest of all is shown when you visit that post or static page.
you might have familiar with earlier read more hack.
Just Follow this simple steps :
- First log in to your blogger account.
- Then click on Design Link.
- Then Click on Edit HTML.
- Check Expand widget content.
- Then Search for below code :
</head> - Add the below code before </head> :
<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 300; img_thumb_height = 130; img_thumb_width = 160; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTagundefinedstrx,chop){ ifundefinedstrx.indexOfundefined"<")!=-1) { var s = strx.splitundefined"<"); forundefinedvar i=0;i<s.length;i++){ ifundefineds[i].indexOfundefined">")!=-1){ s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length); } } strx = s.joinundefined""); } chop = undefinedchop < strx.length-1) ? chop : strx.length-2; whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++; strx = strx.substringundefined0,chop-1); return strx+'...'; } function createSummaryAndThumbundefinedpID){ var div = document.getElementByIdundefinedpID); var imgtag = ""; var img = div.getElementsByTagNameundefined"img"); var summ = summary_noimg; ifundefinedimg.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
- Then Find this <data:post.body/>
- Then Replace <data:post.body/> with the below code :
<b:if cond='data:blog.pageType == "static_page"'><b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumbundefined"summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
- Then Click on Preview if no error occurs then just click on save.
Now let us see how to customize the code to suit your style :
- summary_noimg = 500 ;
- summary_img = 400 ;
- img_thumb_height = 130;
- img_thumb_width = 281 ;
This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.
If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.
This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.
This tag decides the width of the Thumbnail image to be shown
1. Find this :
http://i37.tinypic.com/351icqx.jpg
2. Change it to your desired image you want.
Having Text Instead Image :
1. Find this :
<img src=’http://i37.tinypic.com/351icqx.jpg’/>
2. And Replace it with the desired text you want to use.