Auto read more means to show a summary of the blog post.It is usually shown in homepage.however we can show it in label ,archive page too.
Advantage of Auto Read more
- Create Summary itself.
- No need to insert code at individual post.
- Make a good designing of Blog.
To make a auto read more We will do like this.
Applying read more is very easy just we need at add some javascript code and modify some lines in blogger.
I.Adding a JavaScript code.
JavaScript is the main part of applying auto read more.Without it read more without summary will appear i.e only read more link will be shown wihout summary .So we need to add JavaScript code.
- Go to Blogger.com
- Click on Design or Template
- Click on Edit Html Code.
- Tick the Expand widget
- Add the following code just before </head> tag
<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 200; img_thumb_width = 200; </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(thumbnail_mode == "yes") { 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> <!-- Bloggersinker.blogspot.com --> <!-- Auto read more script End --> - Where.(Tweaking the code)
thumbnail_mode–(line line 3)I recommend you to set ‘yes’ if you want to show image with summary.Set it ‘no’ if you do not want to show thumbnail.summary_img–(In Line 5)You can change the character of the summary when there is image i.e setting the number of words when there is image .summary_noimg–(In line 4)Set a number of words when there is no image in your post.img_thumb_heightandimg_thumb_width–(In Line 7 )Total size of Image in pixel.You can change the width.- If you can tweak the code more do for it.
II.Applying Auto read more.
Adding only JavaScript has not overall affect in your post.To see the JavaScript in action you need to modify the code.After modifying the code you can see the action in your Blog.I have mention several option follow which you are searching for.
A.Applying in Index Page of blogger only.
Index includes the homepage,Label page and yearly archive page.Use this option if you want to show in index page only.Remember We are still in html editor and we have ticked in expand widget
- Find this line :
<data:post.body/> - Replace the line with the following code.
<!-- Auto read more Start --> <!-- http://bloggersinker.blogspot.com --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <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> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- http://bloggersinker.blogspot.com --> <!-- Auto read more End -->
- Where in line 12 you can edit Read more… with your own text.You can replace with the image also.For image replace line 12 with
<a class='more' expr:href='data:post.url'><div style='float:right'><img src='Your_Image_Url'></div></a>
- Replace Your_Image_URl with your own.
- The appear read more at left replace right to left.
- For Text:If you want to use special character like <> etc. then you should encode the html code or you need to escape the code.
B.Applying read more for archive or label page only.
Some times you may want to show your summary in label and archive page only.How may don’t want to show summary in home page.To do so what can we do.I have made it available by modifying code.just add this instead of Step II A no 2.
<!-- Auto read more Start --> <!-- http://bloggersinker.blogspot.com --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <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/>"); </b:if> </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- http://bloggersinker.blogspot.com --> <!-- Auto read more End -->
C.Applying Read more in all page except static and post page.
In Static and post no need to add summary.Only fool think so.But you may want to show read more no only in homepage,Archive or label page but in all the page same type.Then what to do .Use this instead of Step II A no 2.
<!-- Auto read more Start --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <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> <a class='more' expr:href='data:post.url'>Read more .....</a> </b:if> </b:if> <!-- Auto read more End -->
I hope you have got what you are searching for.Byeeeeee.Good Luck
Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.
No comments:
Post a Comment