Thursday, October 16, 2014

How to remove Blogger Picture/Image Shadow and Border

Often time I found myself admiring other blogger's template especially those neat pastel and floral ones. Those neat pretty ones usually cost a ton of money. If you're not up to forking out cash from your wallet, here I share with you a site I've found helpful for the past years.

The site is call blogskin where you can choose any blog template of your choice and install it in your blog for free but it needs a lot of tweaking here and there which I rarely find myself fond of. For first time user, you might find it a tad bit difficult to use but believe me, you don't have to be a genius to figure out everything. But even I'm not very fond of using the templates probably because (1) I'm either too lazy to do so, (2) there's just too many tweaking to do. I always end up giving up half way because at times I found out that (1) your blog and that skin you love just doesn't go together, often time it's not picture friendly, alignments totally off and it doesn't load as great on certain platform eg chrome, mozilla, safari etc. (2) So much emojis, lovey dovey pictures, too many links and effects which sometimes annoys the cheese out of me. But that's just my preference though. You can check blogskin if you want. 

Anyways, what I did was, I take what I have and slowly build a layout I want. Not that fancy though but at least it's search engine friendly and I don't have to fork out money from my bank account. Especially the fact that I'm constantly changing them.

I have few compulsory things I have to put into my blog every time I change my layout. One being removing the shadows. Some people love the 3D effects shadows gives to photos, some doesn't. And I certainly don't like shadows.

So if you're like me and you hate that shadow around your photos, I made everything easy for you and arrange a simple guide on how you can remove them.

So, lets start. 
Again, this tutorial is to show how to remove shadows around the photos in your blog. 

1. Copy this code.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !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;

2. Go to template, hit customize,

 3. and then hit advanced. At the bottom you will see "add css". 

4. Paste the code inside the box and hit "apply to blog"

5. Hit "view blog" and tadaaa! No more shadows!
You're welcome!

I hope that helped you in anyway possible.
p.s I use blogspot as my blogging platform. So I can only guarantee that this only work 100% on blogger alone. 
If anything, please save your template before proceeding. I am not responsible if this tutorial might have ruined your current theme/template. if so, I'm sorry. 


1 comment:

Unknown said...

Thank you very much for writing such an interesting article on this topic. This has really made me think and I hope to read more. Wonderful article, thanks for putting this together! This is obviously one great post. Thanks for the valuable information and insights you have so provided here.Basically I'm a writer I would like to share my website here Dissertation writing service and sometimes I wait for your post to get more this type of blogs. A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a good one