09/12/2012

Slide de imagens e numeração [001]


Yo minna-san! Desta vez trago um tutorial de slide bem legal para vocês meus brigadeiros. Os créditos são do blog, Cherry Bomb. Estive sem tempo para postar, mas agora que tudo se normalizo, posso voltar a postar que nem uma doida rsrsrs. Vamos lá então? Como disse vou mostrar como fazer um slide simples, com numeração me Ice Cream.



1. Primeiramente, vá em seu HTML e procure por </head>, copie o próximo código e cole a cima dele.
Ele e meio grandinho então o cloquei em uma caixinha:

Códigos


2. Depois de aplicar o código, procure por ]]></b:skin>, e acima dele coloque esse código:

Códigos
/*--Container geral--*/ .main_view { float: left; position: relative; } /*--Estilos do container das imagens--*/ .window { height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */ width: 550px; /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */ overflow: hidden; position: relative; }.image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; } /*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/ .paging { position: absolute; bottom: 40px; right: -1px; width: 220px; height:41px; z-index: 100; text-align: center; line-height: 40px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-radius-bottomleft: 15px; -webkit-border-radius-topleft: 15px; display: none; } /*--Estilos do link da numeração (Estilo dos numeros)--*/ .paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #fff; background: #bad5d9; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; } /*--Estilos do link ativo da numeração--*/ .paging a.active { font-weight: bold; color: #fff; background: #b97ac9; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; } /*--Estilos do link hover da numeração--*/ .paging a:hover { font-weight: bold; }.feed-links { display: none; }

No código acima, você altera as medidas e as cores da numeração do slide, ok?

3. Salve as alterações, e vá para Layout, então crie gadget de HTML/Javascript e cole esse código dentro:

Códigos
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>

Nesse código e onde você coloca suas imagens, e os links lembrando que as imagens devem ter as mesmas medidas do código anterior, ou ficara torto e aparecendo bordas. Por exemplo no código esta  200 de altura e 550 de largura. Os www.blogger.com não precisa mudar nada, eles  não vão funcionar no slide, é só para aparecer aquela mãozinha do mouse em cima dos números.

4 comentários:

  1. Anônimo9/12/12

    Fico maravilhoso o novo theme!!!! Vou usar o slide no meu proximo layout

    ResponderExcluir
  2. Obrigado pelo tutorial, mas eu tenho uma pergunta, se o nivo slider já estiver no blog ele vai funcionar normalmente?

    ResponderExcluir
    Respostas
    1. Por nada Yuri. Bem eu nunca fiz o teste, ma creio que ambos funcionam junto sim, pós os códigos no Nivo Slide diferente do de numeração. Só os códigos da sidebar que aconselho colocar em gadget separados, para não haver conflito mas creio que funcionada sim. ^^

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345