What tutorial do you want for the next article! Request Here!

How to Create Polaroid Photo Frames Widget with CSS on Blogger

Complete tutorial to add or create Polaroid Photo Frames Image Widget. Special guide for editing polaroid widget on blogger.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Polaroid Photo Frames Image widget

Images and photos are one of the things that must be displayed in a blog, this is commonly used to clarify the content of the articles we create.Currently there are many types of images that we can use to beautify images.We will share how to create photo frames such as polaroids using CSS. For more details, please see the picture below demo link.

Demo

To see firsthand how this widget looks, you can directly see it at the link below:

Live Demo

Add a Polaroid Photo Frame CSS

  1. On Blogger dashboard, click Theme
  2. Click the arrow down icon next to 'customize' button
  3. Click Edit HTML you will be directed to editing page
  4. Find </style> or ]]></b:skin> tag, for a faster search press shortcut key Ctrl + F
  5. Copy below CSS code and paste above </style> or ]]></b:skin>
/* Polaroid Photo Effect by thewebtrick.com */figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 100%; /* 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;
letter-spacing:0.09em;
margin-top:10px;}
  1. Click save

max-width: 400px is the maximum width in the image, if you want the width to follow the original image that you uploaded please change it to max-width: 100%.


How to Write HTML Code on a Post

There is easiest way to place a HTML code on the Blogger and paste all the HTML code below.

<div id="polaroid">
  <figure>
    <img src="URL_IMAGE_HERE" alt="Write an SEO Friendly Title" title="Write an SEO Friendly Title"/>
    <figcaption>Caption image</figcaption>
  </figure>
</div>

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

If you want to delete the image caption please delete the <figcaption >Caption </figcaption>.

You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.