-

11 September 2012

How Add Attractive Jquery Slide Show Feature For Blogger

VM | 2:27 pm |
Jquery Slide Show Feature




Actually slide show helps to show main ideas of our blog. If we are doing some service via  blog. we can add  images with description  which according to our service.So adding  slide show getting more eye contact.So, there have more advantage of adding it.you  can check my earlier slideshow.How Add  Cool Jquery Slide Show For Blogger Follow these simple steps to add it to your
blog. check below link for demo.


DEMO

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag


 <style type='text/css'>
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #149CD5;
height: 280px;
margin-bottom: 25px;
margin-top: 0;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 585px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 300px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: -14px;
width: 585px;
}
.s3sliderImage {
float: left;
position: relative;
width: 585px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 300px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: 0;
top: 0;
width: 180px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 20px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
 s3Slider

 Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){ 

    $.fn.s3Slider = function(vars) {      
       
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
           
        items.each(function(i) {
   
            $(items[i]).mouseover(function() {
               mOver = true;
            });
           
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
           
        });
       
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
       
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
       
        makeSlider();
    }; 
})(jQuery); 
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Find this code by using Ctrl+F <div id="main-wrapper">

7.  Paste below code before <div id="main-wrapper">  code

<div id="s3slider">

<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVKBdObrJW-c1OHvERhRuktUwBuLvxBbKv4Ig5qyQ3t4iBoBFv7o96wfa71T7UitKGD1x-Wiu1Cpjb2zfdOkHDx3xc7Ri5SKW_Rc3KGKZqHE01fnfPXJaDx5xW9X2wQCVyB2QepHnQQA/s1600/image1.jpg" />
<span><strong><a href="ADD HERE POST1 URL">POST TITLE</a></strong>
<p>DESCRIPTION</p>
</span>
</li>

<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbrC4SW4rxFsjmOo5pl2GDs13TcH7QCUtpknbMXz_cyv4y43d39kOL4X_PYdBf3gH-OfxC04GcW_k_3MocMEzHaZnJ3S_xAR1Rsi726-emZvJ9q0eBe1N202_9Y_-bLI3rqwzBls5GNA/s1600/image2.jpg" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>
<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji3INjyadAudAOuYv572G0WqDRXRP4zFrklsYNBhSag30jjLiLLbIpEdZXz3DCmJy7vOnX3SMoOcX-FOtYQTBjLavg_Uh5teUlXiiXtqfBxWyJhdsNLhf_o7wlxI3_bJthT5-_WKqA1NM/s1600/image5.jpg" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>

<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_T945NUxi2pjU1xfqEwPG-C6UTLihdBbPqQxEKtQRV0I_rpKP-QIKepQWeML15BXHEmcNrxFSOwwacnMFzUx1LQVUeRPLVVPBee4Jk5DDWs5OHnWPvJV-kInF2glab0Zegkxk5EBCEM4/s1600/image6.png" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

* Replace Post Title with your title
* Replace DESCRIPTION with your short description.
* You can change the images by changing links.

9. Now save your template
You are done.
 

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Subscribe Updates, Its FREE!