Add A Polaroid Effect To Blogger Images
Personally speaking, I love Polaroid photos as they look great. It reminds me of the photo albums containing all the wonderful childhood pics. Nowadays, I don't get to see many polaroid pics offline. However, I love it when I see these type of pics online in various blogs. So here is a simple post in which I will tell you how you can add the polaroid effect to your photos on your Blogger Blog. This method will also work on other blogging platforms as well. However I am only going to explain about adding it to Blogger/Blogspot. If you have a blog on another blogging platform, then just try to follow the instructions and add it to your blog.
Visit the blogger dashboard and visit the Design section of your blog. Now click on Edit HTML and select Expand Widget Templates option. You will have to add the following code in the CSS section of your blog.
That's it, now Publish the post and check your blog. You will see that your image will have the polaroid effect. Here is an example of what we will see in our blog.
If you want the image to appear like the top most image in the post with a short borders on all sides and long bottom border, then change the value of 5px marked in red colour in the CSS code to a higher value like 20px.
That's not it, as you can do many more things with the images. If you don't like the white colour of the polaroid frame, then you can change the colour as well. Just check the CSS code given above and change the hexadecimal value given in red colour. Here is what we will get after changing the hexadecimal value.
We can also tilt the image and give it a nice rollover effect. To achieve this you need to use the following CSS code.
If you check the above code, you will see values like +2deg and -1 deg. These values decide the amount of tilt that has to be applied to the images. If the value is +, then it will tilt to the right and if the value is -, then it will tilt to the left. This is how the image will appear on the blog.
I hope that you loved this post. It would be great if you can share this post with your friends.
Visit the blogger dashboard and visit the Design section of your blog. Now click on Edit HTML and select Expand Widget Templates option. You will have to add the following code in the CSS section of your blog.
.borders {-webkit-transition: -webkit-transform .15s linear;Now click on Edit Posts option and visit any of you post which has an image or you can even create a new post. Choose the Edit HTML option of the post editor. Find the image and add class="borders" in the code for the image. It will look like this
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
background:#dddddd;
padding: 5px 5px 5px 5px;
}
.borders:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.borders h2 {
color: #ffff33;
float:right;
}
<img src="image link" alt="image alt" class="borders" />
That's it, now Publish the post and check your blog. You will see that your image will have the polaroid effect. Here is an example of what we will see in our blog.
If you want the image to appear like the top most image in the post with a short borders on all sides and long bottom border, then change the value of 5px marked in red colour in the CSS code to a higher value like 20px.
That's not it, as you can do many more things with the images. If you don't like the white colour of the polaroid frame, then you can change the colour as well. Just check the CSS code given above and change the hexadecimal value given in red colour. Here is what we will get after changing the hexadecimal value.
We can also tilt the image and give it a nice rollover effect. To achieve this you need to use the following CSS code.
.borders {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.borders:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.borders h2 {
color: #ffff33;
float:right;
}
If you check the above code, you will see values like +2deg and -1 deg. These values decide the amount of tilt that has to be applied to the images. If the value is +, then it will tilt to the right and if the value is -, then it will tilt to the left. This is how the image will appear on the blog.
I hope that you loved this post. It would be great if you can share this post with your friends.
