Coloque em seu blog um slide com imagens e efeito hover.
Mais uma vez o ProDeveloper vem falar sobre design, uma parte muito importante no meio web, pois o primeiro contato com determinado site é visual e logo quando se tem elementos que se chama a atenção o visitante olhará para aquele elemento, sem exageros é claro.
Pensando nisso apresentamos esse slide simples e de fácil configuração, mas que não deixa de ter um visual e efeito bem legal. No qual você poderá colocar imagens com links para determinados posts, anúncios publicitários ou o que mais desejar.
A instalação desse slide é muito simples, e com poucas configurações já estará pronto para o uso.Veja como fazer a seguir:
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Colocar Slide Horizontal Com Imagens no Blog
* Acesse seu Blogger, vá em "Layout", clique em "Adicionar um gadget" e escolha por "HTML/Javascript".
* Dentro do corpo do gadget cole o código abaixo, fazendo as alterações necessárias.
<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="http://i42.tinypic.com/4m3op.jpg" width="100px" height="100px"/></a>
<a href="LINK DE DESTINO" target="_blank"><img src="http://i43.tinypic.com/iz8bnk.jpg" width="100px" height="100px"/></a>
<a href="LINK DE DESTINO" target="_blank"><img src="http://i40.tinypic.com/4qqxw7.png" width="100px"height="100px"/></a>
</marquee>
</div>
</div>
Em VERMELHO, troque pelos links de destino.
Em AZUL, troque pelas urls das imagens que você deseja que apareça.
Caso você queira aumentar o tamanho do slide, basta alterar o trecho em VERDE, width="100px" height="100px", para o tamanho que mais lhe agradar.
Para adicionar mais imagens ao slide, insira um trecho de código como esse abaixo, antes da tag </marquee>
<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM" width="100px" height="100px"/></a>
* Agora clique em "Salvar" e depois "Salvar Organização". Veja o resultado em seu blog.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários