How To: Remove the Blogger Picture Shadow

I don't know about you, but one of the first things that needed to go when I first started my blog, was the weird little shadow that formed behind every picture!

I mean, don't get me wrong- I LOVE BLOGGER and will forever hold them close to my heart. For the most part they are easy to use and just plain awesome! But that one little tick- that darn shadow...just BUGGED ME!

If you just cannot climb in the same boat as me- no problem! No harm and no foul. Totally get it. But if you are sitting at your desk, hanging by the edge of your seat, going, "YES YES YES!" then this blog is for you. How to remove that silly little shadow around all of your images.

So as you can see, our blog images (and some images elsewhere) did indeed have that little bugger. I mean, I guess it's not the stupidest thing...but it sure bugged me! You Sir, gots to go!

This trick is like, SUPER DUPER simple. I promise. But I do need to say- this trick is (of course) only for Blogger users AND those that are using the SIMPLE VIEW template. So, if you're using DYNAMIC VIEW, this won't work. Also, my step-by-step will be using the new blogger interface. By "new" I mean the one you probably already have- because it was available back in like...2011 or something. 

Ok! Moving on!

1. Make sure you are signed into your blog. You can tell if you are by looking at the top right corner. On your blog's homepage, click on DESIGN.

2. Next, you're going to click on TEMPLATE on the left hand side.

3. Once that has been clicked, find the CUSTOMIZE box and go ahead and click it.

Notice, here is a great way to tell if you're using the SIMPLE template or another one. As you can tell, we are indeed using it!

4. Since we're good to go, on the left hand side, find ADVANCED and click.

5. A little scroll box will show up directly to the right. Scroll down until you find ADD CSS and go ahead and click that.

6. Next, a white box will appear. In that box copy and paste this code EXACTLY:

.post-body img, .post-body .tr-caption-container, .ss, .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;

}

Easy right? Once your code is pasted, make sure to hit ENTER after the last character, "}".

7. Once the code is pasted and you've hit enter after the last character, go ahead and click APPLY TO BLOG. If you're nervous it didn't work- you will immediately notice the shadow has been removed on the preview that shows below what you're doing :)

Violà! You've now removed those pesky shadows from any and all images on your blog!

If you decide you hate it and want those shadow frames back, just follow the steps again- except delete all the text in that white box, then click APPLY TO BLOG. 

Hope that helps, guys!!!