Add a beautiful Image slide show gadget to your blog

Hi guys, I have brought a nice gadget for you. You can add your favourite posts. This will make your blog more attractive. If you like this gadget, I can help you to add this to your blog. Lets start.

First go to Layout >> Edit HTML. Remember to Tick on Expand widget templates. Then press Ctrl+F. Then you will see a search bar.

Type </head> on the search box. Then you can see this code will be highlighted on your html box. Now paste this above the </head> code.

<!--SLIDE-SHOW-STARTS--><br /> <!-- JavaScripts--><br /> <script type="text/javascript" src="http://sites.google.com/site/saamgeadaviya/www.saamgeadaviya.blogspot.com-jquery.js"></script><br /> <script type="text/javascript" src="http://sites.google.com/site/saamgeadaviya/www.saamgeadaviya.blogspot.com-s3Slider.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('#slider').s3Slider({<br /> timeOut: 3000<br /> });<br /> });<br /> </script><br /> <!-- CSS --><br /> <style type="text/css" media="screen"><br /> #slider {<br /> width: 410px; /* important to be same as image width */<br /> height: 300px; /* important to be same as image height */<br /> position: relative; /* important */<br /> overflow: hidden; /* important */<br /> }<br /> #sliderContent {<br /> width: 410px; /* important to be same as image width or wider */<br /> position: absolute;<br /> top: 0;<br /> margin-left: 0;<br /> }<br /> .sliderImage {<br /> float: left;<br /> position: relative;<br /> display: none;<br /> }<br /> .sliderImage span {<br /> position: absolute;<br /> font: 10px/15px Arial, Helvetica, sans-serif;<br /> padding: 10px 13px;<br /> width: 384px;<br /> background-color: #000;<br /> filter: alpha(opacity=70);<br /> -moz-opacity: 0.7;<br /> -khtml-opacity: 0.7;<br /> opacity: 0.7;<br /> color: #fff;<br /> display: none;<br /> }<br /> .clear {<br /> clear: both;<br /> }<br /> .sliderImage span strong {<br /> font-size: 14px;<br /> }<br /> .top {<br /> top: 0;<br /> left: 0;<br /> }<br /> .bottom {<br /> bottom: 0;<br /> left: 0;<br /> }<br /> ul { list-style-type: none;}<br /> </style><br /> <!--SLIDE-SHOW-STOPS-4-HELP-http://saamgeadaviya.blogspot.com-->

Now save the template. Now go to  Layout >> Page Element >> Add a gadget >> "Html/java script"
and get a new java script. Copy and paste the code shown below to that java script.

<div id="slider"><ul id="sliderContent"><li class="sliderImage"><a href=""><img src="images/410/1.jpg" alt="1" /></a><span class="top"><strong>Title text 1</strong><br />Content text...</span></li><li class="sliderImage"><a href=""><img src="images/410/2.jpg" alt="2" /></a><span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li><li class="sliderImage"><img src="images/410/3.jpg" alt="3" /><span class="bottom"><strong>Title text 3</strong><br />Content text...</span></li><li class="sliderImage"><img src="images/410/4.jpg" alt="4" /><span class="bottom"><strong>Title text 4</strong><br />Content text...</span></li><li class="sliderImage"><img src="images/410/5.jpg" alt="5" /><span class="top"><strong>Title text 5</strong><br />Content text...</span></li><div class="clear sliderImage"></div></ul></div>

Now save the template. Then its finished.

IMPORTANT 


In the code add the link of the photo that you want to upload on the places Written with red.
Add the name of the post to the places written in green.
Add a little description to the place written in blue.

Posted in: bloggger gadgets,slide show gadget