Slide

Coloque um menu em seu blog que é um slide. Vá até o HTML do seu blog e cole o código abaixo acima de:

]]></b:skin>

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.

/* s3slider-------------------- */
#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3U7ECbij4moioavfekPJrYOXj1FulvPK1Wd86g4VYeKGxdIeeTpEqMWNmk-3fsR4clNw4qbQdc-EQ8KkMOiO12AFHdqmZSW29uc_Dh2k8hyMYpq54NhqPtDqc_D37uw6QDSNV3v9DCC2d/s1600/980.png);/*aqui o endereço da imagem de fundo do slide*/
height: 252px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #F54D0B;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #F54D0B;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 20px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 30px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
width : 280px;
higth: 280px;
position: absolute;
top: 20px;
left: 557px;
background:transparent;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 30px;
color: #F54D0B;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
/* fim slide */

(Querendo trocar a imagem de fundo do slide que é preta, hospede uma das imagens disponibilizadas abaixo e substitua o endereço onde está em vermelho no código acima)


Agora abaixo de:

]]></b:skin>

Cole este código

<!-- Slide-->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>

<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>
<!-- Fim Slide-->

<script type='text/javascript'>
//<![CDATA[
// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 4000;

function doMove(panelWidth, tooFar) {
var leftValue = $("#mover").css("left");

// Fix for IE
if (leftValue == "auto") { leftValue = 0; };

var movement = parseFloat(leftValue, 10) - panelWidth;

if (movement == tooFar) {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": 0
}, function() {
$(".slide img").animate({
"top": 50
});
});
});
}
else {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": movement
}, function() {
$(".slide img").animate({
"top": 50
});
});
});
}
}

$(function(){

    var $slide1 = $(".slide");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);
var totalMoverwidth = numPanels * panelWidth;
$("#mover").css("width", totalMoverwidth);

$("#slider").append('<a href="#" id="slider-stopper">Parar</a>');

sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);

$("#slider-stopper").click(function(){
if ($(this).text() == "Stop") {
clearInterval(sliderIntervalID);
$(this).text("Start");
}
else {
sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);
$(this).text("Stop");
}

});

});
//]]>
</script>

Agora copie o próximo código e cole antes de:

<div id='content-wrapper'>



Faça as modificações necessárias e salve.

<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>

</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

Abaixo, alguns fundos em cores diferentes para o slide. Clique sobre a imagem desejada e salve em seu computador, hospedando em seu blog a imagem e colocando o endereço no primeiro código na inscrição na cor vermelha.











Créditos:Jonh Resig