A blog about Download free games, Download free software and movies. Learn everything about blogging. Watch live T.V. Send free SMS and much more

Wednesday 23 January 2013

How To Add Read More in blogger


As you can see in the picture the post image is showing with solid border and post some words is coming and coming read more and you can also see that in lots of blogs and in lots of  sites that there some words is coming and then coming read more and if you want to do same like this I mean that if you you want in your blogger or in your site that your post first image is come and post some words come and then come read more so just follow below steps to come read more after post some words...

how to add read more with thumbnail?

1, Goto your bloggwr dasboard >> log-in to your account >> goto template >>edit html >> proceed
2, Expand widget templates
3, find </head> tag by pressing ctrl±f
4, and paste the below code above the </head> tag

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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>

Note :-

        You may change the values below with your own :-
summary_noimg :number of text show when there is 0 image
summary_img :number of text show when  there is an image
img_thumb_height :height of post thumbnails
img_thumb_width :width of post thumbnails

5, Now find <data:post.body/>
6, Now replace the above code with the below code
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
7, Save template and Done!!!!!!!!!!!

Now you done now see your blog and its coming read more.

0 comments

.

Share This Content:

 
© 2011 Rocking Aseel Blog (Have Everything)
Designed by Rocking ASeel Cooperated with Usama Shahid
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top