Slide para o Blogger

Mais um slide para instalar no Blogger. Veja o demo para ver se gosta.

 DEMO

Já sabe, vá até o HTML de seu blog e proure por:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

]]></b:skin>
Troque-o então por todo este código abaixo

.

/* Slide
----------------------------------------------- */
#slider-holder {
    position: relative;
    height: 300px;/*altura do slide*/
    width: 600px;/*largura do slide*/
    margin-bottom: 30px;
    overflow: hidden;
    color: #fff;
    background: #808080;
}
#slider-holder .slide {
    position: absolute;
    top: 0;
    left: 600px;
    z-index: 1;
    height: 300px;/*altura do slide*/
    width: 600px;/*largura do slide*/
    overflow: hidden;
    background: #808080;
}
#slider-holder .slide-1 {
    display: block;
    left: 0;
    top: 0;
}
#slider-holder .slide a {
    display: block;
}
#slider-holder .slide img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#slider-holder  img.full-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline;
}
#slider-holder .slide-content {
    position: absolute;
    top: 300px;
    left: 0;
    height: 400px;
text-align: center;
    width: 620px;
    background: #000;/*cor tarja*/
    padding: -10px 10px 0 50px;
    z-index: 999;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
#slider-holder .slider-left, #slider-holder .slider-right {
    position: absolute;
    cursor: pointer;
    height: 350px;
    width: 120px;
    z-index: 999;
    display: block;
    color: white;
}
#slider-holder .slider-left {
    left: -30px;
    top: -48px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15eDN5QINeWwLu5zlocjCiJm7z4Xt2dDDbtyUdtGPg0Adipz9DZ5JPKbirX6ubmH97FBnQuj1kDnbN9BeukrJvDa1lIdaGoEEBRQdImGMnLkp3Yr9loqQAscpB5WmGwqa79dfPAYGMMU/s1600/esquerda2.png') no-repeat center bottom;
}
#slider-holder .slider-right {
    right: -30px;
    top: -48px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNBrNyXSNQWU1gy7WEcrcpwA6OITFTb8f9s7AU46WXxM-wJ2hV6Asyaq91esSADwZDohQrnpG2WxfXHuaVeajdkU0jZzmwVgdQY9myfQhZDL2H0A1WSyvYbhkopcRVK9X15mzSaEyJPUc/s1600/direita1.png') no-repeat center bottom;
}

.slider-shelf {
    z-index: 999;
    background: #ccc;
    position: absolute;
    top: 0;
    width: 400px;
    overflow: visible;
}

]]></b:skin>

