How To Add Auto Read More With Thumbnail For Blogger

Usually, to add jump breaks in blogger, you 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. Doing this will create uniformity in the number of characters displayed in all posts snippet and also make your blog load faster.

The auto read more with thumbnail for blogger blogs automatically creates post summaries or 'after jump break summaries' in blogger.

Follow the steps below to automatically add read more with thumbnails in blogger.

How to Add Automatic Read More to Blogger

1. Login to your blogger dashboard.

2. Goto your Template

3. Click on 'Edit HTML'

4. Using Ctrl+F keys, search for <data:post.body/>

5. Replace the second <data:post.body/> you find in your template with the code below

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

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

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

6. Also search for the tag </head> in your template

7. Copy this code below and paste 'above' </head>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</script>

//<![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 != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

.readmore a {text-decoration: none; }

</style>

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

.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:

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.

If you find this article useful please share with your friends and if anyone fined any difficulty then don't be shy to make use of the comment box below.