Thursday, December 15, 2011

An automatic Continue Reading or Read More Tweak For Blogger With Thumbnail

Automatic Continue Reading or Read More trick For Blogger Along with Thumbnails that is extended blog post tip for blogger with thumbnail of snapshot utilized in blogger blog posts and all sorts of the work is conducted through the script instantly and automatically,you simply do not need to find your image the script will perform all job for you automatically.Just you need to create your blog post and submit it with one image in post relating to post.

If you do not desire to include thumbnail image in blog post outline however had an post previously on automatic Read More or Continue Reading hack for blogger,look at this.

Now how you can set up Automatic Continue Reading Hack For Blogger With Thumbnails Demonstration overview is following.

Starting featuring an installation:-

So now Sign in to  Visit Layout > Edit HTML inside your Blog dashboard and look the "expand widget templates" box.

Get the closing </head> tag inside your Blogger template, and insert below portion of code instantly just before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
<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){
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;


Note in above codes we can easily customize the numeric figures based on our desire

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

At this point locate this code <data:post.body/> inside your web template and change it by using down below codes.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
 Preview Your template if it is displaying thumbnail with continue reading hack Conserve it.

To demonstrate thumbnail it ought to have one image inside your blogger posts and please upload the .js file for your server and just remember to alter the url with yours in codes to create this hack work.

I hope you will like this Tutorial


Post a Comment

**Feel Free to comment** You are welcome

Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Press Release Distribution