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"
Step 2. Then click "edit HTML"
Step 3. Hit CTRL-F and search for:
.post img
Step 4. Highlight the entire portion of the post image code:
.post img, table.tr-caption-container {padding:4px;border:1px solid #999999;}.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:
Step 5. Save and view!
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:
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.
Love this tip!! Thanks for sharing!
ReplyDeleteI 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@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!!
ReplyDeleteI 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.
ReplyDeletehttp://livingwithporteous.blogspot.com
@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:
ReplyDelete.post-body img {
padding: 8px;
}
But be sure to preview before you save anything and remember always back up your template!
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?
ReplyDeleteHi Amy!
ReplyDeleteBe 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!
Awesome I love neat tricks like this!
ReplyDeletedoes this coding work for css in wordpress?
ReplyDeleteMy 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@Amanda - I'm not sure if it will or not. Worth a try though!
ReplyDelete@Lisa - I just checked your blog and it looks like you got it working. :)
Actually, No. LOL. I currently manually add the border to my pictures which takes so much longer.
ReplyDelete@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