Thursday, 24 September 2015

Auto Read More With Thumbnail for blogger

Auto Read More With Thumbnail for blogger: Many Blogger want to add JavaScript auto read more blogger button in their main page to improve the design of the home and they want to look more attractive. its very simple to add Auto Read More in your main page Just you want to add few code in to your blog. And Enjoy new attractive auto read more with thumbnail for blogger.

Benefits of Auto Read More With Thumbnail for blogger 

Auto Read More With Thumbnail is summarized your post content and summary your Blogger Home page, Category page and Archive Page looks more attractive and Professional.

Installation of Auto Read More With Thumbnail for blogger

In this i'll tell you how you can install Auto Read More With Thumbnail for blogger.

Step 1. Go to your Template and Click on Edit HTML.
Step 2. Press CTRL+F and search box is appeared.
Step 3. Now you need to find. 
<data:post.body/>
Note: hit Enter you'll find this code more then once now you need to stop at the third one. 
Step 4. Replace <data:post.body/> this with below 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>
Note: If still everything is same then you need to replace with second one.
Step 5. Now you need to Find head tag.
</head>
Step 6. Just above the head tag you need to place this code.
<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>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;

If you want to modify the Auto Read More With Thumbnail then change these values.

0 comments:

Post a Comment

Item Reviewed: Auto Read More With Thumbnail for blogger Rating: 5 Reviewed By: Saqib Hussain