How to Resize Images in a Blogspot Blog Post to Custom Dimensions

In this Blogger tutorial about resizing images you will learn how to increase or decrease the displayed size of images in your Blogspot posts by changing the height and width of the picture to your own user defined dimensions. Making changes to images in your blog posts is a very easy trick requiring no change to your Blogger template. This Blogger tutorial is suitable for any blogger level from beginner to advanced users. (Updated 17 March 2022)

Blogger Default Image Sizes

By default Blogger has five image settings: small, medium, large and extra large and original size. When you upload an image to a Blogger post the image by default is displayed at medium (320 px width) unless you change it to another size from the popup window that appears at upload. For instance if you choose large Blogger will automatically make the image bigger by scaling it to fit 400 pixels in width by 300 pixels in height and display it at the next size up.

Here are the different width sizes for uploaded images that Blogger offers:

• Small = 200px width
• Medium = 320px width
• Large = 400px width
• Extra Large = 640 width

By giving bloggers on Blogspot the choice of four preset images sizes or the original image size Blogger takes the headache out of bloggers knowing what size to set an image at. It also means that despite the varying original sizes of uploaded images Blogger is able to display them all uniformly.

Resize Blogger Images Prior to Upload and Then Change to Original Size

There are, however, times when you might want to change the image size to your own user defined specifications rather than sticking with the Blogger defaults. One way to override the preset image sizes in Blogger is to change the settings to display the image at the original size. This works well if you have resized the image prior to upload and you want the image to display at the width and height you have already preselected. To get help resizing an image prior to upload you could try a free online image resizing service like resizeimage.net.

Change Blogger Image Defaults to User Defined Dimensions

If you don't want to go for the hassle of resizing all your images before uploading and you only have a few images that you want to display at different sizes then the method described below is likely to work best. One thing to keep in mind though is that you want to make sure that when you put in your own dimensions that you do not distort the image. To get help to keep the same image proportions you could try a free online image resize calculator like red-route.org which will calculate the dimensions to enter.

Steps to Make Uploaded Images Larger/Smaller in Blogger

1. Log in to Blogger if not already logged in.

2. Go to Posts >> New Post or if you want to edit an image already posted go to Posts >> Edit Post

3. Upload your chosen image or if you are editing your post identify the image you want to change

4. Switch from the Compose View to Edit HTML View which will allow you to see the HTML code of your post

5. Find the code block for the image you wish to change. Look for the code that begins <img style> For example for the following image:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5346628427747662210" />

This code will display the image in a Blogger post at the large size - 400x300.

6. To change the 400x300 dimensions it is simply a matter of changing the values to whatever you wish. Make sure you keep the proportions of the image otherwise it will not display correctly (stretched and distorted). For example to increase the image size displayed by 25% you would change the dimensions to 500x375:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 375px;" src="https://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5346628427747662210" />

This code will display the image in a Blogger post to the custom dimensions of 500x375.


7. Click the Preview button and you will be able to check your image before publishing

8. Once you are satisfied click on the Publish post button

9. Click View Blog to see your image displayed with your user defined proportions

Summary

At sometime you may want to display an image in your Blogger post that is different from the Blogspot default image size presets of small, medium, large, extra large. It is possible to make an image smaller or larger than these presets by overridging the Blogspot default image sizes and entering your own custom dimensions. This tutorial has shown you how to change the height and width values of an image in order to make it bigger or smaller depending on need.

Related Articles

How to Add a Welcome Message to a Blogger  Homepage
How to Change the Color of the Blogger Nav Bar
How to Put a Twitter Follow Icon on Blogger Next to Post Title
How to Change Image Sizes in Blogger Posts
How to Schedule Blog Posts in Blogger in 2022
How to Add an Atom Sitemap to Google Search Console from a Blogger Blog in 2022

How to Get More Adsense Clicks on a Blogger Blogspot Blog