<!-- SLIDE -->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
  
    // You can edit the Sldier animation her
    var slide_fade = false;
    var content_fade = false;
    var padding_offset = 20; // Adjust for slider content -popup

    // --- CORE ---  
    var counter = 0;
    var amount_of_slides = jQuery('#slider-holder .slide').length;

    var rel_left = amount_of_slides;
    var slider_tracker = 1;
    var rel_right = 2;
    var slider_height = jQuery('#slider-holder').height();
    var slider_width = jQuery('#slider-holder').width();
   

    jQuery('#slider-nav .slider-left').attr('rel',rel_left);     //Setup
    jQuery('#slider-nav .slider-right').attr('rel',rel_right);
   // jQuery('#slider-holder .slide-1').css('opacity',1);
   
    // --- CORE END ---
   
    if(amount_of_slides == 1)
    {
       jQuery('#slider-holder .slider-shelf').add('#slider-holder #slider-nav').add('#slider-holder .shelf-content').add('#slider-holder .clicker').hide();  
      
    }
    else
    {
    var shelf_height = jQuery('#slider-holder .shelf-content').height();
    shelf_height = shelf_height + 8

    jQuery('#slider-holder .slider-shelf').css('opacity',0.9);
    jQuery('#slider-holder .clicker').css('opacity',0.9);
    jQuery('#slider-holder .shelf-content img').css('opacity',0.3);
    jQuery('#slider-holder .slider-shelf').css('height',shelf_height);
   
    var shelf =   jQuery('#slider-holder .slider-shelf').add('#slider-holder .shelf-content');
 
    shelf.css('top',shelf_height * -1);
   
    var flip = 1;
    jQuery('#slider-holder .clicker').click(function(){
   
        flip++;
        if(flip%2 == 0)
        {
          shelf.animate({top:0},300);
          jQuery(this).animate({top:shelf_height},300);
          jQuery('#slider-nav .slider-right').add('#slider-nav .slider-left').fadeOut(100);
       }
        else
        {
            shelf.animate({top:shelf_height * -1 },300);
            jQuery(this).animate({top:0},300);
            jQuery('#slider-nav .slider-right').add('#slider-nav .slider-left').fadeIn(400).attr('style','');
           
        }
       
    });
   
    jQuery('#slider-holder .shelf-content img').hover(function(){
        jQuery(this).stop().animate({ opacity:1});
        var title = jQuery(this).parent('span').attr('title');
        jQuery('#slider-holder .shelf-title').html(title);
       
    },function(){
        jQuery(this).stop().animate({ opacity:0.3})
        jQuery('#slider-holder .shelf-title').html('');
    });
   
    jQuery('#slider-holder .shelf-content span').click(function(){
        var shelf_rel = jQuery(this).attr('class');
    });
   
    jQuery('#slider-holder .shelf-content img').click(function(){
        var shelf_click = jQuery(this).parent('span').attr('class');

        var i = 0;
        var dif = shelf_click - slider_tracker;
       
        if (dif > 0){
            while(i < dif) {
                 jQuery('#slider-nav .slider-right').click();
                 i++;
            }
        }
        if (dif < 0){
             while(i > dif) {
                    
                     jQuery('#slider-nav .slider-left').click();
                    i--;
            }
        }
    })
   
    }
              
 // --- CORE ---
    jQuery('#slider-holder .slide-content-1').css('opacity','0').show(); // Crappy hack
    var content_height = jQuery('#slider-holder .slide-content-height-1').height();
    jQuery('#slider-holder .slide-content-1').hide().attr('style',''); //Crappy hack
    var cut_from_top = (slider_height - padding_offset) - content_height;
    if(content_fade == false) {
        jQuery('#slider-holder .slide-content-1').show().css({'opacity' : '0', 'top' : slider_height + 'px'}); //Set initial slider content
        jQuery('#slider-holder .slide-content-1').animate({ 'top':cut_from_top,opacity:0.8},1000);
    } else {
        jQuery('#slider-holder .slide-content-1').show().css({'opacity' : '0', 'top' : cut_from_top + 'px'}); //Set initial slider content
        jQuery('#slider-holder .slide-content-1').animate({opacity:0.8},1000);
    }

    jQuery('#slider-holder .slider-left')
        .add('#slider-holder .slider-right')
        .css('opacity',0.6);// Navigation Animation LEFT & RIGHT
  
    jQuery('#slider-holder .slider-left')
        .add('#slider-holder .slider-right')
        .hover(function(){ jQuery(this).animate({ opacity:1} , 200)},
               function(){ jQuery(this).animate({ opacity:0.6 }, 400); });
                   
    if(amount_of_slides > 1){
    //Amount of slide check
    var t;
    var timeout = 6000;
    function click_do(){
        t = setTimeout(function(){
            jQuery('#slider-nav .slider-right').click();
            click_do();
        },timeout);
    }
    click_do();
   
// CLICK FUNCTION - FORWARD
    jQuery('#slider-nav .slider-right').click(function(evt){ 
       
        clearTimeout(t);
        counter = counter + 2;
 
        var target_slide = jQuery(this).attr('rel'); // Lock in on what slide is next
        var content_height = jQuery('#slider-holder .slide-content-height-' + target_slide).height();         //Slider Content Animation
        var cut_from_top = (slider_height - padding_offset) - content_height;
       
        if(content_fade == false) {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : '0', 'top' : slider_height + 'px'});   //Prep Slider Content
            } else {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : '0', 'top' : cut_from_top + 'px'});   //Prep Slider Content
        }
      

        if(slide_fade == false){
        jQuery('#slider-holder .slide-' + target_slide)

            .css({'opacity' : '0', 'z-index' : counter, 'left' : slider_width + 'px'})
            .animate({ 'left' : '0px', opacity:1 },500,"linear", content_stuff ); //Prep , animate and call callback for slider_content
        } else {
        jQuery('#slider-holder .slide-' + target_slide)
            .css({'opacity' : '0', 'z-index' : counter})
            .animate({ opacity:1 },500,"linear", content_stuff ); //Prep , animate and call callback for slider_content
            }

        function content_stuff(){
        jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter, 'left' :  '0px'})
            if(content_fade == false){
                jQuery('#slider-holder .slide-content-' + target_slide).animate({ 'top':cut_from_top,opacity:0.8},1000);
            } else {
                jQuery('#slider-holder .slide-content-' + target_slide).animate({opacity:0.8},1000);
            }
        }
       
        slider_tracker++; rel_left++; rel_right++;        // Clocks

       if(rel_left > amount_of_slides){rel_left = 1;}         // Clock Statements 
       if(rel_right > amount_of_slides){rel_right = 1;}
       if(slider_tracker > amount_of_slides){slider_tracker = 1;}
      
        jQuery('#slider-nav .slider-left').attr('rel',rel_left);        //Assign Values, Save action
        jQuery('#slider-nav .slider-right').attr('rel',rel_right);
       
        evt.preventDefault();         //Prevent Click Default Action

        // ----- CORE END ------------
      
       //Daily Edition Dots Tracking
        jQuery('.slider-dots span').fadeTo(200, 0.2);
        jQuery('.slider-dots span.dot-' + slider_tracker).fadeTo(200, 1);
       
    });

   
