Auto Read More link with thumbnail image and summary 2013 ( no javascript )

Auto Read More link with thumbnail image and summary 2013 ( no javascript )


there are many auto read more post summary scripts around the web based on javascript this method is   based on pure xml without any javascript used.

this method will change every post in your index pages to a snippet of small thumbnail , summary and a  read more link easily without pain just do the following steps:

1- Go to Blogger dashboard choose from sidebar

Template >   Edit Html   > tick  


click CTRL + F to open search box and find <data:post.body/> then replace it with the following code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
&lt;div style='clear:both;'/>
              <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                <img expr:src='data:post.thumbnailUrl'/>
              </span>
<b:else/>
              <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-wEcnUmKHGaG7FYI2q2UeWYPE1ax6CkFqeX9ezvglaeLfN2gb911Tfg13_L3r6kqUawMNs06jOxgtjMVpo5iF6USUDyLFMxoHlGJe6fM70I38cgwDbVx7XD99W2EDkTDif8IWrOaCwU/s72-c/nophoto.png'/>
              </span>
</b:if><div style=''><data:post.snippet/></div>
<div style='clear:both;'/>
</b:if>
</b:if>

You can change the width and the height of thumbnail by changing the values in red "auto" by any cusom values  e.g. 100px

Note that this method is simple and doesn`t need to much code yet you can`t customize the no of characters in summary since it`s limited to 143 letters


Auto Read More link with thumbnail image and summary 2013 ( no javascript )
4/ 5 stars - "Auto Read More link with thumbnail image and summary 2013 ( no javascript ) "