Auto Read More Without Requiring JavaScript

Certainly you know the script read more automated isn’t it? So far, we make use of automatic readmore is equipped with a java script. So, the java script of course make a little influence on the loading page of your blog. Well now, there is a new blogger tricks for your blog design, how to make post summaries with thumbnails without java script. This trick I learned from the results of my surfing on the internet. Amazing, because this trick uses only pure one hundred percent hmtl code with a little touch of css. I will tell you how to use it below.

The first step, please go to the edit hmtl tab on your blog. Remember, you have to expand the widget. After that, look for the code <data:post.body /> and replace with the following code :

<b:if cond='data:blog.pageType != "item"'>
<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/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

The next step, you need to add some CSS code, which is placed on top or before </b:skin> code. The following code :

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

Complete, and please see the results. Hope you enjoyed.

Blogger Maps, 13 March 2011