//  CLICK FUNCTIONS - REVERSE------------------------------

    jQuery('#slider-nav .slider-left').click(function(evt){
   
        clearTimeout(t);
        counter = counter + 2;
       
        var target_slide = jQuery(this).attr('rel'); // Lock in on what slide is next
        var content_height = jQuery('#slider-holder .slide-content-height-' + target_slide).height();         //Slider Content Animation
        var cut_from_top = (slider_height - padding_offset) - content_height;
        jQuery('#slider-holder .slide-content-' + rel_left).css({'top' : slider_height + 'px','left' : '0px', 'opacity'  : 0});
        jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter-1, 'left' :  '0px'})    
       
        if(content_fade == false) {
        jQuery('#slider-holder .slide-content-' + slider_tracker)
            .css({'z-index' : counter, 'opacity' : 0, 'top' : slider_height + 'px'});   //Prep Slider Content
            } else {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : 0, 'top' : cut_from_top + 'px'});   //Prep Slider Content
        }
           
        if(slide_fade == false){
        jQuery('#slider-holder .slide-' + slider_tracker)
            .css({'opacity' : 1, 'z-index' : counter, 'left' : '0px'})
            .animate({ 'left': slider_width + 'px', opacity:0 }, 500,"linear", content_stuff_alt ); //Prep , animate and call callback for slider_content
        } else {
        jQuery('#slider-holder .slide-' + target_slide)
            .css({'opacity' : '0', 'z-index' : counter})
            .animate({ opacity:1 },500,"linear", content_stuff_alt ); //Prep , animate and call callback for slider_content
            }

        function content_stuff_alt(){

            if(content_fade == false){
               
            //jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter, 'left' :  '0px'})
                jQuery('#slider-holder .slide-content-' + target_slide).animate({ 'top':cut_from_top,opacity:0.8},1000);
            } else {
                jQuery('#slider-holder .slide-content-' + target_slide).animate({opacity:0.8},1000);
            }
        }

        slider_tracker--; rel_left--; rel_right--;     // Clocks

       if(rel_left < 1){rel_left = amount_of_slides;}          // Clock Statements
       if(rel_right < 1){rel_right = amount_of_slides;}
       if(slider_tracker < 1){slider_tracker = amount_of_slides;}

        jQuery('#slider-nav .slider-left').attr('rel',rel_left);        //Assign Values, Save action
        jQuery('#slider-nav .slider-right').attr('rel',rel_right);
       
        evt.preventDefault(); //Prevent Click Default Action
       
        //Daily Edition Dots Tracking
        jQuery('.slider-dots span').fadeTo(200, 0.2);
        jQuery('.slider-dots span.dot-' + slider_tracker).fadeTo(200, 1);
       

    });

    }// End amount of slide check
   
})
//]]>
</script>

Agora depois de:

<div id='main-wrapper'>

Cole este próximo código, fazendo as modificações necessárias.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider-holder'>
<div class='slider-shelf'/>
<span class='clicker'>Featured Stories</span>
<div class='shelf-content'>
<div class='shelf-title'/>
</div>

<!-- SLIDE -->
<div class='slide slide-1'>
<a class='open' href='ENDEREÇO 1' title='BLA, BLA, BLA 1'><img alt='TÍTULO 1' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 1' width='595'/></a> 
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 1</h3>
                <p>INSCRIÇÃO 1</p>

            </div></div></div>
  
<div class='slide slide-2'>
<a class='open' href='ENDEREÇO 2' title='BLA, BLA, BLA 2'><img alt='TÍTULO 2' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 2' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 2</h3>
                <p>INSCRIÇÃO 2</p>

        </div></div></div>
   
<div class='slide slide-3'>
<a class='open' href='ENDEREÇO 3' title='BLA, BLA, BLA 3'><img alt='TÍTULO 3' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 3' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 3</h3>
                <p>INSCRIÇÃO 3</p>

            </div></div></div>
   
<div class='slide slide-4'>
<a class='open' href='ENDEREÇO 4' title='BLA, BLA, BLA 4'><img alt='TÍTULO 4' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 4' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 4</h3>
                <p>INSCRIÇÃO 4</p>

          </div></div></div>

<div class='slide slide-5'>
<a class='open' href='ENDEREÇO 5' title='BLA, BLA, BLA 5'><img alt='TÍTULO 5' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 5' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 5</h3>
                <p>INSCRIÇÃO 5</p>

          </div></div></div>
   
<div id='slider-nav'>
<span class='slider-left'/>
<span class='slider-right'/>
</div>
</div></b:if>