Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

3/22/2010

doutorblogs-aqui vai uma explicação mastigadinha de um slide

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

aqui vai uma explicação mastigadinha de um slide. Bom, como me enviaram um email e há quem peça para eu explicar como usar a header (cabeçalho) assim, eis a explicação meus leitores. 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, abaixo, ao abrir, salve em seu pc e depois monte a imagem que quiser sobre ela.

clique na imagem abaixo e veja como funciona.

image

primeiro Passo, 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.


<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>

Faça as alterações e salve.

 

Bookmark and Share

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias