technology news,tech news.

Oct 9, 2013

How you can add ``read more'' option in your blogspot blog post

Hello i am nisharulhasan. today i share a great tips for you and your blog


post is the also important for a blog and also important to create read more option in your blog post
now i tell you some thing to create a read more option on your blog post in blogger. please follow my down steps. and create read more option on your blog post.

At first you have need to log in your site. then go dashboard . 

 

find template and click the template. choose edit HTML. find the </head> line and  write this down



see the picture

code.

    </head>
    <!-- Auto read more script Start -->
    <script type='text/javascript'>
    var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
    summary_noimg = 430; //summary length when no image
    summary_img = 340; //summary length when with image
    img_thumb_height = 200;
    img_thumb_width = 200;
    </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(thumbnail_mode == "yes") {
     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>
    <!-- Auto read more script End -->
    <data:post.body/>
    <!-- Auto read more Start -->
    <!-- http://www.BloggerSentral.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <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>
    <a class='more' expr:href='data:post.url'>Read more ...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->
    now find this line  <data:post.body/>
    replace the line with this code. 
    <!-- Auto read more Start -->
    <!-- http://www.BloggerSentral.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <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>
    <a class='more' expr:href='data:post.url'>Read more ...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->
    now click the save option.

     next system. 

    Go to your all post and chose edit post.
    click edit post and again click html
    chose your line break and write the code inter your html code
    <!--more-->
    now you can click the update option. it some time for update your post. when update complete. than you can click view blog option . and see your post. it also create read more option. enjoy it.
    But have you face any problem please comment your problem. I also trying to help you.
    now thanks for read my post
    
    

 


No comments:

Post a Comment