TUTORIAL IT: Auto Read More With Thumbnail For Blogger Blogs

Wednesday, November 11, 2015

Auto Read More With Thumbnail For Blogger Blogs

The auto read more with thumbnail for blogger blogs automatically creates post summaries or 'after jump break summaries' in blogger. Displaying the full post with all the images it contains only helps to increase the page load time of your homepage. Most people on visiting your blog, can leave immediately if it takes too long to load. With the use of jump breaks in your posts, instead of lengthy post being displayed on your homepage, a snippet of your recent blog posts is shown, making it easier for visitors to navigate through the blog. Usually, to add jump breaks in blogger, one will have to manually add the read more tag , or use a template that has already included this feature. Instead of following the manual process, you can add an auto read more with thumbnail in your blogger blog. This will create uniformity in the number of characters displayed in all posts snippet and also make your blog load faster. Follow the steps below to automatically add read more with thumbnails in blogger.

Also Read: Showing Post Title Before Blog Title In Search Results
How to Add Custom Robots Header Tags In Blogger
How to Disable Right Click On Blogger - Stop Copy Paste

How to Add Automatic Read More to Blogger

Goto your Template
Click on 'Edit HTML'

Using Ctrl+F keys, search for <data:post.body/>
Replace the second <data:post.body/> you find in your template with the code below

<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'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></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>

Also search for the tag </head> in your template
Copy this code below and paste 'above' </head>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

How to Customize Auto Read more in Blogger

In the first code, to change the text to be displayed, change the highlighted readmore to your desired text.

To change the number of characters to be displayed when there is no image in the post, change the highlighted value 490 to your desired value.

To change the number of characters displayed when there is an image in the post, change the value 400 in the code.

To increase the sizes of the images in the post snippet, modify the values 160 for the height and 180 for the width.

By default, the auto Read more, will appear as a text. To change it to a colored styled button, follow the steps below:

Still in your Blogger template, search for ]]></b:skin>
Copy any of the codes for your preferred style and paste 'above' ]]></b:skin>

Style 1

Auto Read More With Thumbnail For Blogger Blogs

.readmore {
 display: block;
 font-size: 12px;
 font-weight: bold;
 text-align:right;
}

.readmore  a {
        font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #ffffff;
 padding: 6px 15px;
 background: -moz-linear-gradient(
  top,
  #42aaff 0%,
  #003366);
 background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#42aaff),
  to(#003366));
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 border: 1px solid #003366;
 -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 text-shadow:
  0px -1px 0px rgba(000,000,000,0.7),
  0px 1px 0px rgba(255,255,255,0.3);
}

Style 2

.readmore {
display: block;
 font-size: 12px;
 font-weight: bold;
 text-align:right;
}

.readmore a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #ffffff;
 padding: 6px 15px;
 background: -moz-linear-gradient(
  top,
  #eaeaea 0%,
  #000000);
 background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#eaeaea),
  to(#000000));
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid #a2a89f;
 -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
 -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
 box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
 text-shadow:
  0px -1px 0px rgba(000,000,000,0.4),
  0px 1px 0px rgba(255,255,255,0.3);
}

Style 3

.readmore {
display: block;
 font-size: 12px;
 font-weight: bold;
 text-align:right;
}
.readmore a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 padding: 6px 15px;
 background: -moz-linear-gradient(
  top,
  #ffffff 0%,
  #b5b5b5);
 background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#ffffff),
  to(#b5b5b5));
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 3px solid #0088ff;
 -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 text-shadow:
  0px 1px 2px rgba(000,000,000,0.5),
  0px 1px 2px rgba(252,254,255,0.9);
}

Finally, Save your template.

Also Read: How to Make Blogger Widgets/Gadgets Sticky(Float)
How to Change Post a Comment Text In Blogger

Following the steps above on how to make all posts in blogger homepage displayed with an automatic "read more" button and a thumbnail, on viewing your blog, the auto read more has been added. You don't have to go through the process of manually adding the  tag to create jump breaks in your posts.

Pages

Wednesday, November 11, 2015

Auto Read More With Thumbnail For Blogger Blogs

How to Add Automatic Read More to Blogger

How to Customize Auto Read more in Blogger