- Bunny Crazy: Slide automático de transição [002]

Konnichiwa!!! Hoje consegui tirar meus olhinhos mais cedo do mangá para postar rsrs, e então como vão vocês? Eu vou ótima! E feliz pós falta apenas um seguidor, para a meta de 400 seguidores, e ai quem sera a minha benção? Mas chega de papo e vamos ao tutu, né? Hoje trago um slide para vocês, ele e perfeito para quem quer ter um blog estilo revista ou uma aparência mais moderna, ele é um slide automático que possui efeito de transição do JQuery . Para entenderem melhor do que eu estou falando aqui esta o exemplo: Preview (Slide esta no final da pagina) Então gostaram?

1. Os códigos são meio grandes, mas prometo que o tutu e bem fácil. Agora vamos aprender como colocar o slide como o de sempre, vá ate seu HTML e usando o atalho Ctrl+F procure por ]]></b:skin>, assim que o achar cole esse código acima dele:

Códigos

/* Início Slider */#slider-container {
width: 330px;
height: 230px;
background: transparent; /* Cor de fundo*/
margin-bottom: 15px;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

.nivo-caption {
position:absolute;
right:0px;
top:125px;
background: #5BC8E7; /*Cor da faixa do título*/
color:#fff;
opacity:0.8;
width: auto !important;
max-width: 690px !important;
z-index:89;
display: inline !important;
}

.nivo-caption p {
padding:10px;
margin:0;
font-size: 16px; /* Tamanho da fonte */
color: #FFF; /* Cor da fonte */
text-align: center;
}

.nivo-caption a {
display:inline !important;
color: #FFF;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}

.nivo-prevNav {
left:0px;
}

.nivo-nextNav {
right:0px;
}

.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
}

#slider {
float: center;
position:relative;
width:300px;
height:200px;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaVB7inuSpvotOndf-N2kW0aKJ2dccStHrzV39mNB7-toa5LaX_6okvH58C0-VpKygRm1qYYR58RwfP7xMZxAVsKBOGHArV_jPit8mpu7RLt3zpo5AXspnDfU5Qa546x0HoA8-NXOPGw6/s1600/logon.png) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:90px;
bottom:-40px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZyEeFwmStepd3aGNubgjBA6FI-NwMT7csT30UZiS00X-fTgssh7yrHCz6QB5-KtGj9HABtVx5ccRyZFW_WhP8V_IAciKyAFe8ACHEEcJbIoHiWPcc8k-PmqX_6o7NI5ykPstat1XY7bY/s1600/botao1.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:10px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:none;
height:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVJHtA-3wFIiYcPJPbGHYydxzv0ctY44qoR3ZGYFucoR7M-Dn6y3bl9YNy0heGQmqdn1NxTQHu2hyphenhyphenT_vHVL5fPG8O9QdX5eXUFT8YwUecg6E_ZaCZBNNmn3_5lRzM6qJ8Xj11z7ZhAfJx/s0/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}

a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
}

.nivo-caption a {
color:#DDF8FF;
text-decoration:underline;
}
/* Fim do Slider */

2. Visualize para ver se esta tudo okay, então salve. Ainda dentro do seu HTML procure por </body>, e acima dele coloque esse código, não altere nada nele:

Códigos

3. Salve e agora vamos colocar o slide para aparecer, vá ate seu layout e adicione um novo gadget de HTML/JavaScript e dentro dele coloque esse código:

Códigos

Mais sobre o código:

LINK AQUI: O link da pagina que você quer direcionar
LINK DA IMAGEM: O endereço da imagem que vai aparecer no slide
Descrição de link: Descrição da pagina colocada
Título do "numero" slide: Título da pagina que ira colocar.

As imagens do slide se encontra no tamanho de 299x200, abaixo esta uma imagem de exemplo no tamanho usado no slide para facilitar o serviço de vocês.

Espero que tenham curtido o tutorial, pareceu meio grande por causa dos códigos enormeeees mas no final foi bem fácil não é? Antes que eu me esqueça os créditos são do blog Garotas do Contra. Bom vou ficando por aqui, ate a próxima pessoal.

12 comentários:

Daia Silva Fotografias17/9/13
eu posso aumentar o tamanho da imagem?
ResponderExcluir
Respostas
MGabriela18/3/14
Tem como colocar esse slide no cabeçalho?
ResponderExcluir
Respostas
Unknown6/4/14
Oii, então o meu também ficou preto você sabe pq?
ResponderExcluir
Respostas

Adicionar comentário

11/01/2013

Slide automático de transição [002]

12 comentários:

Postagens mais visitadas