Friday, December 10, 2010

Tutorial: Adding a poloroid effect to your post images

Do you love the look of Polaroid photos?
There is just something so cool about retro Polaroids, am I right or am I right?!

Well today I'm going to show you how to give your post images a similar look.


Step 1. Log in to your Blogger account. In the dashboard click "design"
Photobucket


Step 2. Then click "edit HTML"
Photobucket


Step 3. Hit CTRL-F and search for:

.post img

Photobucket




Step 4. Highlight the entire portion of the post image code:
.post img, table.tr-caption-container {padding:4px;border:1px solid #999999;}
and replace it with this new code:
.post img {padding:8px 8px 8px 8px;border:none;background:#ffffff;text-align:center;-moz-box-shadow: #999 3px 3px 7px; /*For Mozilla Firefox*
}
 
Now your code will look like this: 

Photobucket



Step 5. Save and view!

Photobucket
BEFORE AND AFTER




PLEASE NOTE! This code will give ALL the images in your posts a drop shadow and border. So if you have a signature I would recommend removing it.



If you want to get really spiffy you can alter the code settings:
Photobucket


Please leave a comment or email us at info@designerblogs.com if you have any questions or would like to suggest an idea for a future tutorial.

13 comments:

  1. I can find .post but as soon as i put .post img, it doesn't find a match... there's ".post-body img" this looks like the same thing...but i'm not sure! Help! I would love to do this with my blog!

    ReplyDelete
  2. @Krystal -- It looks like you are using the Simple template. This tutorial was written for the Minima template. From the looks of your CSS it looks like the shadow code is already in place. I would just alter the padding numbers and see what different looks you can get. Remember to save your template just in case!!

    ReplyDelete
  3. I am having the same issue as a earlier comment... I cannot find .post img... but I would still love to do this on my blog.
    http://livingwithporteous.blogspot.com

    ReplyDelete
  4. @Ann -- This tutorial was written for the Minima template and it looks like you are using the Blogger Ethereal template. So I looked and I think this is the code you are going to want to try:
    .post-body img {
    padding: 8px;
    }
    But be sure to preview before you save anything and remember always back up your template!

    ReplyDelete
  5. This is really cute and I would love to do this on my blog. When I tried doing it I didn't get the polaroid effect, all it did was make my black border disappear. Do y'all have any suggestions for what I might be doing wrong?

    ReplyDelete
  6. Hi Amy!
    Be sure that this is the code you are replacing:
    .post img {
    padding:2px;
    border:1px solid #382c1c
    }
    Feel free to email me if it still doesn't work. Maybe there is some code I added when I designed your blog that I may need to alter for it to work. Let me know if you get it or not!

    ReplyDelete
  7. Awesome I love neat tricks like this!

    ReplyDelete
  8. does this coding work for css in wordpress?

    ReplyDelete
  9. My blog currently does not have a border in its style, where then would one put this? I currently manually add the border to each of my pictures.

    ReplyDelete
  10. @Amanda - I'm not sure if it will or not. Worth a try though!

    @Lisa - I just checked your blog and it looks like you got it working. :)

    ReplyDelete
  11. Actually, No. LOL. I currently manually add the border to my pictures which takes so much longer.

    ReplyDelete
  12. @Lisa -- It looks like you are using one of the templates from the template designer. This code is meant to be used in the minima template. I've looked through your CSS and I'm not really sure where to add the polaroid code as I'm not super familiar with your templates HTML. I'm sorry!

    ReplyDelete