After reading our tutorial Recent Blog Posts Widget with Titles, Snippets and Thumbnails, one of our clients asked that whether it is possible to show only snippets with single thumbnail for each blog posts on home page of BlogSpot.com Blogs.
There is a feature in blogger post editor itself named Jump Break which lets post author to display a summary instead of whole post on index pages. Accordingly, you may create an intro of longer posts with a Read More text link. This can be done in simple three steps. Firstly, you have to decide where in the post you want to create the jump break. Secondly, place your cursor in that position and finally click the Insert Jump Break toolbar icon.
Alternatively, you may go to the HTML mode in your blog post editor and place <!--more--> anywhere you want to insert jump break for showing summary of that blog post.
However, the problem with this default feature is that you have to insert jump break in each and every posts for creating ‘After the jump’ summaries. Additionally, if you have more than thousand posts then you should have to edit all older posts for inserting jump break. This feature need manual action to decide where in the post you want the jump break so that the contents above the jump break will be visible on homepage, archive page and label pages.
But, now you need not worry about creating manual posts summaries for your blog as because we have come up with dynamic and professional looking swtAutoSummary widget which helps you to display posts titles, thumbnails and posts snippets on your blogger blog home page, archive page and label page.
The main feature of auto read more summary is that you have to decide only once that how many characters of your longer blog posts you want to display as posts excerpts and this will apply to all posts automatically. Further, if any post does not contain any image then you may display a default thumbnail for such post as per your preference. Additionally, if you want to show only posts titles and snippets and not the thumbnails then you may do so by setting thumbnail option to false.
Thus, in this tutorial we will learn to add auto read more summaries with posts titles, snippets and thumbnails to your blogger blog instead of inserting jump break in each and every blog posts manually.
How to Add Auto Read More Summaries with Thumbnail to Blogger
Follow these simple steps to add swtAutoSummary into your blogger blog and it will create summaries of all your old (past), new (recent) as well as scheduled (future) blog posts automatically.
Step-1:
Login to your BlogSpot.com blog and navigate the Template tab.
Step-2:
Click on Edit HTML text link button and place your mouse cursor anywhere in the template editor window.
Step-3:
Now, find closing </head> tag and paste these html codes just before/above the </head> tag.
<script type='text/javascript'>
<!-- Customize swtAutoSummary Widget -->
var Thumbnail = true;
Thumbnail_Width = 150;
Thumbnail_Height = 100;
Summary_With_Thumbnail = 200;
Summary_Without_Thumbnail = 250;
var Summary_Noimage_Thumbnail = "http://4.bp.blogspot.com/-bcu-pBY2WOc/VJjkTlYvLvI/AAAAAAAAFRA/ZEyoKibQNmM/s1600/swtAutoSummary-Thumbnail.png";
</script><!-- Tutorial at http://www.superwebtricks.com/?p=752 -->
<script src='https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtAutoSummary-JavaScripts.js'/>Customise swtAutoSummary widget with by changing these lines and values in accordance with your blog need and your preference:
A) If you want to display only titles and snippets and not the thumbnails then replace the value of var Thumbnail from true to false.
B) To change the width of thumbnail, just replace the value of Thumbnail_Width from 150 to any number.
C) Replace the value of Thumbnail_Height from 100 to any number for changing the height of auto summary thumbnail.
D) Just change the value of Summary_With_Thumbnail from 200 (the number of characters with spaces) to any number you wish to show as posts extracts having thumbnail.
E) Just change the value of Summary_Without_Thumbnail from 250 (the number of characters with spaces) to any number you wish to show as posts extracts without any image/thumbnail.
F) If you want to show your own image as default thumbnail for posts having no image then replace the URL of the image of var Summary_Noimage_Thumbnail with any image url including your blog logo.
Step-4:
Find closing ]]></b:skin> tag and paste these CSS codes just before/above ]]></b:skin>
.swtSummary {
text-align: justify;
}
.swtSummary img {
position: relative; float:left; margin: 5px 10px 5px 0;
opacity:0.7;
filter:alpha(opacity=70);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.swtSummary img:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
/*--- Tutorial at http://www.superwebtricks.com/?p=752 ---*/}
Step-5:
Find, <div class='jump-link'> and you will see the following bunch of codes.
<b:if cond='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>
Now, delete all these 5 lines codes from your blog template and then find closing <data:post.body/> tag. You will see this tag in 3 places of your default blogger template.
Step-6:
Replace the second <data:post.body/> tag in your blog template with the following html codes. However, if swtAutoSummary does not work then replace the third <data:post.body/> and it will work for you.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div class='swtSummary' expr:id='"swtExcerpt-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
swtAutoSummay("swtExcerpt-<data:post.id/>");
</script><!-- Tutorial at http://www.superwebtricks.com/?p=752 -->
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Step-7:
Finally, click on preview template button and if it looks good save your template and enjoy.