Tutorial : Auto Read More With Thumbnail For Blogspot/Blogger Posts



  • Step 1 : Go to Blogger Dashboard and Select Template and then select Edit HTML to open your Template code.

  • Step 2 : Now on your Blogger Template search for this code , Note that this code appears two times on blogger, you got to find the second one.

  • Step 3 : Replace the second <data:post.body/> with this code

<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>
  • Step 4 : Search for </head> and just above it. Paste this code
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;

<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-transform: uppercase;
margin: 0 auto;
font-size: 10px;
letter-spacing: 2px;
text-align: center;
padding-top: 30px;
border: 1px solid #000;
padding: 10px; }

  • Step 5 : Select PREVIEW TEMPLATE. If it works, save it.
Suppose you have any questions on the this tutorial, please feel free to leave them in the comments box below.

Aina Akmal

AINA AKMAL. Seorang gadis comel yang berasal dari utara Malaysia. Punya impian sebesar alam semesta dan seorang yang bercakap banyak. Pemegang status pelajar seumur hidup. Keep learning and never give up adalah prinsip beliau. Masih bujang terang tang tang kata orang. Nak berkenal? Boleh jenguk bawah ni.

1 comment:

  1. Dah cuba tapi tak jadi :( Now dah pakai grid style :)