Seu Site

Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.


Bom, Vamos Começar:


Faça o Login -> Editar Html -> Procure Por ]]>


Antes de ]]> Cole o Código Abaixo:




/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px; /*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: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7eNMtVnGmorxjb5J4VT84-JlL2b_qnX1yUCGj7_QzBpWn0sKiqGxYbdncZlZvlhohFfTKrK1rzU5Q3sPG5lwLCGc1_8Bm9fbanBlhhkMz-OZUg8_dN3fgwKgqeIh3UVjz6GKUYRKTB23/s0/transparencia.png);
-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;
}


Os Numeros que Estão em Vermelho Define o Tamanho do Slide
Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.


Agora Logo depois de ]]> Cole o Seguinte Código:





Agora Procure Por

E cole o próximo código abaixo dele, fazendo as modificações necessárias.

980px" src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/>
980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" />
980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" />

1
2
3
4
5
6
7
8
9
10

Os Números em Vermelho São o Tamanho Das Imagens.


Você Também Pode Adicionar o último código no gadget "Html/Javascript".