These days every blogger loves to make his blog look professional and one such hack to make it so is read more hack, where the post would just show little bit of description with a small thumbnail so I just collected a method to do this in a simple manner from way2blogging.org. So what are you waiting for just follow the tutorial given below.
Step 1 : Log in to blogger dashboard
Step 2 : Click on template and click edit HTML and click proceed
Step 3 : Check expand widget templates
Step 4 : Find </head>
Step 5 : Just add the below code above </head>
Frequently asked questions?
How to change the width and height of the image?
You can just change the numbers in the step 5 code default values are 100 and 120, you can change it to any number of your desire until you get the desired size. The code to be altered is shown below.
img_thumb_height = 100;
img_thumb_width = 120;
How to increase the post content height?
To do this you have to adjust the numbers in code 5 for the below code.
summary_noimg = 430;
summary_img = 340;
keep on changing your numbers until you get your desired size.
How to replace read more text with a read more image?
in the code given in step 6 just replace the Read more... text with the following code and add your image url into the quotes.
<img href='PUT YOUR IMAGE URL HERE' />
Step 2 : Click on template and click edit HTML and click proceed
Step 3 : Check expand widget templates
Step 4 : Find </head>
Step 5 : Just add the below code above </head>
<script type='text/javascript'>Step 6 : Now find <data:post.body/> and replace it with following code
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>
<b:if cond='data:blog.pageType == "item"'>Step 7 : Save the template and refresh your blog
<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>
Frequently asked questions?
How to change the width and height of the image?
You can just change the numbers in the step 5 code default values are 100 and 120, you can change it to any number of your desire until you get the desired size. The code to be altered is shown below.
img_thumb_height = 100;
img_thumb_width = 120;
How to increase the post content height?
To do this you have to adjust the numbers in code 5 for the below code.
summary_noimg = 430;
summary_img = 340;
keep on changing your numbers until you get your desired size.
How to replace read more text with a read more image?
in the code given in step 6 just replace the Read more... text with the following code and add your image url into the quotes.
<img href='PUT YOUR IMAGE URL HERE' />