Blogging Tutorial

As we know that now Blogger has supported the function to cut off the article or known as Read more function. But recently, the automatic Read more is more popular because the automatic Read more will cut off the posts automatically without doing anything.


If you want your blog has the automatic Read more function, you can follow the easy steps below. Even Kang Rohman has discussed it previously in another blog, at blogtemplate4u.
The following are the steps:

1. Login to blogger with your ID.
2. Click Layout
3. Click Edit HTML
4. Click Download Full Template and backup your template to anticipate if error occurs.
5. Tick the small box beside the words Expand Widget Templates.
   
   
   
6. Copy and paste the JavaScript below exactly above the code </head>
   
   
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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> 

   
   
   
   Or you can download this script: download
   
   
   
   
7. Find the code <data:post.body/> on your template (tips: press Ctrl + F on your keyboard then write <data:post.body/> and hit Enter).
8. Remove the code and change with the code below:
   
   
   
   
   
   
   
   

   <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'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   </b:if>

   
   
   
9. Click SAVE TEMPLATE.
10. Done

By installing the script, your posts will be cut off automatically by the Read more function. Something interesting from this script is that it will create a thumbnail from the image that you include in your post.


In additional, you can adjust the value of the code below to fit your posts height.


summary noimg= 430 – the height of article’s cutting without image

summary img=340 – the height of article’s cutting with image




Enjoy!