Spice Up Your Blog-Read More Thumbnail Jump Breaks [Review and Tutorial]
Update: This widget stopped working, but a solution was posted on the original article. Apparently, the script used to run the widget was moved.
If you have installed this script previously replace the javascript line
with
http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js
Blogger offers the option to add a jump break to your posts, so posts are displayed as just short summaries on the home page, with a link to read the full post below. Jump breaks in posts have a number of great advantages including: speeding up your page load time, visitors see a selection of your posts without the need to scroll, and it gives a professional polish to your blog. Plus, since visitors have to click through to the full post, it can increase page views. However, having to manually insert jump breaks post- by-post, can be very time consuming, and since I maintain a large number of blogs, I went searching for a time-saving solution.
Spice Up Your Blog Auto ‘Read More’ Code Advantages
Paul Crowe of Spice Up Your Blog, offers a script that automatically turns your posts into 'read more' summaries on your blog's home page with a few added extras. Here are some of the features of Paul's auto 'Read More' as used in this blog.
- Your posts automatically display as short summaries with a 'Read more' link
- The first image from the post will be re-sized into a thumbnail and displayed beside the summary.
- You can choose how much text is displayed in the summary.
- You can choose the size of the thumbnail.
- All Previous posts will also have the jump break so you don't need to go through your archive adding it.
- Posts will also will also appear with jump breaks on your label pages and archive pages.
Spice Up Your Blog Auto ‘Read More’ Code Disadvantages
The coding used in Paul’s Blogged Tip seems to pull a truncated feed of your post and display it, since most formatting disappears in the post summaries. This is a liveable disadvantage, but still not quite what I would like to have, and will keep looking for a tweak.
How to Add Auto 'Read More' Post Summaries To Your Blog
Skill Level:Intermediate-Requires fiddling with HTML of your Blogger blog. If this tip is outside your comfort zone or patience level,please contact me for help implementing the code.
Here are the steps to implementing this code adapted from Spice up Your Blog:
Step 1. First,in your Blogger dashboard click Design > Edit Html > Tick The Expand Widget Templates Box
Step 2. Next,find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code )
</head>
Step 3. Copy the following code and paste it Directly Above / Before </head> Note –If you are using a mobile template, place the code before the first instance of </head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ;
summary_noimg = 430; summary_img = 340; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js' ></script>
Important Code Tweaks
The code in red sets how the post summaries are displayed. If a post has an image, it will be re-sized into a thumbnail to be displayed beside the summary.If the post does not have an image, just a text summary will be displayed.
summary_ noimg= 430; --> The length of the summary if the post does not have a thumbnail. summary_img = 340; --> The length of the summary if there is an image in the post that will be converted into a thumbnail. null_thumb_height = 120; --> The height in pixels of the thumbnail. null_thumb_width = 120; --> The width in pixels of the thumbnail.
Step 4. Now,find the following piece of code in your blog's Html : (Click CTRL and F for a search bar to help find the code)
<data:post.body/>
Step 5. Then,replace <data:post.body/> With The Code Below
<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/> <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 class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >
Read more ... </a></span> </b:if> </b:if>
Notes:
- You can change the text in red from Read More to "Continue Reading", "Read Full Post" or anything you like.
- The first image in each post is used as a thumbnail.Try to have the first image in your posts as close to square as possible, so they work well when used as thumbnails on your home page.Images that are rectangular, for example, will appear distorted when they are re-sized.
Step 6.Click Pre-view if the preview loads correctly, then proceed to step 7,if not,click ‘Remove all changes 'and try again.
Step 7. Finally Save Your Template.
Now all your posts including all archived posts will now be displayed with a summary and ‘read more’ on your home page, labels pages and archive pages.
See the original article at
http://www.spiceupyourblog.com/2011/03/blogger-read-more-thumbnail-jump-break.html
Please leave a comment and share where you used this code,so others can admire your handi-work!
Suzanne
