Advertisiment

How To Make Automatic Readmore With Tumbnails Image On Blogger

Ical Holic 11/30/2011 05:59:00 PM
Icacell Readers, in this post I will give bloggers trick is to make readmore automatic with tumbnail image. Where the use readmore very useful for the appearance to look more dynamic blog. Readmore with tumbnail images synonymous with a particular script code will automatically search for images on the posts to be displayed on the main page of the blog. So with this readmore, blogger friends no longer need to set it manually, because all will be done automatically. All you need do is post the articles only.
How To Make Automatic Readmore With Tumbnails Image On Blogger
Automatic Readmore With Tumbnails Image

The following steps
  1. Login to your blog.
  2. Open Edit HTML page, and cecklist expand widget templates
  3. Find code below
    <body>
    Press CTRL + F on keyboard to easy find it
  4. Copy script code below and put it just above the code in step3
    <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
    summary_noimg = 530;
    summary_img = 420;
    img_thumb_height = 150;
    img_thumb_width = 150;
    </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; margin-right:5px; "><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>
  5. Find code like below, there will be 2 code, select the first code.
    <data:post.body/>
  6. If you have applied previously readmore else, delete all the code, replace with 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
    </b:if>
  7. All the code has been installed, now click preview to make sure nothing wrong code, if the blog to come up with good, then immediately save the settings, by clicking the Save Template.
Now look at the new appearance of your blog. Good trying the trick How To Make Automatic Readmore With Tumbnail Image On Blogger and good luck.
Tags:

Post a Comment

0 Comments