Create blogger summary with thumbnail on blogger homepage

By Ervan Repana

Blogger template by default is limited characters so we can make more characters too see so other people see what we make article on. We can customize our blogger template with custom summary and thumbnails to make blogger look beautiful like professional and premium template with beautiful readmore.
How to make blogger summary and thumbnail is easy to make :
Go to blogger dashboard and click customize template editor and add css code bellow between <b:skin><[[ your css ]]></b:skin>


.box-readmore{text-align:right}

a.readmore{padding:4px 15px;text-decoration:none;font-size:14px;background:#666 url() left top repeat-x;border:0px solid #CAC4C4;color:#fff;-moz-border-radius:04px; -khtml-border-radius:04px;left top repeat-x}

a.readmore:hover{background:#222 url() left top repeat-x;border:0px solid #3F7B84;color:#FFF}

After that go to between <head> your js script </head> and put below js script


<script type='text/javascript'>

summary_noimg = 400;

summary_img = 350;

img_thumb_height = 120;

img_thumb_width = 150;

</script>

<script type='text/javascript'>

    //<![CDATA[

    function HTMLtagdrop(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 ThumbnailSummary(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>' + HTMLtagdrop(div.innerHTML,summ) + '</div>';

    div.innerHTML = summary;

    }

    //]]>

</script>



Final, search for <data:post.body/> and replace with below html codes :



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify'>

<data:post.body/>

</div>

<script type='text/javascript'>ThumbnailSummary

(&quot;summary<data:post.id/>&quot;);</script>

<div class='box-readmore'>

<a class='readmore' expr:href='data:post.url'>Read More&#187;</a>

</div>

</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>

Now save custom template editor, and view your post url. Make sure not wrong to put codes. Now your blogger post page like blogger premium template.
Thanks for reading.