How to Remove Borders from Blogger Image?
Transparent Image with Border |
Look
at the two images above. Both of them are almost same. Except the
second one has borders outside. The first one is transparent and it has
no shadow or border. And the second one is transparent but there is a
boudary outside of it. Which one do you like?
If
you are a regular visitor of Marks PC Solution, then you should notice
our images has no borders. In fact no borders at present, previously out
images has borders. Most of the time I like to use transparent image
with PNG extension. And outside of each image, there was a border which
looks very odd. But adding a CSS code removes this problem.
Few days ago, one of my acquintances shared a code with me. He said this code removes the outside border of the uploaded images in blogger blog. I applied this code in Marks PC Solution. And magically there is no borders outside of my images. All images are now fully transparent!
By default,
blogger blogs automatically add borders and shadows outside of your
uploaded images. In case of non-transparent images (maybe PNG, JPEG,
GIF) it doesn't matter. But when you upload a transparent image with PNG
format the borders look really odd. It affects the transparency of the
image. Though blogger template designer allows you to change the shadows
and borders of the images. But you can't fully remove the borders.
Today I will show how can you fully get rid of your blogger images from borders.
Well, this
is not a tough job at all. All you need is just to add a CSS code in
your blogger template. Then you will be able to see this magic. Okay
let's start.
- Make sure you're signed in to your blogger account.
- Go to the Admin Panel/ Design/ Dashboard or whatever you call it.
- Click on the Template button from the left pane.
- Now hit on the Customize option.
- At the left side you get a list. Select Advance from here.
- Now another list will appear. Drop down and choose Add CSS from that list. You can also take help of the image below.
- Now a box named Add Custom CSS will appear at the right side.
- Copy and paste the CSS code below in the Add Custom CSS box.
- You're almost done! Now hit on the Apply to Blog button from the top right corner.
- Done! Visit your blog and see the magic!
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {padding: none !important;border: none !important;background: none !important;-moz-box-shadow: 0px 0px 0px transparent !important;-webkit-box-shadow: 0px 0px 0px transparent !important;box-shadow: 0px 0px 0px transparent !important;}
There are 10
steps to do this task. Doesn't this process look very long? Okay I'm
gonna shorten this! Just follow the simple way below:
Template > Customize > Advance > Add CSS > Add Custom CSS Box (Copy and Paste the above code here) > Apply to Blog.
Add Custom CSS Option in Blogger Blog |
No comments:
Post a Comment