Enter your email address:


How to add Automatic Read More with Thumbnail in Blogger BLOG

This article will explain you to how to add the automatic read more for blogger blog with thumbnail.

Step 1: Go to Blogger.com Login with your Email and password, Go to Design and Select Edit HTML Tab and click and then find
Expand Widget Templates and then Click the check box again
Step 2: Press CTRL+F this code
</head>
Add these code before </head>
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 120;
</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; padding:0px 10px 5px 0px;"><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>
And then next step will be Again press CTRL+F and find

<data:post.body/>
And Replace with below code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<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='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzviSXR1dAl2BPgiEi9WJOGSqZBy-a3x8J1l69-ViSDBcQf5bXAmAO0OEYPAgb87UpoadWPXfGtTR7Ik_KW_oXlXhwcKuj651szjdh6bLtkhLsxQ1CzLEEl40s56z7NN1Yks2TY5syQpw/s400/read_more.jpg'/></a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>
Step 4: Save the template by clicking save button






You might like these: 



0 comments:

Post a Comment

free counters

Design by: Video Tube | Sponsored by: Bangla Choti Blog | Tecnology Blog | SWC Chuda chudi Network | Bangla Sex Story | Mobile Tip Tricks | hot Video Clip | English Choti |Arabic Song | Free Call | Bangla Ebooks | free Call and sms for bangladesh |Unlimited Free Call |LoveMaking Story | Bangladeshi Real Story | বাংলা চটি ও চুদাচুদি গল্প | Choti Girls | Bangla Choti, Chudachudi |Belly Danse | Hot Video Collection | chuda-chudirgolpo.com | Love Story |Download Free Games | chotidotcom.com | Free SMS |Belly Danse | Hot Video Collection | Adult Blog | Love Story |Download Free Games | Earn Money From Blog |