publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
publicidade

Como criar um slide e colocar no blog

#Ezio

Primeiro você vai precisar de dois codigos:
O primeiro codigo você adiciona antes de :
]]></b:skin>

1º codigo

/* Slide*/ 
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:500px; /*ALTURA DAS IMAGENS-- */
width: 380px;  /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 200px;
height:40px;
z-index: 100;
text-align: center;
line-height: 40px;
background:  url(#);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}

Onde esta de amarelo la em cima e a atura e largura das imagen você pode deixar do tamanho que você quiser.

Esse segundo codigo você adiciona onde você quer que fique o slide,no meu caso eu coloquei em html/javascript (mais você pode estar adicionando ele no html do blog).

para add o slide como widget vá no painel do sue blog >design>adicionar widget>html/javascrip e cola esse codigo:

<center>
<div id='slide'>
<div class='folio_block'>

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

<a href='aqui o endereço do link 1'><img width="380px"  src='LINK DA IMAGEM' heigth="500px" /></a>


<a href='aqui o endereço do link 1'><img width="380px"  src='LINK DA IMAGEM' heigth="500px" /></a>

<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>

<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
</div>
</div>

</div></div>
</center>
onde está de amarelo e o link das imagens,os links q estão ai são das minhas imagens...
onde está de azul e os numeros que vão aparecer no slide.
"Para add mais imagens add esse codiga<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a> 
acima de:
</div></div>
e almente a quantidade de numeros add esse codigo<a href='#' rel='5'>5</a>
abaixo de <a href='#' rel='4'>4</a>

PRONTO ESTÁ FEITO SEU SLIDE COMENTE NÃO CUSTA NADA!!!
0 comentários
,

0 comentários:

Postar um comentário

Assinar: Postar comentários