iBlognet

Home Blogger Google

Automatic Read More For Bloggers With Thumbnail

by Editor

Automatic-Read-More-For-BloggersIf you are a blogger.com user, you might be well know with its editor interface to add a read more section in the middle of the post. The read more option gives the reader an ability to read an excerpt of the post on the homepage before reading the full article. You can add the read more section wherever you like. Recent changes to Blogger’s functionality now enables us to add a read more section automatically in every post. In this post I will show you how to add automatic read more section on every blog post with and without using Javascript.


With Javascript:

Step 1: Login to your blogger account. Goto Design > Edit HTML > Tick Expand Widget.

Step 2: Find the </head> tag [Use keyboard- Ctrl + F]

Step 3: Copy the following code and paste it after the </head>tag

    <!–Start Auto Read More–>
<script type=’text/javascript’>
var thumbnail_mode = “float” ;
    summary_noimg = 350;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>
<script src=’http://spiceupyourblogextras.googlecode.com/files/auto-jump-break.js’ type=’text/javascript’/>
<!–End Auto Read More–>

summary_noimg = 350; > The length of the summery if the post does not have a thumbnail.
summary_img = 250; > The length of the summery if there is an image in the post that will be converted into a thumbnail.
img_thumb_height = 120; > The height in pixels of the thumbnail.
img_thumb_width = 120; –> The width in pixels of the thumbnail.

Step 4: Find <data:post.body/>[Use keyboard- Ctrl + F] and replace with the following code:

<!–Read More–>
<b:if cond=’data:blog.pageType == “item”‘>
<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>
<div style=’clear: both;’/>
<span style=’padding-top:5px;;float:right;text-align:right;’><a Title=’Read Full Post’ expr:href=’data:post.url’><b>Reade More -></b></a></span>
</b:if>
<!–Read More–>

Step 5: Save and view your template.

Without Javascript

Step 1: Login to your blogger account. Goto Design > Edit HTML > Tick Expand Widget.

Step 2: Search for </b:skin>and paste the following code before </b:skin>

thumb img {
  float: left;
margin: 0 10px 10px 0;
}

float: left; > Will align the image to the left
float: right; > Will align the image to the right

Step 3: Search for <data:post.body/>and replace with the following code:

<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/>
<b:if cond=’data:post.hasJumpLink’>
<data:post.body/>
<b:else/>
<b:if cond=’data:post.snippet’>
<b:if cond=’data:post.thumbnailUrl’>
<div class=’Image thumb’>
<img expr:src=’data:post.thumbnailUrl’/>
</div>
</b:if>
<data:post.snippet/>
<div class=’jump-link’>
<a expr:href=’data:post.url + “#more”‘ expr:title=’data:post.title’><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Step 4: Save and view your template.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 Aintzane Zamora

how to center the thumbnail?

Comments on this entry are closed.

Previous post:

Next post: