You might have noticed that since few weeks I have been using a strange script which enables us to summarize content and show only the summary with a thumbnail in Home Page , Archives page and Labels page.
Since some of my readers requested this hack in gtalk , so I am going to explain How to add this hack to your blogger template.
Before going into this , I would like to mention the previous versions of this created by some of my fellow Bloggers.
But these versions had some disadvantages like :
1. It can’t automatically create summaries.
We need to add the following tag in all post pages while writing new posts
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 in the header
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.
There search for this tag : </head>
Now place the follwing code above that tag </head> :
<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='http://techieblogger.com/wp-content/uploads/2009/08/readmore.js' type='text/javascript'/>
then save your template.
Final step : ADD the code in post body
Now check ” Expand Widget Templates ” option in the edit html page. And then search for this tag
Now replace that whole tag with the code below :
<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'><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.
it will look like this :
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.
Hope I have explained everything in this script. if you need any other modification or help please feel free to add to gtalk. I love to help you guys.
About the author /
Mohamed RiasI'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.
Related Posts
-
October 29, 2012 -
-
June 8, 2012 Designing Blogger Template : Adding Meta Tags
-
June 7, 2012 Designing Blogger Template : SEO Optimized Title Tag
-
June 6, 2012 Grunge Mag Reloaded Blogger Template
-
February 12, 2010 25 Useful Tools for Registering and Monitoring Domain Name
Popular
Editor’s Pick
-
December 8, 2012 Notable Tips for shooting Awesome Wildlife photographs
You can remark it as wild-time game, which surely it is. Wild is the community for animals and not ours so it’s there to decide what they will do and what they want to. You can tell them to make some gesture that well-suit your need, or you can’t ask they to align up in…
-
June 7, 2012 Designing Blogger Template : SEO Optimized Title Tag
I have seen so many bloggers have been asking me for tutorials to design Blogger template. As you all know after i gave Techieblogger.com to my another friend, I have created this new blog for providing blogger and web design tips. I have decided to post the whole process required for designing a seo optimized…
-
September 5, 2009 Show only post titles in Home page
As you might have noticed in many magazine themes , showing only post titles in home page is getting popular these days. By showing only post titles in Home page you can decrease the page loading time and also it will easy for the reader to navigate. Showing post titles in home page will certainly…
-
April 24, 2023 React Performance Optimization: Strategies and Techniques for Efficient Data Fetching and Management
When developing modern web applications, efficient data fetching and management are crucial for providing a seamless user experience. As the amount of data in web applications grows, optimizing data fetching and management becomes increasingly important. Overview of the importance of data fetching and management in modern web applications Data fetching refers to retrieving data from…
-
December 16, 2009 30+ Most Downloaded Google Chrome Extensions
Google Chrome being the fastest browser in terms of performance still it’s not preferred by most. Especially Mozilla firefox users won’t ditch firefox so soon just because Google chrome is faster. Being a firefox user,one of the reasons I didn’t liked Chrome is because it doesn’t had plug-ins support before. But now after one year…