Header Ads

  • Breaking News

    Jquery Post Slideshow za Blogger

    Live Demo


    1. blogger dashboard--> layout- -> Edit HTML
    2. CTRL + F i nadjite </head> tag .
    3. Kopirajte kod ispod i pastujte iznadand ili pre </head> tag-a .

    Napomena: Da promenite brzinu slajda, nadjite ovaj deo "timeOut: 4000" i dodajte vrednost koja vam odgovara.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    //<![CDATA[
    
    /* ------------------------------------------------------------------------
     s3Slider
    
     
     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>
    <style type='text/css'>
    #s3slider {
    background:#000000;
    border:1px solid #818e8f;
    width: 550px;
    height: 200px;
    position: relative;
    overflow: hidden;
    }
    #s3sliderContent {
    width: 550px;
    position: absolute;
    top:0px;
    padding: 0px;
    margin: 0px;
    }
    .s3sliderImage {
    float: left;
    position: relative;
    display: none;
    }
    .s3sliderImage span {
    position: absolute;
    left: 0;
    font: 20px Trebuchet MS, sans-serif;
    padding: 10px 0px;
    width: 550px;
    background-color: #000;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    color: #fff;
    display: none;
    bottom: 0;
    text-align:center;
    }
    .clear {
    clear: both;
    }
    </style>

    Širina je 550px a dužina 200px ali to je difolt, vi možete da promenite po vašoj želji.

    Sejvujte template.

    Sada idite u layout>page elements i dodajte HTML/JavaScript box i u nju stavite kod koji je ispod:


    <div id="s3slider">
    <ul id="s3sliderContent">
    
    <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>
    
    <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>
    
    <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>
    
    <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>
    
    <li class="s3sliderImage"></li>
    </ul>
    </div>
    
    <div class='clear'></div>

    Samo zamenite "YOUR-LINK-HERE" sa vašim linkom i "s3sliderImage" sa vašim slikama

    To je to. Kliknite save i gotovo.

    No comments

    Post Top Ad

    Post Bottom Ad