Automatic Read More And Thumbnel Widget For Blogger

Ritesh Warke On Monday, April 25, 2011

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

<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'/>

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:

<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>

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.

If you have any query or suggestions on Automatic Read More For Bloggers With Thumbnail please feel free to comment below

Follow @Digital_Eye