Follow Me on Google News Follow Now!

How to Create Polaroid Photo Frames in Blogger Website

Hello Everyone, Today in this Article, I will share How To Make Polaroid Photo Frames in Blogger Website. Images and photos in a blog can hardly be separated. Images can be referred to as complements that describe in an article to be clear. For example, with a tutorial-themed blog, visitors will find it easier to follow the instructions by following the path in the image.

This tutorial will add a polaroid effect to a photo. The result will have a vintage and retro feel, and the script is also very light because it only consists of CSS and HTML , also supports AMP blogs .

If you want to know about How To How to Create Polaroid Photo Frames in Blogger Website then Follow my full article with carefully.

How to Create Polaroid Photo Frames in Blogger

Step 1 :- First of All You Need To Login With Your Blogger Account.
Step 2 :- Now Click on Theme Menu.
Step 3 :- After That Click on Edit HTML.
Step 4 :- Now Copy the Code Provided Below And Place it just Above the ]]></b:skin> or </style> tag.
/* Polaroid Photo Effect */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 400px; /* Maximum width of the image */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figcaption{
text-align:center;
font-family: cursive, Arial, Helvetica, sans-serif;
color:#454f40;
font-style:italic;
letp>ter-spacing:0.09em;
margin-top:10px;
}
Step 5 :- Now Don't Forget to Click on Save Button. not done yet. We will tell you below about how to use Polaroid Photo Frames in blog post.

How To Use Polaroid Photo Frames in Blogger Post

To add photo frames and polaroid images to blog posts, you must go through the HTML Tab (Not Compose) with a format like this:
<div id="polaroid">
  <figure>
    <img src="Url_Image" alt="Image_Title" title="Image_Title"/>
    <figcaption>Caption Image</figcaption>
  </figure>
</div>

Replace the marked code with your own image link and title.

Result is looks like below photo.

How to Create Polaroid Photo Frames and Images with CSS on Blog
Polaroid

Last Words

Well that's a great tutorial on How to Create Polaroid Photo Frames in Blogger Website. I hope you liked this post. If you face any problems and err then put your comment. Thanks a lot for Reading Our Posts.

Happy Blogging !

Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

1 comment

  1. Impressive