28 de dez. de 2010

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>

4 comentários:

  1. especifique o as palavras que estao em vermelho pois no consigo entender direito oq que é pra colocar (endereço,blablabla,)
    obrigado

    ResponderExcluir
  2. Hummmm gostei da dica, parabens o seu blog já é meu favorito, adoreiii as dicas...bjs que Deus esteja sempre contigo...

    ResponderExcluir
  3. mt bom o slide....mais só faltou uma coisa...nao tem como colocar ele automatico nao?abraços

    ResponderExcluir
  4. o meu blog não tem main-wrapper como adiciono? =\

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube