21/04/2016

| |

Slide horizontal com imagens.

Aprenda a colocar no seu blog um slide horizontal com imagens, que facilitará ao seu leitor a escolha das postagens.Slide manual.




Olá,meus amigos!!

Chegando com uma dica super legal para o seu blog.
Aprenda a colocar no seu blog um SLIDE DE IMAGENS HORIZONTAL.É fácil, mas precisa de um pouco de atenção, pois ele não é automático,ou seja, você terá que inserir o link de destino e o endereço da imagem.Ele se torna fácil, porque você não 


precisará mexer no HTML do seu blog, pois esse código usará somente o ADICIONAR UM GADGET do nosso painel.

Ele ficará assim:


As imagens ficarão passando e todas estarão linkadas conforme o endereço que vocês colocarem.
A cor do fundo poderá ser mudada como você quiser, estarei ensinando mais abaixo esse recurso.
 Veja como fica no meu blog SOMENTE CÓDIGOS:




 Quando você coloca o mouse sobre a imagem, ela fica mais visível e o slide para.Pode clicar e ir para a postagem escolhida.


Copie o código:

Passe no seu painel do blog e clique em LAYOUT,depois em ADICIONAR UM GADGET e em seguida, procure o título HTML/JAVASCRIPT  e cole o código 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" width="100px" height="100px"/></a>
<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM" width="100px" height="100px"/></a>
<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM" width="100px" height="100px"/></a>
</marquee>
</div>
</div>



Em LINK DE DESTINO: Coloque o link da postagem correspondente.

Em URL DA IMAGEM: Coloque o endereço da imagem que você quer. Não sabe copiar o endereço da imagem? Saiba tudo em PICASAWEB-SAIBA COMO HOSPEDAR IMAGENS.


Se você quiser colocar mais imagens, acrescente a linha abaixo antes da palavra </marquee> no código.

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

Eu acrescentei mais cinco linhas, para ficarem 8 imagens. Você vai acrescentando quantas quiserem, mas lembrando que você fará tudo no código,ok.

Se você quiser mudar o fundo do SLIDE, pode também. No começo do código tem a palavra
background:#000;


Tire o código #000 e mude para outro, conforme a cor que você queira ( coloque o código entre os :  e a ; ). Escolha a cor do seu slide, clicando aqui ( código em HTML,ok ).

E ai amigos? Gostaram?
Super fácil né?
Veja mais recursos nos marcadores RECURSOS PARA BLOGS e turbine o seu blog.
Compartilhem essa postagem e ajude o blog Agenda dos Blogs a chegar nas pessoas que precisam.Bjss!!!



Sobre o Autor:
Magda moreira Meu nome é Magda Moreira, sou professora e atualmente estou fazendo o curso de Pedagogia.Sou blogueira de coração e uma curiosa da internet.Meu blog Agenda dos Blogs tem como objetivos:Divulgação de blogs gratuitamente e elaboração de projetos e tutoriais voltados aos blogueiros.

Nenhum comentário:

Postar um comentário

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!