Uploading And Removing Borders From Picture

It is quite common that we usually upload an image or a diagram or even an illustration of some sort into our post. I usually try to add a picture or two into my post just to add some color into it but there are times when these pictures have some rather weird looking borders surrounding them. In this post I will share with you the simple steps in uploading as well as removing borders from picture, in which you intend to embed onto your Blogger post page. For this example we will use the image uploading tool found in Blogger.

Firstly, once you have logged into your Blogger account, click on this icon and it will generally bring you into your Blogger's post editor page. Once here, you would want to begin the process of uploading a selected image from your PC or even from a particular web page - this is something you should try not to do (taking pictures from other web pages) besides the worry of copyright laws and the simple reasoning that if you post a picture which is taken off from another web page, what's going to happen is that every time you load your blog, that particular picture is going to be loaded by their server, so if their server is down or slow for any given reason, this will ultimately effect your blog as well, besides the owner of that site likely incuring an expense at the same time, thanks to you.

Anyway, assuming you have now decided to upload a particular picture, look for this icon and click on it.

This would immediately open up a new window to help you make the necessary selection of image or images.


Next you would want to decide on the placement of the picture, whether it should go on the left, right or even at the center of your post. Customizing the appearance is also another way of showing your creativity in your post. It will also help you wrap your text around these pictures. Another benefit is that you're able to choose the right size deemed fit for that post. Do this by checking on the relevant "Choose a Layout" box and then finally, click "Upload Image" followed by "Done".

Once you have succesfully uploaded the image, click on the Edit Html tab, to make the necessary modifications to remove the said borders from appearing in your post page.

Normally when you upload a image in Blogger it is displayed as a hyperlink. If you would like to disable the hyperlink, remove the section marked in red.

This is an example markup of the inserted image, appearing on your post editor page.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/deleted/AMD+690.GIF"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/deleted/AMD+690.GIF" alt="" id="BLOGGER_PHOTO_ID_5105259291560015234" border="0" /></a>

Note the closing </a> tag at the end of the example, remember to remove this.

Now, if you want to maintain the hyperlink and prefer not to have the borders surrounding the image, edit the img (tag) style attribute by inserting : border-style : none;

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/deleted/AMD+690.GIF"><img style="border-style: none; margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/deleted/AMD+690.GIF" alt="" id="BLOGGER_PHOTO_ID_5105259291560015234" border="0" /></a>

This would ultimately remove the border surrounding your image as well as remove the hyperlink pointer that would normally appear if you align the cursor on top of the picture.