How to Get Rid of Boxes Around Images on Blogger

Blogger is a free blogging platform offered by Google. Using Blogger, you can include images in your blog posts. When you upload a picture to your Blogger post using the Blogger dashboard, you may notice a thin gray box around the image when you publish the post. This can be frustrating and unsightly. Fortunately, you can add a small snippet of CSS code to the IMG tag, using the HTML editor on your Blogger dashboard to remove the box around each image.

Instructions

1. Open your Web browser; visit Blogger.com. Input your Google account username and password into the available fields and click "Sign In."

2. Click on "Edit Posts" to view and edit previous posts, then click "Edit" next to the specific post that contains the image you want to edit.

3. Click the "Edit HTML" tab to view and edit the HTML coding of the blog post.

4. Locate the "<img" tag within the HTML coding. An easy way to do this is to press the "Ctrl" and "F" button on your keyboard to use the "Find" function in your browser. Input "<img" and click "Next;" the browser will automatically locate the "<img" tag in your blog post.

5. Add the following code within the "<img" tag without removing any code currently in the tag:

   style="border:none;"

   For example the image tag should resemble this:

   <img style="border:none;"

6. Add the code after the "<img" tags for each image in the post that you want to remove gray box from.

7. Click "Publish Post" at the bottom then "View Post" to see the changes made to your blog.

References

• Blogger Tips and Tricks: How to Get Rid of the Border in Images Uploaded via Blogger Dashboard; Dec, 17, 2006