Tuesday, 2 September 2014

How To Remove The White Borders on Images In Your Blogger Blog

Hey there:) The little fellow went back to school today and I am back at the computer, pimping myself out on Peopleperhour.com and generally reacquainting myself with the internet after a few weeks of flu & summer holidays.

I still get daily comments on my 'How To Make A Perfect Circle Picture' blog post. Which surprises me really as Picmonkey now have an option to use a circle shape 'cut out' that does the job a treat. Still, I love getting comments and people reading my blog so I'm not complaining in the slightest.

One of the comments I get a lot is that readers have created their circle picture and added it to their blog, but Blogger seems to have added a white shadow border to the image. This is happening because the Blogger template that you are using has a piece of code written into it that overrides any other other options you may have selected. Luckily Blogger provides a handy little widget to insert new overriding code and that is what we are going to do.

1.

From your Blogger dashboard, select the dropdown box with the little document icon for the blog you want to work on. Its the middle one here:


Select the 'Template' option.



Select 'Customise'

2.

From the five options in white writing on the left-hand side of the screen, select 'Advanced' and when the selection box comes up to the right, scroll to the bottom of the options and select 'Add CSS'


Now, a large white box will appear. This is where you can enter any CSS or HTML code that you want to override all the other code in your blog. I'm going to copy the code from my personal blog template but I feel I should add a little disclaimer here in the spirit of honestly, I didn't write this code and I can't remember where I originally got it from - it's a generic code snippet available from many locations around the web.

Simply copy the code from the box below into the box in the template editor.



3.

Click the orange 'Apply To Blog' button, then go load up a new page and check out your pictures, KA-POW! That annoying border all gone.

I was just sitting here thinking; "you know what, I should put an image as an example..." then I realised this whole page is full of example images, so I'll save some pixels and sign off there :)

Hope this helps, please do leave a comment it's really appreciated.

5 comments:

  1. I was so happy when i saw this post...but still nothing.I did everything but once again when i tried uploading the photo the frame was still there.Also when i got back to the Add CSS box the code was not there.Does that mean it didn't save it or is it normal to disappear every time you open the customise thing?
    Maybe i'm doing something wrong with the photo.I'm trying to put it on the blog with the photo widget.Is there another way???
    Thanks in advance :)

    ReplyDelete
    Replies
    1. Hi Kiwi!

      There are two possible reasons. When you paste the code into the box on the template editor, be sure to press enter after the last bracket, so, create a new line basically. Then save and check your blog. This might fix it!

      Alternatively, this fix will only work if you are using one of the basic templates and not some fancy messed-about-with code.

      Has this worked? I'm anxious that I've missed some tiny step out x

      Delete
  2. I don't know why people aren't getting the shadow removed from the pictures...I just tried it and it worked! Thank you!

    ReplyDelete
  3. Also worked for me first time! Thank you Katy! :)

    ReplyDelete

Similiar Posts...