Já faz um bom tempo que uso em meu blog a header randômica em meu blog, vi uma explicação no blog da
Gem@ algum tempo depois a
Ariane traduziu e colocou no blog dela a explicação mastigadinha do slide. Bom, como me enviam email e aqui mesmo nos comentários há quem peça para eu explicar como usar a header (cabeçalho) assim, eis a explicação meu povo. Tive que modificar uma coisinha e outra para dar certo.
Atenção que o template que ensino a fazer a alteração é o "Minima" do Blogger e suas imagens para o slide tem que estar no tamanho:
width:960px;
height: 300px;
Se quiser, clique na imagem abaixo, ao abrir, salve em seu pc e depois monte a imagem que quiser sobre ela.
Passo número 1, salve estes dois arquivos em seu PC
Salve em seu pc o arquivo:
s3Slider.js
E o arquivo:
jquery2.js
Agora hospede-os no Drop Box. Clique
AQUI e aprenda como fazer isso,
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.
Vá até o HTML do seu blog e procure pelo código:
/* Header
-----------------------------------------------
*/
e substitua tudo que estiver entre ele e o código:
/* Headings
----------------------------------------------- */
por este código abaixo:
#header-wrapper {
width:960px;
height: 400px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Feito isso, vá até o HTML do seu blog e depois de:
]]></b:skin>cole o código:
<script src='http://dl.getdropbox.com/u/1703311/jquery2.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1703311/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
*Troque os códigos que estão na cor
verde pelo endereço de seus arquivos hospedados no DropBox
*O código em
laranja é a velocidade que mudam as imagens.
Agora acima de:
]]></b:skin>
cole este próximo código:
/* s3slider
----------------------------- */
#s3slider {
width: 960px; /* essa numeração deverá corresponder a width da header */
height: 400px; /* essa numeração deverá corresponder a height da header */
position: center;
overflow: hidden;
}
#s3sliderContent {
width: 960px; /* essa numeração deverá corresponder a width */
height: 400px; /* essa numeração deverá corresponder a height da header */
position: center;
top: 0;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: center;
position: center;
display: none;
}
.s3sliderImage span {
position: center;
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 960px; /* essa numeração deverá corresponder a width da header */
background-color: #FF4F00;/* cor da barra */
filter: alpha(opacity=70); /*transparencia da barra*/
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #000; /* cor das letras */
display: none;
bottom: 0;
/*
Modifique acima como a indicação
top: 0; -> para a barra de recados aparecer acima
bottom: 0; -> para a barra de recados aparecer abaixo
*/}
.clear {
clear: both;
}
/* fim do slide */
*O código na cor
azul representa a cor da barra das inscrições do slide.
Salve !
Agora clique em "F3" em seu teclado e procure pela palavra "Cabeçalho".
Agora você verá um código como esse abaixo, troque o número "1" pelo número "5" e salve.
Agora vá até "Elementos de página", clique em "Adicionar um gadget" e clique em HTML/Javascript e cole aí o próximo código.
Faça as alterações e salve.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 1" />
<span><a href='ENDEREÇO DO LINK 1'>LINK 1</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 2" />
<span><a href='ENDEREÇO DO LINK 2'>LINK 2</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 3" />
<span><a href='ENDEREÇO DO LINK 3'>LINK 3</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 4" />
<span><a href='ENDEREÇO DO LINK 4'>LINK 4</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 5" />
<span><a href='ENDEREÇO DO LINK 5'>LINK 5</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 6" />
<span><a href='ENDEREÇO DO LINK 6'>LINK 6</a></span>
</li>
<li class="s3sliderImage">
<img src="ENDEREÇO DA IMAGEM 7" />
<span><a href='ENDEREÇO DO LINK 7'>LINK 7</a></span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
Tem coisa melhor que "di grátis" ? Não né ? Pois é, então quando é de graça e útil, melhor ainda. Vou ensinar como abrir uma conta no Drop Box e usufruir de seus serviços. Mas o que é Drop Box ? Bom, é um site que presta serviço de hospedagem de documentos, códigos, etc. Um HD virtual. (espero que esse também não saia do ar).
