Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts Do you want to add Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts ? if yes then you are at right place. Tod...
2018-02-16T13:57:59Z

Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts

Do you want to add Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts ? if yes then you are at right place. Today we are here with a guide on Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts.

Auto Read More With Large or Big Thumbnail Without Javascript for Blogger Posts

Before we get started your first thing need to make sure that you have backup your blogger template.

Step 1: Login to your blog >> Go to Template Section >> Click "Edit HTML" Button

Step 2: Click on Template Box to Find <data:post.body/> and it may occurs 2 to 3 times, replace all if you find around 2 times <data:post.body/> or if you find around 3 times <data:post.body/> replace second and third one, by one of these below provided code

Code:1-Auto read more with thumbnail


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Code:2-Auto read more with thumbnail and display default images if there is no images in that posts


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='post-image' src='http://1.bp.blogspot.com/-VRvA5INJPgk/VoEWY-Bl0AI/AAAAAAAADs8/OsK-6eTnxXw/s1600/No-image-available.png'/>
</a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Step 3: Now its time to Customize thumbnail. Display image on left add this before ]]></b:skin>
.thumbnail {float: left; margin-right: 12px}
Display the image on right add this before ]]></b:skin>
.thumbnail {float: right; margin-left: 12px}

How to Increase Snippet/Word Count


Here the JavaScript play the role replace upper highlighted text with this
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Now find </head> and paste this script above this tag
<script type='text/javascript'>
snippet_count = 500;

//<![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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Replace snippet_count = 500; 500 to 300 or may 200 as per requirement
Share it:

Blogger

Blogging

Tutorial

Post A Comment:

0 comments: