Adding Slideshow widget to BLogger Blog

This Article will help you to add a customized  Slideshow widget in your Blog. The following are the easy and Simple steps to add this Slideshow widget  for  your blog

Step 1:   Login in to Blogger Dashboard
Step 2:    Then Click “Add Gadget”

Step 3: After that select Gadget “Add Gadget” again and select “HTML/Javascript”

Step 4:  copy This Below HTML to Add gadget

<style type="text/css"> /* JavaScript Image Slider By Insecurespot*/ #mcis { display: none; } #sliderFrame { position: relative; width: 670px; margin: 0 auto; border:5px solid #184583; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPVPxAPR6-RkCPdKIa8DEPgLl3Ajq__L6mOuCtsUjjp4MCR94t1nonwEu-qb3Lwm4JQxZ2HtmTNmrmw3TmLpkL8dssW6_ctY9nod3nwVUYWuerWWLj0ryrUvlZ-amedVzaGjb7WVXjKOi/s109-no/insecurespot.in.png) no-repeat; z-index: 7; } #slider { width: 670px; height: 250px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqpf6F4bbHzM8t_ZdP-QVRXjQjtjAShwNyGHKfAN0QLC5AWZ65SYrNuduXzj8O9CiGGb3ICphCUIbZ2df431e_Yyf_8l5ZEiEtF7vz4uII1PZOrMrCZpDBQqm_UdqXEP1KkGH52hKWBpA/w39-h15-no/insecurespot+Loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: relavive; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: normal 20px/20px Arial; color: #ffffff; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIrc_8XLecQgQNAC6UBGBVV-RTYAgQqoeR2YwT2cSZzk9nULdb3GRA5_mDYdDCDqK-qyQxTEl93sDi2a-yCsuMWPk-VlegR8R4SKLtl89IP10qsbVWNFkbiXAbddtKikN5xfHEkTbE9rU/w11-h22-no/insecurespot+Bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; _position: relative; padding-right: 3px; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src=" http://goo.gl/Ig4C9m " type="text/javascript"></script> <br /> <div id="sliderFrame"> <div id="ribbon"> </div> <div id="slider"> <a href="POST 1 Link"><img alt="POST 1 Title" src="Image 1 Link"/></a> <a href="POST 2 Link"><img alt="POST 2 Title" src="Image 2 Link" /></a> <a href="POST 3 Link"><img alt="POST 3 Title" src="Image 3 Link" /></a> <a href="POST 4 Link"><img alt="POST 4 Title" src="Image 4 Link"/></a> <a href="POST 5 Link"><img alt="POST 5 Title" src="Image 5 Link"/></a> </div> </div>

Step 5: Now replace POST  Title   with  your post and  Image Link  with Images That you want to display on slides

Thats it!! You are done.:)))