Blogger Tutorials

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 :

1. First log in to your blogger account.
2. Then click on Design Link.
3. Then Click on Edit HTML.
4. Check Expand widget content.
5. Then Search for below code :
   </head>
6. Add the below code before </head> :

   <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
   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;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
   var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>

7. Then Find this <data:post.body/>
8. Then Replace <data:post.body/> with the below code :

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
   </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 == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

9. Then Click on Preview if no error occurs then just click on save.

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.