Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Read More hack for Blogger with automatic Thumbnail creator script

You have seen many a times the Read More Widget made by Hackosphere was very popular but was not able complete most of needs.

1. Major Problem
we have to add this code always.


Type your summary here
<span id=”fullpost”>
Type rest of the post here
</span>

2. This feature can be available only for future posts.

That is if you already have 50 posts in your blog and then after that you are adding this hack to your template then you need to add the above tag in each and every previous 50 posts to make this hack working. But it’s a tedious process.

3. Can’t create Thumbnails automatically

This hack can’t create automatic thumbnails for posts.

Now a new version has been developed by my blogger friends. I would like to share that new version of read more hack with you all.

Read More hack with automatic Thumbnail creator script

This hack has overcome all the drawbacks of the previous version of read more hack. This hack is developed by Blogsphera . ( Translated version ).

Let’s see the installation instructions :

Adding the Javascript

To add the javascript files to the header , first login to your blogger account. Then navigate to Layout section of your blog and then move to EDIT HTML sub tab and check ” Expand Widget Templates ” option in the edit html page.

There search for this tag : </head>

Now place the following code above that tag </head> :

<SCRIPT type=’text/javascript’> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src=’http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js’ type=’text/javascript’/>

Then Add This Code
search for this tag  <p><data:post.body/></p> or <data:post.body/>
Now replace that whole tag with the code below :

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<p><data:post.body/></p>
<b:else/><DIV expr:id=’&quot;summary&quot; + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style=’clear: both;’/> <div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’><img src=’http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png‘/></a></span></div>
</b:if>

You can now preview your template and then save it.

Customizing The code 

Now let us see how to customize the code to suit your style :

  • var thumbnail_mode = “no-float”;
  • By default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option ” float ” instead of “no-float”.

  • summary_noimg = 500 ;
  • This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.

  • summary_img = 400 ;
  • If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

  • img_thumb_height = 130;
  • This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.

  • img_thumb_width = 281 ;
  • This tag decides the width of the Thumbnail image to be shown

Adding read more image 

The author of this hack haven’t included any read more buttons in this hack. But I have modified the code and have included a image to link to the full post.


http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png

If you want to change the image then replace the url of the image with your own image

or if you don’t need any read more button , then replace the code in final step to this one :

 <b:if cond=’data:blog.pageType == “item”‘>
<p><data:post.body/></p>
<b:else/><DIV expr:id='”summary” + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</SCRIPT> <div style=’clear: both;’/><div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’>Read More…</a></span></div>
</b:if>

 change the tag in red to suit your style.


source :http://www.techieblogger.com/

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

May 17, 2009 Ritesh Sanap Blogger Tutorials, Internet, Solutions Blogger Hacks, Cool things, Hacks

Post navigation

Previous Previous post: How to send content summary only for my feedburner subscribers via email?
Next Next post: Lenomag – Premium Blogger Template

Currently Trending

  • Windows Vista CD key
  • How to download Specific parts of YouTube videos
  • How to Increase Dropbox upload speed
  • ZooZooo - Vodafone Logos
  • Highlight Author Comment in Blogspot
  • How To Change Windows XP Shutdown Dialog Box
  • Add Three New Widgets At The Bottom or Header Of Blogger/Blogspot Blog
  • How to Change the Welcome/Login Screen in Windows XP ?
  • HORIZONTAL AND VERTICAL SPACING
  • How to show hidden files and folders in Mac OS X

Random Posts

Create Cool Images With a Wet Floor Effect Maker

August 15, 2008 By Ritesh Sanap Leave a Comment

Certain Websites are Slow in Vista

October 25, 2010 By Ritesh Sanap Leave a Comment

How to create a blogger blog

August 9, 2009 By Ritesh Sanap Leave a Comment

How to change the dashboard footer text

March 15, 2011 By Ritesh Sanap Leave a Comment

Shortcut keys to Complete URL

July 27, 2008 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2021 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.