You Are Here: Home» Widget Tips » How To Install Auto Read More In Blog

Auto Read More.Fungsion Auto is able to display the first image in the post and to fload image is in the beginning of the paragraph beginning, even though the picture we put in the middle or end of the posting. Maybe more comfortable I call it with a thumbnail image facility.

Not only that, we can also control the number of characters displayed. Here there are two options for the number of characters. The first, the number of characters displayed if there are images included in posts and secondly the number of characters without an image. Still confused mean? same .. , let same not dizzy just straight into the tutorial ok.

Important! Already installed Read More old version in the code should be used to return to normal, the way remove the red code below (Each template may be different, so stay adjusted only)
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='data:post.url'>Readmore</a>
<div style='clear: both;'/>

OK, if you've lived proceed with the tutorial below.

First, please go directly to the page Edit HTML, find the code </ head> then put this script on the code </ head> If so, do not forget at the store first.

Directly copy paste the code below:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

<script type='text/javascript'>
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit to get more cool hacks
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;

Still on the EDIT HTML pages, Check the "Expand widget templates" and then find the code like below:
If So,Replace the code with all the code bellow
<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:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Please be saved and see the results:)

var thumbnail_mode = "float", (we can decide whether the location of the thumbnail in the (float) left, or if not, please replace the (no-float)
summary_noimg = 250; (Define how many characters will be displayed in the post without a picture / thumbnail)
summary_img = 250; (Define how many characters will be displayed in the post with the picture / thumbnail)
img_thumb_height = 120; (Thumbnail 'height in pixels)
img_thumb_width = 120; (Thumbnail 'width in pixels) 

Good Luck..
Tags: Widget Tips