August 13, 2011

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="http://4.bp.blogspot.com/_7wsQzULWIwo/TQ41gAfHTxI/AAAAAAAADLg/0iRTj9eArQ0/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="http://3.bp.blogspot.com/_7wsQzULWIwo/TQ41fIeGCuI/AAAAAAAADLI/Vvz6wZV0TCk/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="http://4.bp.blogspot.com/_7wsQzULWIwo/TQ41ffGC7RI/AAAAAAAADLQ/j_rlXMhvvRo/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="http://3.bp.blogspot.com/_7wsQzULWIwo/TQ41fSDJC4I/AAAAAAAADLY/f0yLz52zQ7w/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="http://2.bp.blogspot.com/_7wsQzULWIwo/TQ41gW403NI/AAAAAAAADLo/AqlB-GINanU/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

No comments:

Post a Comment