Since I haven't been posting anything of much substance on this blog for a while, I thought I'd do another one of my popular Blogger tutorials. To follow up on my CSS tutorial on how to change the default size of all your photos in your blog posts, today I'm going to show you how you can override that for certain photos. Sometimes you may need an image to be smaller or larger. The image below is smaller than my default size seen in all my other posts. The border has also been removed.
How to override CSS for just some images?
Here I will show you how to override the default size of your images, and how to remove, add or change an image border. I'm giving this example as these are the codes I used for my post footer. If you look at the bottom of each of my posts, I have an image map with links to my shop and social media sites. The image is smaller than the default width of all my other images, and there is no border around it.
- Template > Advanced > CSS
- Paste in this code
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
- First, adjust the width in pixels. The code above gives you 400px (see image above).
- Next adjust the 'padding' and 'border' widths. I set mine to 0px as I wanted to get rid of the default border entirely.
- Click Apply to Blog and exit.
- Now open up the blog post with your image that you want to use the code for. On the top left of the post editor page select to view HTML.
- Locate your image code. It may look similar to this:
- Add the following code inside your image brackets: id="myimage1"
It should look something like this now:
<img src=http://myblog.blogspot.com/myimage.jpg id="myimage1">
- You're all set! Preview your image to make sure it works and click save!
*I used to work as a web designer & developer but I didn't enjoy it. Everyone is so fussy and picky and never happy with my work. I think sharing my knowledge this way is much more fun. CSS & HTML codes for changing & adjusting website layouts are universal so if you see these codes/tutorials elsewhere please remember neither of us copied each other. Please share this post with your friends. If you use any of these tips please leave a comment below with the URL of your blog, I'd love to see your lovely layouts! [More tips on customising your Blogger template]