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.
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 = "no-float" ;
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 == "static_page"'><br/><b:if cond='data:blog.pageType != "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</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 == "item"'><data:post.body/></b:if>
</b:if>Step 4: Save the template by clicking save button
You might like these:
PassionDuo Red Blogger Templates free download
This template includes several popular ad formats for your blog. You get a 468 x 60 banner space in the header, six 125 x 125 banner spots on the right sidebar, and many other places on the side of a skyscraper banners.
We have also included our popular sidebar widgets such as recent posts, recent comments and a cool Feedjit (real time visitor widget). Simply insert your blog URL, RSS Feed in recent posts and comments widgets, and they begin to work.Unlike most other custom make money blogger templates, we have taken another step and install the Fonts and Colors "functionality. This means that you can change all the colors and font styles easily by just using the built-in section of Blogger. We also set up the comments section, so it looks very professional as well.
PassionDuo also includes the main tabs, which can be added through your screen Blogger page elements. RSS Feed icon automatically appears after you add your first tab so do not worry, since the first installation.
Setting up the rest, this pattern is actually quite easy. You can exchange your ads and replace them with your own or do not hesitate to retain existing ones, if you do not have any use. Make sure you check the "Expand Widget Templates" checkbox on the "Edit HTML" page in Blogger, before attempting to make any changes. Also, make sure to backup your old template just in case you make a mistake.Let's start with a 468 x 60 banner title. Search "in the template code and the first one you encounter, where you replace the board.
PassionDuo Red Blogspot Templates The second copy of "Google AdSense code which you can either keep, replace, or simply removed. # For the six 125 x 125 banner ads you need to find "and update those one by one. Make sure not to delete and
before and after each ad otherwise it will look ridiculous. If you do not have ads to use, I recommend clicking through each banner and become a partner. Then you can replace the affiliate codes with your own and start making money!
Download Link1 | Download LINK2
Subscribe to:
Posts (Atom)
