Shutter Image Effect To Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Shutter Image effect is another wonderful blogger image effect to blogger. This is a featured slideshow with shutter effect. This is effect was made by using jQuery and Canvas. I have provided a demo for you, if you like you can add shutter image effect to blogger

View A Demo

• Go to Blogger Dashboard → Design → Page Elements
• Click on Add a Gadget then select HTML/JavaScript Widget
• Copy the code shown below and paste it inside the widget

<div id="cont">
<li><img height="400"  src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg"  width="640" /></li>
 <li><img height="400"  src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg"  width="640" /></li>
 <li><img height="400"  src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg"  width="640" /></li>
 <li><img height="400"  src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg"  width="640" /></li> </ul>
</div>
<style>
 #cont{ width:640px; height:400px; margin:0 auto; border:5px solid #fff;  overflow:hidden; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px  rgba(0, 0, 0, 0.3); }
#cont ul{ list-style:none; padding:0; margin:0; }
 #page{ width:650px; height:400px; }
#cont img{ padding:0; } .shutterAnimationHolder .film canvas{ display:  block;     margin: 0 auto; } .shutterAnimationHolder .film{  position:absolute; left:50%; top:0; } .shutterAnimationHolder{  position:absolute; overflow:hidden; top:0; left:0; z-index:1000; }
</style>
<script src='http://rafiblog.googlecode.com/files/shutter1.js'> </script>
<script src='https://rafiblog.googlecode.com/svn/shutter20.js'> </script>

Save the widget and done

You are warmly welcomed to share our articles if you like. Thank you for enjoying the article

Tweet

Shutter Image effect is another wonderful blogger image effect to blogger. This is a featured slideshow with shutter effect. This is effect was made by using jQuery and Canvas. I have provided a demo for you, if you like you can add shutter image effect to blogger View A Demo Go to Blogger Dashboard → Design → Page Elements Click on Add a Gadget then select HTML/JavaScript Widget Copy the code shown below and paste it inside the widget <div id="cont"> <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>  <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>  <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li>  <li><img height="400" src="http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/img/photos/1.jpg" width="640" /></li> </ul> </div> <style>  #cont{ width:640px; height:400px; margin:0 auto; border:5px solid #fff; overflow:hidden; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } #cont ul{ list-style:none; padding:0; margin:0; }  #page{ width:650px; height:400px; } #cont img{ padding:0; } .shutterAnimationHolder .film canvas{ display: block;     margin: 0 auto; } .shutterAnimationHolder .film{ position:absolute; left:50%; top:0; } .shutterAnimationHolder{ position:absolute; overflow:hidden; top:0; left:0; z-index:1000; } </style> <script src='http://rafiblog.googlecode.com/files/shutter1.js'> </script> <script src='https://rafiblog.googlecode.com/svn/shutter20.js'> </script> Save the widget and done You are warmly welcomed to share our articles if you like. Thank you for enjoying the article