Today I am going to talk about how to get more Google Adsense clicks on your Blogger blog (Blogspot blog). These are simple and straightforward Blogger tips and Google Adsense tips that will increase your Adsense CTR and thereby help you make extra money from your blog. I will show you how you can make money from Google Adsense just by streamlining your Adsense ads and increasing your Adsense clicks.

If you are just starting out with your Blogger blog (Blogspot blog) you may be under the impression that all you need do is stick a bunch of Google Adsense ads on your blog and you will instantly make money from Google Adsense clicks. Unfortunately there is much more to making money from Adsense. First of all you need traffic and secondly for best results you will need to optimize your Google Adsense ad units on your Blogger blog (Blogspot blog). By optimizing your blog's ads you will increase the Adsense click through rate or Adsense CTR as it is called. And more Adsense clicks means you will earn extra money from Blogger.

Tips to Increase Your Google Adsense CTR on a Blogger Blogspot Blog

Rather than using the Blogger Google Adsense default widgets or Google Auto Ads to place Google Adsense on your blog I would recommend that you create you own Google Adsense ad unit at Google Adsense. That way you can track the success of each individual Google Adsense ad unit you place on your blog by using channels. This will help you pinpoint the Adsense ads that earn money and those that don't.

1. Use the wider Google Adsense ads such as 336x280, 300x250 or 250x250 as these are known to be the best performing ads and will consistency earn money

2. For the highest possible CTR select Google Adsense ad units that display both image and text in the one ad unit.

3. Adjust the Google Adsense ad units fonts to blend with your blog so that the ad unit is integrated rather than looking like an ad. Google Adsense allows the choice of 3 different fonts - Arial, Times Roman and Verdana, or you can go with the standard Adsense font family setting. If you are not sure what font family your blog is using you can check this in the top section of your Blogger template.

4. Match the colors of your Google Adsense ad unit to blend with the pages of your blog. The effect of matching your blogs color scheme will be that the ad units are integrated into your blog and this may encourage readers to click on the links contained in the ads.

If you are concerned about ad blindness you can choose contrasting colors to make your ad stand out. Readers are used to ads and may not even see them at all so presenting ad units in complimentary colors may help your click through rate. Some experimentation on your part will be needed to get the right look and the money earning results for your blog.

5. Rotate your Google Adsense ads regularly as this will reduce the effect of ad blindness or banner blindness as it is sometimes called and help you make cash

6. Know what your blog's keywords are and use them in your content. For instance make money, earn money, making money, making money online are examples of important keywords and phrases for this article. Check out keywords relevant to your Blogger blog by using one of many free keyword generators like Ahrefs or Ubersuggest. Also check out Google Trends for keywords that are currently trending.

7. Ensure your Blogger posts are keyword rich so that Adsense has a good basis of Google keywords to draw from. Use this free tool to check your keyword density ratio.

8. The more visible your ad unit the better. By placing your Google Adsense ad unit above the fold, that is the part of your blog that the visitor sees without having to scroll down, the more likely your ad unit will be to make an impact.

9. Placing a Google ads at the bottom of your Blogger posts is a good money making idea I have found. After reading your post your visitor will be wondering where to next so displaying a Google Adsense ad in this location will encourage Adsense clicks by them.

10. A Google Adsense linked ad unit such as a 728x15 can be an effective way to make money from Google Adsense when placed near a navigation menu especially when your ad unit is very closely related to your content.


Summary
In this Adsense tutorial I have explored 10 ways to increase the Adsense CTR (click through rate) of Google Adsense ads that you place on your Blogger blog. If you follow these Adsense tips you are likely to increase the number of Adsense clicks and in turn earn higher Adsense revenue from your Blogger blog (Blogspot blog). If you have time please let me know about your increases in Adsense revenue and Adsense clicks with these simple Adsense tips.


Related Links
Making Money From Banners with Blogger
Easy Way to Add Affiliate Banners to a Blogger Blog
Blogger Guide to Google Adsense Placement