Nov 5, 2015

How To Create Polaroid Effect On Images on Blogger

Today we are coming with more advanced features. Photos are often much more interesting when they are displayed like a Polaroid photo so we will give Polaroid effect to your images and create a stunning image gallery. This is built in html and CSS. We have done that every thing which makes your gallery look awesome. This Polaroid effect can be given to any set of images.

Create Polaroid Effect On Images In Blogger

You can see in the demo how beautiful your image set can look. It is a much better way than randomly uploading images which looks ugly and does not give a professional look to your blog. I have given you the complete working code. You just have to copy the code and paste it where you want this galley to appear which will create a Polaroid effect on your images.


We have added a ribbon on the images which makes this image gallery more attractive and beautiful. So it is a perfect example of the beautiful image gallery. This image gallery is built in HTML and CSS and we have not used any javascript. Excessive use of javascript makes your blog to load slower and increases bounce rate because people do not like the slow loading blog and websites. So to make its loading time faster we used only HTML and CSS. This image gallery is completely customizable. You can edit the caption and can change the effects as well if you know a little about CSS.

You can use this in two ways.

Inside the post to give your images a new look.
  • Use it as a gadget in the sidebar.
  • How to add this Polaroid effect?
  1. First, go to blogger.
  2. Logging into your blogger account.
  3. Copy the HTML code and paste it inside the post. (Go to html mode then compose mode).
     <div id="imagoroid"><imagemania><img src="IMAGE URL" width="200" height="200" alt="Red mushroom" /><imagecaption>IMAGE CAPTION</imagecaption></imagemania><imagemania><img src="IMAGE URL" width="200" height="200" alt="Rainbow near Keswick" /><imagecaption>IMAGE CAPTION</imagemania><imagemania><img src="IMAGE URL" width="200" height="200" alt="An old tree" /><imagecaption>IMAGE CAPTION</imagecaption></imagemania></div><!--end imagoroid-->

     4. Then copy the CSS code.
     5. And go to the template and click on edit template.
     6. Hit CTRL+F
     7. And search for ]]>:skin>

     imagemania, imagecaption {display: block;}#imagoroid{width:100%;overflow:hidden;padding:20px 10px;}#imagoroid imagemania{float:left;position:relative;width:200px;margin:10px 20px;padding: 6px 8px 10px 8px;-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: #eee6d8;background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);-webkit-transform:rotate(-1deg);-moz-transform: rotate(-1deg);-o-transform: rotate(-1deg);-ms-transform: rotate(-1deg);transform: rotate(-1deg);-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/}#poaroid imagemania:nth-child(even) {-webkit-transform:rotate(2deg);-moz-transform: rotate(2deg);-o-transform: rotate(2deg);-ms-transform: rotate(2deg);transform: rotate(2deg);-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/-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);}#imagoroid imagemania:before {content: '';display: block;position: absolute;left:5px;top: -15px;width: 75px;height: 25px;background-color: rgba(222,220,198,0.7);-webkit-transform: rotate(-12deg);-moz-transform: rotate(-12deg);-o-transform: rotate(-12deg);-ms-transform: rotate(-12deg);}#imagoroid imagemania:nth-child(even):before {left:150px;top: -15px;width: 55px;height: 25px;-webkit-transform: rotate(12deg);-moz-transform: rotate(12deg);-o-transform: rotate(12deg);-ms-transform: rotate(12deg);}#imagoroid imagecaption{text-align:center;font-family: 'Reenie Beanie', cursive; /*Reenie Beanie is available through Google Webfonts*/font-size:1.3em;color:#454f40;letter-spacing:0.09em;}/**IE Hacks - see for more info on how to use CS3Pie and to download the latest version**/#imagoroid imagemania{-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);behavior: url(assets/pie/;position:relative; /*required to make PIE work*/padding-top:10px\9;padding-right:10px\9;}

    8. And paste the CSS code below this code.
    9. You are done.


Here are option to customize this blogger widget and give your images a polaroid effect. 
  1. Look at the HTML code and change the IMAGE URL with the url of your images.
  2. Change IMAGE CAPTION with your captions.
  3. You can more images in this image gallery by repeating HTML code.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.


    So above guide is about How To Create Polaroid Effect On Images With Ribbon Frame and i hope by this guide you can easily add this trick to your blogger template. If anyhow problem persist after following all steps then drop a comment below.We will help you out of sure. Happy Blogging.

    No comments:

    Post a Comment

    We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.