Friday, April 12, 2013

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!!!

Pin It

89 comments:

  1. THANK YOU! I've been wanting to get rid of the picture shadow forever! :)

    LB

    ReplyDelete
  2. Ahhh! Thank you!!! I thought that little shadow was just something I was going to have to live with!!!!! And such an easy tutorial!!!! Thank you, again!

    ReplyDelete
  3. LOVED this tutorial - you are AWESOME!! :) Thanks for sharing - you are so good at this stuff!

    ReplyDelete
  4. Thanks for sharing this tip!

    ReplyDelete
  5. Thanks so much! I have been hating those pesky shadows and wasn't sure how much I wanted to mess with it to fix it.... but thanks to you it was so easy! whoop whoop

    ReplyDelete
  6. Thank you, I have been trying to do this for a long time, too

    ReplyDelete
  7. Thank you so much for this tutorial! I'm really anal about things like that stupid shadow! I feel like it really throws off the clean lines and ambiance I strive for on my blog design!

    thethreepeasinapodblog.blogspot.com

    ReplyDelete
  8. excellent tip, beautifully explained TY!

    ReplyDelete
  9. So glad you guys benefited! YAY!

    ReplyDelete
  10. Thank you so much, from Denmark!! :D
    Have looked at many Danish guides, but none have works - so thank you! :D

    www.daniellahorsmark.dk

    ReplyDelete
  11. Thank you! Thank you! I tried three other tutorials before this one, and this one did the trick!

    ReplyDelete
  12. thank you SO much! This really helped and my blog is now shadow free ^__^

    ReplyDelete
  13. THANK YOU!!!! (and yes i meant to use all caps) This has been on my last nerve all day. I can carry on now with more important matters.

    ReplyDelete
  14. I can't get it to work :( I made sure to do everything correctly, didn't touch the HTML, and hit enter after the last character! Any tips?

    ReplyDelete
  15. Thanks the help, and for explaining the steps so clearly! I got tired of the shadows and and glad to have them gone.

    ReplyDelete
  16. Didn't work. I've tried every code I can find on the web and nothing works :(. Could you help?

    ReplyDelete
  17. I'm pretty sure I love you a little bit right now. Seriously. I've been dreading changing codes and crap. This was SO EASY! <3

    ReplyDelete

  18. this was a piece of cake!!
    Thank you very much <3

    ReplyDelete
  19. This was such a wonderful help: thanks a bunch! Your tutorial was one of the most user-friendly ones I've used in a long time. :)

    ReplyDelete
  20. THANK YOU!! Glad I found this tutorial :)

    ReplyDelete
  21. Yoga Teacher Training Rishikesh-200 hour yoga teacher training programs & yoga instructor courses certified by Yoga Alliance (RYT 200) at registered yoga school (RYS 200)."

    ReplyDelete
  22. Extraction condensing steam turbine-essels is a leading manufacturer of safe, proven and reliable Extraction condensing Steam Turbines and Double extraction condensing steam turbines built with high quality precision engineering, possessing heavy duty characteristics.

    ReplyDelete
  23. Paper suppliers-Papico is one of the leading agents of paper manufacturing companies in UK and a trusted vendor for major paper mills Europe. Papico deals in various paper types like: coloured copier paper, A4 copier paper, envelop and graphic papers, recycle and poster papers.

    ReplyDelete
  24. Obviously, excellent. Thank you.

    ReplyDelete
  25. Thank you for sharing this! I finally found something that works!

    charlottechristmas.blogspot.co.uk

    Charlotte xo

    ReplyDelete
  26. I LOVE YOU! THANK YOU SO MUCHHHHHH!

    ReplyDelete
  27. waaaa thanks a lot! been looking for this!

    ReplyDelete
  28. Hi Christina,

    This was very helpful. Thank you! :)

    - Erin
    www.erinbettis.com

    ReplyDelete
  29. YOU ARE MY FAVORITE PERSON!! I have been searching for how to do this for SOOOO long and finally found your tutorial and the boxes are gone forever!!! You are my hero :)

    ReplyDelete
  30. Yay, it worked!! Thank you!! :) xoxo!!

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Delhi Agra Jaipur Tour - japji travel offers - delhi jaipur agra travel packages, delhi to agra jaipur tours, rental cars for jaipur agra tour, bus hire delhi agra jaipur tour, golden triangle tours packages, taj mahal tours india, delhi to agra one day tour, delhi jaipur rajasthan tours, rajasthan wildlife tour packages india.

    ReplyDelete
  33. Goa holiday packages from Delhi - Tour package in India leading travel agency offers goa tour packages, goa tour packages from delhi, goa holiday packages from delhi, cheap goa tour packages from delhi, cheap goa trip package from delhi.

    ReplyDelete
  34. Thank you! This is a great tip that I just implemented on my blog! sewingmamaraeanna.blogspot.com

    ReplyDelete
  35. Hey nice blog,Thank's for this helpful information come back again for more interesting information…Keep it up!
    Taxi in Agra

    ReplyDelete
  36. just a big huge t h a n k y o u ! I've been through dozens of blogs explaining how to remove that ugly frame but none was that clear. You have a new follower :-)

    ReplyDelete
  37. Hi Grat Your Blog,Thank's for this helpful information come back again for more interesting information!!!
    Event planners in Delhi

    ReplyDelete
  38. Tempo Traveller Hire For Shimla - Tour package in India leading travel agency offers shimla tour packages,Shimla Tour Packages India, shimla tour packages from delhi,shimla package trip from delhi.

    ReplyDelete
  39. Agra Jaipur Tour - japji Travel India Offers 4 Days Golden Triangle Delhi Agra Jaipur Tour Package, car hire from delhi to agra, luxury agra jaipur tour packages, budget hotels in jaipur, delhi agra jaipur tour package cost, agra jaipur tour by car, jaipur agra travel.

    ReplyDelete

  40. Find Best deals on Hotel Booking, Resorts, Holiday Packages, Honeymoon Packages, Cheap Hotels, Budget Hotel Booking at Jouneytrip.com"
    india tour package
    vacation packages in india

    ReplyDelete
  41. I read your Intersting and awesome blog. I really like this blog. If anyone wants to enjoy in Sikkim then come with us and get Tour package to Sikkim in very affordable price.

    ReplyDelete
  42. Thank you so much! It worked perfectly! I've been trying to figure out how to remove that forever. xo

    ReplyDelete
  43. OMG thank you so much! It has been bothering me forever! You are a lifesaver :)

    ReplyDelete
  44. You have really provided some valuable information and i really liked it.
    Thanks and please keep sharing it with us.
    Day Picnic Near Delhi

    ReplyDelete
  45. Thanks so much :) my blog is finally starting to look a bit more polished!

    ReplyDelete
  46. Thank you so much! A very helpful tip.

    ReplyDelete
  47. I read your interesting blog. If anyone wants to adventure honeymoon package in unbeatable price with best service.

    ReplyDelete
  48. you've been very helpful! thank you so much!

    ReplyDelete
  49. A MILLION TIMES THANK YOU FOR THIS! I've been googling this for.... nearly 2 years hahaha and nothing I've found has worked until your post. <3

    ReplyDelete
  50. Thanks, this helped me a whole lot.

    ReplyDelete
  51. Ugh! Thankyou! Just makes your blog look like its constantly in edit mode, thank you!
    Xxx

    ReplyDelete
  52. Thank you so much! Been trying for ages! Your instructions were so easy to use!

    ReplyDelete
  53. Worked! You are a star(fish)! :)

    ReplyDelete
  54. thank you so much! your code worked perfectly!
    http://fullycurious.blogspot.com/

    ReplyDelete
  55. Thanks for supplying the code. Appreciate you making it so easy for the rest of us! So relieved to find a fix for those shadows!

    ReplyDelete
  56. You information is so good i really liked it.
    Thanks and please keep sharing it with us.
    Day picnic near delhi corporate day outing
    one day picnic near delhi

    ReplyDelete
  57. Thank you for such a useful guide! Has made me feel so much better about my blog! :) x

    Amy Caitlin | cloudcaitlin24.blogspot.com

    ReplyDelete
  58. Thanks A MILLION for this. So clearly explained and easy to follow :-)

    ReplyDelete
  59. YES!
    Now my signatures look like signatures instead of shadow-boxed pictures!

    ReplyDelete
  60. Thanks A MILLION for this
    http://the10essentialsofforextrading.blogspot.com/

    ReplyDelete
  61. Your blog is quite interesting i found it very informatic Commercial Real Estate Reviewthanx for posting
    onlice clipping path

    ReplyDelete
  62. Thanks for posting this! I'm so happy that the shadow is now removed...yay!

    ReplyDelete
  63. Just want to than you for your tremendous effort.
    Your tutorial is so detailed.
    clipping path service

    ReplyDelete
  64. i was searching such detailed tutorial on shadow masking for many days and here you are..
    Thanks christina..
    clipping path

    ReplyDelete
  65. thank you so much but not working on all images...any suggestions?
    Xo
    Jen
    http://effortlesseverydaystyle.blogspot.com/

    ReplyDelete
  66. Just found this and you've made my day! Thanks. I found similar instructions elsewhere but couldn't follow them. You've typed it so simply that I figured out in seconds. :-D

    ReplyDelete
  67. THANK YOU!!!! so much... I've wanted rid of those horrid frames for as long as I've been blogging. This was so simple (it would need to be simple in my case o_O) - I'm always a bag of nerves when messing with HTML, and had never even heard of CSS until reading your post, but this was so straight forward. *Am smiling* :D

    ReplyDelete
  68. I’m really amazed with your posting skills as well as with the layout on your blog site. Is this a paid style or did you modify it yourself? Either way keep up the pleasant quality writing, it is rare to see a great site such as this one these days.I recently came to know about http://www.dadabhaitravel.ae/, their Holiday Packagaes are very effective and affordable.
    Holiday Packagaes

    ReplyDelete
  69. I have a graphic design related business. Picture shadow we are always create. The tutorial help our professional work. Thanks for sharing.

    clipping path service
    clipping path
    color correctoin service

    ReplyDelete
  70. Thanks for sharing such a great article and it's helpful for everyone. Great Post! Budget Hotels In Agra

    ReplyDelete