Oi Galere, bom estou aqui pra ensinar voces a colocarem um código para terem banner "rotativo". Aliás não sei muito como ensinar, pois o tipo de layout que usei no meu blog ele tem um código condicional e confesso que peguei o layout praticamente pronto.

* Se vc já tiver o espaço de banner e não for colcocar o código condicional para ele aparecer só na página inicial use esse tipo de código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='galeria'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='url do post' rel='1'><img alt='' src='url da imagem 01'/></a>

<a href='url do post' rel='2'><img alt='' src='url da imagem 02'/></a>

<a href='url do post' rel='3'><img alt='' src='url da imagem 03'/></a>

</div></div>
<div class='paging'>
<a href='' rel='1'>1</a>
<a href='' rel='2'>2</a>
<a href='' rel='3'>3</a>
</div></div>
</div>
</b:if>


* Caso você use uma condicional como eu fiz, colocar esse código logo após começar os código em html:

<!-- JavaScript Slider Horizontal - Inicio-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(&quot;.paging&quot;).show();
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
        $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(&quot;.image_reel&quot;).animate({
            left: -image_reelPosition
        }, 500 );
        
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $(&#39;.paging a.active&#39;).next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $(&#39;.paging a:first&#39;); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(&quot;.image_reel a&quot;).hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    //On Click
    $(&quot;.paging a&quot;).click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

</script>

<!-- JavaScript Slider Horizonta - Fim-->


Bem, esses são os código para ter o slide. A intenção do podt foi essa de mostrar, tive essa vontade porque já usei varias vezes layouts com slides e me perguntaram como fazer, mas postar isso no meu blog "pessoal" não ia combinar muito, então está aqui pra voces!! Espero ter ajudado!!! O layout que uso no meu blog e que tem o slides, foi retirado do site Templates para novo blogger.

Enfim é isso, aceito críticas, reclamações e sugestões.


Maa Shaddix