Como fazer Slide Show para destacar postagens Qui Jun 21, 2012 8:53 am
blogsdox
ADMIN
Vamos aprender a colocar um slideshow destacar sua postagens mais populares ou aquelas para as quais você queira chamar a atenção do leitor. Fica bem bonito e é muito fácil de configurar e gerenciar. Dentro do script abaixo, você poderá alterar o tamanho das imagens de acordo com as medidas do seu template, mudar a cor do background, da exibição, cor e formato das bordas.
A velocidade da exibição também pode ser alterada. Clique aqui para ver uma demo.
Vamos lá:
Clique aqui para pegar o código para o Slide Show
Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:
background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;
5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed
#584536 é o código da cor
Para mudar o velocidade de slideshow, altere o valor 4000
Para mudar o tamanho das imagens mude:
width: 550px; (largura)
height: 200px; (altura)
Como inserir o script e as imagens acima da área de postagem:
1. Faça o login no Blogger e no seu painel clique em ►Design
2. Clique na aba ► Editar HTML
3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head>
Salve o modelo
Agora volte para a página Layout e clique em "Adicionar um gadget"
Escolha um gadget HTML/JavaScript e coloque dentro dele o seguinte código:
colocando o link e o endereço da sua imagem (destaque em NEGRITO e AZUL)
Salve.
Observe que neste exemplo usei apenas quatro imagens com links. Você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).
ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>
Pronto!
A velocidade da exibição também pode ser alterada. Clique aqui para ver uma demo.
Vamos lá:
Clique aqui para pegar o código para o Slide Show
Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:
background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;
5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed
#584536 é o código da cor
Para mudar o velocidade de slideshow, altere o valor 4000
Para mudar o tamanho das imagens mude:
width: 550px; (largura)
height: 200px; (altura)
Como inserir o script e as imagens acima da área de postagem:
1. Faça o login no Blogger e no seu painel clique em ►Design
2. Clique na aba ► Editar HTML
3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head>
Salve o modelo
Agora volte para a página Layout e clique em "Adicionar um gadget"
Escolha um gadget HTML/JavaScript e coloque dentro dele o seguinte código:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" />
<span>Texto: Título do post</span></a>
</li>
</ul>
</div>
<div class='clear'></div>
colocando o link e o endereço da sua imagem (destaque em NEGRITO e AZUL)
Salve.
Observe que neste exemplo usei apenas quatro imagens com links. Você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).
ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>
Pronto!