19 de set de 2009

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(http://1.bp.blogspot.com/_FXIne2ZDJII/SrQibvsAyFI/AAAAAAAABhw/vDf4hrpYAWg/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

8 comentários:

  1. achei bem chic ja uso esse slide no meu blog a algun tempo elke eu vou disbonibilizar quando possivel alguns modelos de slide para seu blog eu fiz alguns modelos www.crushdownloads.tk são parecidos com esse.

    ResponderExcluir
  2. MONTO SLIDES E GOSTARIA DE COLOCÁ-LOS ABERTOS EM FORMATOS DE SLIDES MESMO!!
    MAS COMO PODEREI COLOCAR OS MEUS SLIDES NO BLOG ABERTOS.......... OBRIGADO!!!!


    ABRAÇOS TÂNIA

    ResponderExcluir
  3. Elke tentei fazer da forma que esta no tutorial mas o slide não funciono desconfigurou meu site talves seja está parte que eu não entendi "Vá até o HTML do seu blog e cole o código abaixo acima de:" no inicio da postagem! E os dois arquivos "jquery-1.2.6.min.js
    sliderpreto.js " abre em uma janela já hospedado...
    Pro me ajude!!!
    eduardorossani@hotmail.com

    ResponderExcluir
  4. Pó deveria ser mais explicado , no começo pede para colocar o codigo abaixo acima de que???? cade o codigo ? etc..

    ResponderExcluir
  5. Moçadinha, dei uma arrumada no código, agora está bem mais fácil.

    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