Tutorial

Código de imagem para Slide em Css

20:51:00

Slide para blog
Código para slide 
Olá pessoal ,hoje trago para vocês um tutorial bem legal de um slide que achei na internet,ele é simples mas bem chique ,fácil de colocar e não deu erro algum.
Ele foi desenvolvido todo em CSS e HTML e com novidades ditas pelo autor em CSS3
O modo de instalação éfácil,vá em adicionar um gadegtes e clique em HTML/Javascript e coloque o código e tá feito.

VERMELHO - Coloque a URL DA IMAGEM
Azul - Coloque o Link de destino.

Para adicionar uma nova imagem no slide, copie a parte destaca de verde, e cole abaixo dela mesmo.
Recomendo que coloque todas as imagens com tamanhos iguais para que não haja deformação no slide.Ou acrescente o seguinte código no css.

.slidecblogger img {width: 400px; height: 300px; padding: 7px;}



Em width coloque um valor em px , que será a largura de todas as imagens.
Em height coloque um valor em px, que será a altura de todas as imagens.
TODOS OS CRÉDITOS É DO SITE (http://codigos-blogger.blogspot.com.br/2010/07/slide-em-css-e-html.html)
Eis aí o código logo abaixo:

<style type="text/css">

#slidecblogger {
background:#000; 
padding:5px;
border:3px double #fff;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}

.slidecblogger a:link {
opacity:0.4;
filter:alpha(opacity=40);
}

.slidecblogger a:hover {
opacity:1;
filter:alpha(opacity=100);
}


</style>

<div id="slidecblogger">
<div class="slidecblogger">

<marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right">

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>


</marquee>
</div>
</div>

slide em CSS e HtmL,CSS3
Meu Slide depois de pronto

Esse é a  captura do meu slide depois de pronto.

Para ser mais ágil,já deixe anotado todos os links das páginas ou sites que  as imagens irão apontar anotados e as URLs das imagens também e vá acrescentando um a um.
E prontinho !!


You Might Also Like

0 comentários

Obrigado pelo seu comentário,volte sempre e aproveite o blog.

Like us on Facebook

Eu Sou do CBBlogers