How To Add Cool Jquery Image Slide Show to Blogger

How To Add Cool Jquery Image Slide Show to Blogger

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#MBT-slider').s3Slider({ 
      timeOut: 3000 
   }); 
}); 
</script>
<style>
#MBT-slider { 
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */ 
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
}
#MBT-sliderContent { 
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
.MBT-sliderImage { 
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
}
.MBT-sliderImage span { 
position: absolute; 
    font: 10px/15px sans-serif,Arial, Helvetica; 
    padding: 10px 10px; 
    background-color: #000; 
    color: #fff; 
    filter:'alpha(opacity=70)'; 
    -moz-opacity: .5; 
    -khtml-opacity: .5; 
    opacity: .5; 
    text-align:justify; 
}
.MBT-sliderImage span a {
text-decoration:underline; 
color:#FE6602; 
}
.clear { 
   clear: both; 
}
.top { 
    top: 0; 
    left: 0; 
    width: 570px !important; 
    height: 70px; 
} 
.bottom { 
    bottom: 0; 
    left: 0; 
    width: 570px !important; 
    height:90px; 
} 
.left { 
    left: 0; 
    top: 0; 
    width: 110px !important; 
    height: 335px; 
} 
.right { 
    right: 0; 
    bottom: 0; 
    width: 80px !important; 
    height: 319px; 
}
</style> 

<div id="MBT-slider"> 
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address" /> 
<span class="right"><h3>Title-of-pic-X</h3>Slide X Description [...] </span> 
</li>
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 2" /> 
<span class="left"><h3>Title-of-pic-X 2</h3>Slide X Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 3" /> 
<span class="top"><h3>Title-of-pic-X 3</h3>Slide X Description [...] </span>
</li> 
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 4" /> 
<span class="bottom"><h3>Title-of-pic-X 4</h3>Slide X Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 5" /> 
<span class="bottom"><h3>Title-of-pic-X 5</h3>Slide X Description [...] </span>
</li> 
<div class="clear MBT-sliderImage"></div> 
</ul> 
</div>
<br/>

Note: Replace Title-of-pic-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 3000
   });
}); 
</script> 
 
 
 
<style> 
 
 
#s3slider {
   width: 590px; /* Keep it 20px greater than Image size */
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
  
}
 
#s3sliderContent {
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
 
.s3sliderImage {
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
 
}
 
.s3sliderImage span {
position: absolute;
 font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
 filter:'alpha(opacity=70)';
 -moz-opacity: .5;
 -khtml-opacity: .5;
 opacity: .5;
       text-align:justify;
}
 
.s3sliderImage span a {
 
text-decoration:underline;
color:#FE6602;
}
 
.clear {
   clear: both;
} 
 
 
.top {
 top: 0;
 left: 0;
        width: 570px !important;
 height: 70px;
}
.bottom {
 bottom: 0;
        left: 0;
        width: 570px !important;
 height:90px;
}
.left {
    left: 0;
 top: 0;
 width: 110px !important;
 height: 335px;
}
.right {
 right: 0;
 bottom: 0;
 width: 80px !important;
 height: 319px;
        
}
 
 
 
 
 
</style> 
<center> 
 <div id="s3slider"> 
<ul id="s3sliderContent"> 
 
<li class="s3sliderImage"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1soU5dlKqwMEYEY4qa7M6Pb72c3oLCsfHEOr-Avn9d5r9WErmMSKEbeo1vu-Yq1-dsNs7_n37hFHQqQ1U0IoMOQ1XGhb8W4WT3sU5Oi5P4n1cts062BzHJAtF9w_MSWGABUKFULP0gq52/s800/TimonFinger.jpg" /> 
<span class="left"><h3>From Left</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
</li> 
 
<li class="s3sliderImage"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5weEsW1rhZVPaHxLtXY60_gxrWp7gjJQcQBQIJUXRgKEGhJ9oaLJlC_SQbxzKBb14z-OC11itNFnrGczfV0PJfFi6ySO115LgJsYIjzpGl8MYMfXlFKs_QVXlcav0dTEZFUUhEvfnExgo/s800/MtLionKing.jpg" /> 
<span class="right"><h3>From Right</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
</li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjx8Eh_0PjFi9lcfNC7MYpOxwD5aVHnCl89a1d7thyphenhyphenWCQf87NJYK-c1NfoW4MTIwRdTwZyDV4qnoD4M4m7DiQx4f_mTZPGP6n_Qw7u-hXnYo1BdCbBVG_fZmctRsJjPvXWd2YpSsEP9JP/s800/The-Lion-King-Montage.jpg" /> 
                            <span class="top"><h3>From Top</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
 
                        </li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrEQveVpnQKWlirsqUh9HewEwZzJn9XcDrymkpOnsE_ZRJYByELrtB941S6W7aqp-t-EHoRfVsC1qmBo57KbYr1ynN55ISC70dcgltzirNmhh1kL6EK29sqJEqaL_oIl87USlJSDtijDY/s800/Timon.jpg" /> 
                            <span class="bottom"><h3>From Bottom</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
                        </li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyMvy01nDAdGkpbZzTKYnylJBqkkzViDagdOocbxf888-LJXbkblbSbQauH0mazx2fOKbFL1qrWJVEluoqpY72ICE_mDssDNr_eXS5pWM3PcTPjPdkkwJSwYz5i6VWrJ8BUkqAvIAzc57/s800/up_m.jpg" /> 
                            <span class="bottom"><h3>Woohoo Kewl na? =p</h3>Create One like 1... 2... 3...! :D <a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
 
                        </li> 
                        <div class="clear s3sliderImage"></div> 
                    </ul> 
                </div>
<br/>

4.Now Save "Html java Script" your are done