31 Dec 2011

Home » » Remove Drop Shadows from Images on Blogger

Remove Drop Shadows from Images on Blogger

10:59    5 comments

By default Blogger adds drop shadows to images. This can be very annoying especially if you have images in your sidebar that are part of the blog's design. It applies the shadows to all images so today I'm going to show you how to remove them. It is very easy thanks in part to the Blogger template designer's recent update.











before










after




So here goes!

Log in to Blogger and navigate to Template > Customise > Advanced > Add CSS

Then copy the following code and paste into the 'add CSS' box.


.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;}

Click on 'Apply to Blog'.

There you have it. The drop shadows have disappeared. Easy peasy isn't it?

Related Posts:

  • Add Image to Post Title in Blogger[caption id="attachment_322" align="aligncenter" width="558" caption="Before"][/caption][caption id="attachment_325" align="aligncenter" width="556" caption="After"][/caption]It has been a little while since I have done a Blo… Read More
  • Blogger Tutorial - How to Add Rounded Edges to Your Profile PhotoI recently received a request to do a Blogger Tutorial  on how to change the Blogger profile photo from straight edges to round edges. It is actually very very simple. It is basically a one step process. First of all let me s… Read More
  • How to Use Firebug to Design Your BlogIf you want to improve your design but not sure of the html and don't wanna mess with your code while trying things out the Firebug is for you. Firebug is a browser extension that is totally free and available for Chrome or F… Read More
  • Tutorial - Create a Letterpress Text Effect in PhotoshopToday I'm bringing you guys my first photoshop tutorial. I've long admired the letterpress effect I've seen cropping up more and more in blog design.First up you need to create your background. I find that a background colour… Read More
  • SEO Part 2 - Design, Link Structure & Keywords In Part 2 of my guide to SEO we're going to look at how your site's design can influence your search results & lots more.Search engines aren't manned by human beings so they don't view the content in the same way as… Read More

5 comments:

  1. Leanne2 January 2012 at 02:59

    Thanks for the tip! I've added it to mine and it looks a lot cleaner! Loving this blog! x

    ReplyDelete
  2. Katy Scarlett2 January 2012 at 11:30

    Just done this little tip. My blog will get better! One Faye tip at a time! haha xx

    ReplyDelete
  3. admin2 January 2012 at 12:01

    Awww thankyou :)

    ReplyDelete
  4. admin2 January 2012 at 12:04

    Lol! I plan to do lots more tutorials.

    ReplyDelete
  5. Chloe12 March 2012 at 08:21

    Hi, I just tried to follow this tutorial to remove the drop shadows. I copied and pasted the above code into the Add CSS box as instructed and applied to my blog, but the drop shadow is still appearing. Just wondering if there's anything else I needed to do?

    ReplyDelete