How To Remove The Borders Around The Pictures In Bloggers Blog

You might have observed a thin border around the pictures you upload for your articles in bloggers blog. Some times these borders doesn't even bother us if we have a matching template with the picture, but if the uploaded picture doesn't match with the template it look a bit odd. 

Here is a very simple tips to remove these borders from the pictures in your Blog. You just need to do a little modification in the .post img section of the template.

Just go to your blogger's template and search for the similar codes as given below:

.post img {
padding:5px;

border:0px solid $bordercolor;

}

Or it could look something like this:

.post img {
margin: 6px;
padding: 6px;
background: $imagebgColor;

border: 1px solid $imageBorderColor;

}

Now just change the lines in blue color to "border:none;" as shown in the following example

.post img {
padding:4px;

border:none;

}

That's It. Simple Isn't it? If you have any problem leave us a comment and we will help you for sure.

Now borders are removed from the pictures in your blog. :)

How To Put Adsense Ad Unit Below Post Title In Blogger Template

You might have seen many blogs where the adsense unit is placed just below the Post title. The reason behind putting the add just below the post title is, it is the position with the highest CTR(click-through rate), which means an ad at this position can generate handsome income for you. According to google adsense guidelines, the best performing adsense position is above the primary content of the page.

Putting an adsense ad unit below post title in a blogger blog is just a three step process.

Step 1: Prepare/Get Your Adsense ad Unit Code

Create a new adsense unit by login into your adsense account or you can make use of the existing unit. For better results it is recommended to use wider ad size units such as Large Rectangle(338x280) and Medium Rectangle(300x250).After completion of the ad creation process you will get the HTML code for the ad. Now you need to convert this RAW HTML code to escaped code using Quick Escape tool and copy it. The ad won’t appear if you use the original unescaped ad code. 

Step 2: Add the  ad code to Your  template

Go to Dashboard > Design > Edit HTML and Check the  Expand Widget Templates check box on top right of the HTML window. Search the following line in your HTML code:

    <data:post.body/>

Paste the escaped ad code right above the line and it will appear on all the pages of your blog. But if you want your add to appear only on post pages then use the code below.

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

    Put your Ad  code here 

     </b:if>

    

Step3: Track Ad Performance

Dont forget to track the ad performance of the ad unit you added by following the above steps. Since no two blogs are similar, the ad unit size you have added to your blog may not work out so well for you. So if you don't see positive results, try out different ad types, formats or positions to put the ad unit in your blog.

How To Host All Your Images For Blogger Blogs With Unlimited Bandwidth Free!

Whenever You need to host your background images, buttons,badges or icons for your website or blog you usually host them on a free image hosting websites like Photobucket, Flickr, ImageShack, TinyPic etc. because blogger does not provide hosting for images other than the main background image, post images, header and picture gadgets.


But here is a simple technique using which you can host all your images on Blogger.com itself. Hosting an image on Blogger.com has two great significant benefits:

• Bandwidth: The image hosting websites usually impose bandwidth limit exceeding which will show some other image in your site instead of your own image. Blogger on the other hand, provides unlimited bandwidth.
• Speed: Hosting all images on Blogger will reduce the loading time for your page as Blogger is a part of Google -well known for its super fast servers.

How To Host All Your Images On Blogger

Step 1: Just navigate to the post editor to create a new post.


Step 2: add(upload) the image to this post as you do it regularly.
    
Step 3: Switch to Edit HTML mode. In HTML mode you can see the code for the uploaded image, quite similar like this:


    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvX7RyswiPCIjtJPpDaf70aCwMjUgU78xRAk8AHB-l7kTUlibOusINdguyphaT1n4wtvXC867MSNH6QEIkoshpOgz1GHaFeNDse1_NMWceoeKS9-hHdgaVHVnYoWJuZX_rKWj5-RG9p8/s1600/nisheeth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvX7RyswiPCIjtJPpDaf70aCwMjUgU78xRAk8AHB-l7kTUlibOusINdguyphaT1n4wtvXC867MSNH6QEIkoshpOgz1GHaFeNDse1_NMWceoeKS9-hHdgaVHVnYoWJuZX_rKWj5-RG9p8/s320/nisheeth.jpg" /></a></div>


Its clearly visible that the code has two URLs in it.


The first URL (in Blue) comes after “href”. This is the link to your original image.  It should come with "s1600" in the path, like this:
        
          http://3.bp.blogspot.com/………………………/s1600/nisheeth.jpg
        
The second URL (in Green) comes after “src”. This is the link of the image you see on your post.


We need only the first URL, the one with "s1600" as this URL is the direct link to the uploaded image.
    
Step 4: Now copy and paste this image URL wherever you need to display it in your pages. 


Thats it! Exit the post editor and no need  to save the post as the image is already stored in Blogger server.