A reader asked how to remove the border from the image uploaded via Blogger dashboard. At first I thought all one need to do is to edit the attribute border="1" to border="0" in the <img> tag, but that is already the default in all images uploaded via Blogger dashboard, and the image still have a thin border. The only difference will be a thicker border if you put a larger number in border="X". The answer is to add a CSS (Cascading Style Sheet) to the code. Add in the <img> tag the following: style="border:none;" and the border will be gone.
For example, in the post
Sibu Island, Johore, Malaysia, there is no border around the image. This effect was achieved by adding style="border:none;" (in red) in the <img> tag. The HTML for the image is in the scroll box below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger/1313/787/1600/396073/Sibu%20Island%20-%20Johore%20800x400px.jpg"><img style="border:none;" "display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger/1313/787/400/161663/Sibu%20Island%20-%20Johore%20800x400px.jpg" border="0" alt="Sibu Island, Johore 800x400px" /></a>
Hide image border by merging border with background
A commentator has also suggested editing the template so that the color of the image border merge with the main column background color so that the border becomes invisible.
0 comments:
Post a Comment