Summarize Your Blog Post With Auto Generated Summary Tag & Read More.

Blogger templates are not much flexible to customize out of blogger's official template designer tool. To every newbie it's too easy to stylize the official templates with designer tool but when we come to design custom blogger templates we must be an experienced designer othewise we couldn't perform well and any mistake can entirely destroy any part of our blog.

One of the blogger's template features is post summary tag. In official templates this widget is auto generated but in custom template we're to make custom summary tag manually. Today's part of our regular guide we'd show you all how you can make your old blogger template's post summary tag into wordpress styled professional summary tag which is most popular style on blogging sphere and it will give you new experience in blogging.

#1 Install Font Awesome  & Read More Styles

1. Go to Blogger → Template
2. Backup Your Template
3. Now click on Edit HTML
4. Now search for </b:skin>

5. Go to this page → select and copy entire fontawesome css code → paste right before </b:skin> tag

Note: Hey! don't worry let me explain, everybody wants to design his blog or site so that visitors will be extra more attractive and will revisit his blog again and again. Font awesome is an advanced programming code which can generate specific fonts, icons, thumbs on webpages and those fonts are as like as text font when we customize. Here we installed font awesome and will load asynchronously so that it won't elongate our site resources when browsers will render pages instead we can use font awesome's awesome styles to design our blogs and websites.

6. Again copy following readmore styling code and paste before </b:skin> tag

.readmore{margin-top:-1px; float:right}
.readmore a {
text-decoration:none;
    color: #fff;
    font-weight: bold;
}
  .readmore a:hover {
text-decoration:none;
    color: #fff;
  }
.readmore{
color:#333;
margin-top:20px;
}
.readmore {
    background: #21a6de;
    border: 1px solid rgb(234, 234, 234);
    display: inline-block;
    color: rgb(255, 255, 255);
    font-family: Arial,Serif;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.4px;
    padding: 3px 3px 4px 10px;
}
.readmore:hover{
    background: #209fd4;
}
.readmore:active{
position:relative;
}

#2 Installing Summary Tag and ReadMore

7. Don't save your template yet, search for </head>
8. Now add the following script right before </head> tag

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 115;
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(img.length>=1) {
  imgtag = '<span style="float:left; height: 120px; border: 1px solid #EEE; margin-right: 10px; padding: 5px 5px 0px 5px;background:none repeat scroll 0% 0% rgba(77, 77, 77, 0.04);"><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>

9. Again search for <div class='post-body entry-content'>
10. Look carefully, below this line you should see <data:post.body/>
11. Found it? Now replace <data:post.body/> with below code entirely

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<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'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script> <span class='readmore'><a expr:href='data:post.url'>Continue Reading <i class='fa fa-angle-double-right'/></a></span>

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

12. Now find your previous post summary tag or readmore and remove it since we've added a default readmore in above snippet so we've to delete our previous readmore snippet otherwise it will make staggring on itempages of blogger

Hint: You can find your previous readmore snippet close to <data:post.body/>

13. Finally save your entire template and

Customization Part

This widget has lots more customizations and you can do these yourself if you're barely smart in Css and HTML. Here i'd denouce the total instructions for customization of blogger's most popular summary tag

Summary Tag Customization:

summary_noimg = 430; = Refers the height of summary(in pixels) on itempages without image
summary_img = 340; = Refers the height of summary(in pixels) on itempages with image
img_thumb_height = 115; = Refers the height of image(in pixels) on itempages
img_thumb_width = 200; = Refers the width of image(in pixels) on itempages

Read More Style Customization:

1. Change the readmore background color with #21a6de;
2. Change the readmore button border color rgb(234, 234, 234);
3. Change readmore font family Arial,Serif; 
4. Change readmore font size 13px; 
5. Change readmore font weight bold; 
6. Change readmore hover background color #209fd4; 

Readmore Property Customizations:

To chang the text for summary tag where it's neithe readmore it's Continue Reading 

Also you may change the font awesome icon which in angle-double-right, simply go to this page > Choose your preferred icon you want to fasten with continue reading and simple replace with following code

<i class='fa fa-angle-double-right'/>

What if i want to add only image instead continue reading or adding fontawesome?

If you wish to add your custom made "Readmore" or "Continue reading" icon instead any text then simply replace your icon image with following code

 Continue Reading <i class='fa fa-angle-double-right'/>

The above code should be replace with

<img src="YOUR READMORE ICON"/>

YOUR READMORE ICON will be replaced with your icon location URL

Also don't add Fontawesome and Read more styles on step #1 only follow tutorial from step #2

How to use blogger post editor to properly fech data with new summary tag?

Now most of the new bloggers face trouble that how they will represent content with auto summary tag formatted template. It's too simple and it will give you blogging experiences with professionalism

1. On your blogger post editor write some text to test the function of widget
2. After writing 8 or 10 lines add an image, below are some of the examples of image sizes

400 x 200,450 x 250, 500 x 300, 600 x 350 [Rectangle sized images for better outlook]

3. After adding image embed read more tag and publish your post.
4. Now check the functionality of summary tag on your blog homepage

Need More Support?

I tried my best to make the tutorial as easy as the newbies can understand. The snippet is pure and tested by many users even me. If you find tutorial helpful don't forget to share it on the web also leave us comment if you face trouble. 

Peace and blessings buddies: