Sunday, July 15, 2012

How Add Attractive Jquery Slide Show Feature For Blogger

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.

Jquery Slide Show Feature

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="http://3.bp.blogspot.com/-r0qLumEI0HU/UAF37DrEHII/AAAAAAAAAGw/6W-gv0scKlk/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="http://1.bp.blogspot.com/-XbDPTu89MEw/UAF3-bzwW2I/AAAAAAAAAG4/nA9nxqRvV_c/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="http://1.bp.blogspot.com/-6xVIl-rNzY0/UAF7fpd6iCI/AAAAAAAAAHg/7ON87thE5dE/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="http://3.bp.blogspot.com/-vRaCkKg5KnY/UAF7p9xPg6I/AAAAAAAAAHo/mX4rNL6dTHs/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.

1 comment: