After reading our tutorial Recent Blog Posts Widgetwith 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 <!--Read 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 dbrAutoSummary 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.
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 dbrAutoSummary 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 dbrAutoSummary Widget -->
var Thumbnail = true;
Thumbnail_Width = 150;
Thumbnail_Height = 100;
Summary_With_Thumbnail = 200;
Summary_Without_Thumbnail = 250;
var Summary_Noimage_Thumbnail = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhBtpJkBM37OYb1UWtnXRE2zropljuypHY56KhvEA_2nWfRGim4PKFuYOKkK8TKoMCYiZc-N_51imIPFmeVtw6RJugVvrkbPLv3cbrnFBqhns6F9hHofYwAz0PCfUGoHEemIlDgydgmY/s1600/dbrAutoSummary-Thumbnail.png";
</script>
<script src='https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/dbrAutoSummary-JavaScripts.js'/>
Customize Auto Summary
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_Widthfrom 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_Thumbnailwith any image url including your blog
logo.
Step-4: Find closing ]]></b:skin> tag and paste these CSS codes just before/above ]]></b:skin>
.dbrSummary {
text-align: justify;
}
.dbrSummary 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
}
.dbrSummary 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 blogger ---*/}
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>
<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 dbrAutoSummary 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='dbrSummary' expr:id='"dbrExcerpt-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
dbrAutoSummay("swtExcerpt-<data:post.id/>");
</script><!-- Tutorial at http://www.ranadil.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.
0 Comments