Thumbnail auto readmore no javascript for blogger

Thumbnail auto readmore no javascript for blogger | http://tipsandtricksfor.blogspot.com/2011/06/thumbnail-auto-readmore-no-javascript.html

The new version of Auto readmore, you can see it in my blog

Features :

- No javascript

- Fast loading

- Friendly for search engine

- Good for SEO

- Use for all brower , include IE6

Step 1:  Add this code Before ]]></b:skin> 


.post-thumbnail{float:left;margin-right:20px} // For left thumbnail

.post-thumbnail{float:right;margin-left:20px} // For right thumbnail
Step 2: Find and replace <data:post.body/> by one of these code

 1. Auto readmore with thumbnail

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

 1. Auto readmore with thumbnail and display default images for no images posts

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

GOOD LUCK

A specials thanks to Duy Pham

Loading Related Posts