Blogspot Vision: How to add a "Read More" link and control postings appearance and summary length

Directions

1. From the Blogger Dashboard, navigate to Layout > Edit HTML.

2. Copy and paste the following section code right after this section code: ]]></b:skin>

Select All

<script type='text/javascript'> 
var thumbnail_mode = "float" ;
summary_noimg = 440;
summary_img = 360;
img_thumb_height = 140;
img_thumb_width = 140;
</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) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span style="float:left;margin:0px; padding:0px 5px 0px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  } else {
   imgtag = '<div style="padding:0px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
 
 //]]>
</script>

3. Next, you'll want to stylize your postings, this can be done by adding the section code below right after the code above:

Select All

.post-body{
  display:table;
  font-size:13px;
  font-style:italic;
  height:1%;
  padding: 10px 20px;
  line-height:1.7em;
}
 
.post h3 {
  font-size:25px;
  font-weight:bold;
  letter-spacing:-2px;
  margin:0px 0 0;
  text-decoration:none;
  padding:10px 0 4px 20px;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:$textcolor;}
 
h2.date-header{text-indent:-9999em;}
 
.numComments {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48jgnEWxXFcW0Ur1CxPr6ySl4pEv0teJtBnY0Ag9jLNhZF3y4nc_DbNzFD5_I9yCAGOTiTpzfV8JefQpQWIPY4ql069PsXKtg0iXR3gnyEapgRrdslYz5M0ubJwLdlNtRa___19MBJjk/s1600/comments.png) no-repeat top right;
  float:left; 
  text-align: center;
  margin: -7px 0px 0px 20px; 
  padding: 6px 0 0 0; 
  font-size: 13px;
  font-weight:bold; 
  width: 35px; 
  height:35px; 
  font-family: Arial, Sans-serif;
  text-shadow:0 1px 0 #f9f9f9; 
}
.numComments a:link{
  color: #404040; 
}
.numComments a:visited{
  color: #404040; 
  text-decoration:none;
}
.numComments a:hover{
  color: #404040; 
}
 
post-comment-link{
  margin: 0px; 
  padding: 0px 0px 0px 0px;}
 
#showlink{
  display:block;
  float: right;font-size:13px;
  padding: 0px 20px 0px 0px;text-shadow:0 1px 0 #f9f9f9;}
 
#showlink a, #showlink a:visited{color: #404040}
#showlink a:hover{color: #404040; text-decoration: none}
 
.post-labels{margin: 0px; padding: 0 0 0 0px;text-decoration:none;font-size:11px;}
 
</style>

Note: Use CSS to stylize your posts to the way you like it or use this image pallete generator to generate colors that match your template - Image Pallete Generator @CSSDrive

4. Now, you'll need to add the "Read More" link and the "comments" link if you'd like. Click on "Expand Widget Template" and search for the class span below:

This is your Comments Link:

5. If you want the comments link inside postings, locate this section code and move it right after this section code: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

6. If you want the "Read More" link inside your postings, copy and paste the section code below right after this section code: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

This is your Read More Link:

Blogspot Vision

Wednesday, January 13, 2010

How to add a "Read More" link and control postings appearance and summary length

3 comments:

Search This Blog