How to add 'read more' with thumbnail in blogger post

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>

<script type='text/javascript'>
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>

Step 6 :  Now find <data:post.body/> and replace it with following code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</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>

Step 7 : Save the template and refresh your blog 


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' /> 

How to change 'newer posts' and 'older posts' links to post title in Blogger

Many people who have blogs in blogger want to make their blog look professional but few of its default features make them little bit sad. One such feature is newer and older post links at the bottom of the page. Now I have just collected a tweak from Bloggersentral though there are many ways I felt this one as the easier one so I am sharing it here.

See the below image it is how it looks like when you have replaced it with the tutorial given below.

Step 1 : Log in to your blogger dashboard
Step 2 : Click on Template
Step 3 : Click Edit Html and then click Proceed
Step 4 : Find </head>
Step 5 : Paste the below code above </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Step 6 : Save the template and go to layout
Step 7 : Click add a gadget and select Html/Javascript and add the below code into it and save.

<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

Now if you have done everything correctly just refresh your blog and you can see that your older page and newer page links are being replaced by the titles of the next and previous post. 

How to remove border or shadow from images in blogger

People who upload images in blogger post always have a ash colour border or shadow around the images. Many don't like to have that border around images.

In the above picture you can observe image with border and an image without border. So in order to have an image without border you just need to tweak a little bit of CSS code. Below is how you do it.

1st Procedure 

Step 1: Log in to your blogger Dashboard.

Step 2: Click on Template

Step 3: Next click Edit Html and click Proceed

Step 4: Search for ]]></b:skin>

Step 5: Add the below code just above it.

img{ box-shadow: none !important;padding: 0px !important;border: 0px !important;}

Hope this solves your issue you can also go to template designer and add the above code in the Add Css link.