Hoje iremos ver um código novo para exibir slides no Blogger, este código além de automatizar algumas partes que antes tínhamos que fazer manualmente, como selecionar as imagens para o slide, ele traz uma grande praticidade que é permitir a escolha do marcador que será utilizado para fazer o slide. Gostaria de ressaltar também que este código foi adaptado pelo Felipe do blog “Forro News”, onde você também pode ver uma demo do código em ação, o tutorial abaixo foi escrito por ele, apenas publiquei aqui no blog.
Passo 1: Faça login no Blogger e acesse, design/editar HTML. O Slider, que é o script que cria o slide, necessita da biblioteca de códigos jquery para funcionar, então procure pela tag e logo após a tag coloque o código abaixo:
Obs.: Se seu blog já possue o jquery pule para o próximo passo pois não é necessário coloca-lo novamente, pois haverá conflito e o script irá parar de funcionar.
Passo 2: Procure agora pela tag e antes dela adicione o código abaixo:
Logo após o código acima adicione a configuração: Entendendo a configuração do script:
#slider = Identificação do Slider;
timeOut = Tempo de duração para transição de imagens (1000 equivale a 1 segundo);
para aumentar ou diminuir a duração de exibição das imagens, basta modificar o número 4000 para o tempo desejado.
Passo 3: Agora vamos aplicar o estilo do SlideShow. Então procure pela tag ]]> e antes dela adicione o código abaixo:
#slider {
position:relative;
overflow:hidden;
}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#sliderContent {
width:100%;
position:absolute;
top:0;
margin:0;
}
.sliderImage {
float:left;
position:relative;
display:none;
}
.sliderImage span {
width:100%;
padding:5px;
bottom:0;
left:0;
position:absolute;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
display:none;
}
.sliderImage strong {
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
.clear {
margin:0;
padding:0;
clear:both;
} Agora salve o modelo e verifique se não apareceram erros no blog. Estando tudo certo, vamos ao próximo passo.
Passo 4: Agora vamos adicionar o widget do SlideShow.
Clique em Adicionar um Gadget > HTML/JavaScript.
Obs.: Não é obrigatório colocar o título.
No conteúdo coloque o script abaixo:
Entendendo o Código:
MostrarImg = true; - Função exibir ou ocultar as imagens do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
LarguraImg = 270; - Largura da imagem do post
AlturaImg = 200; - Altura da imagem do post;
MostrarData = true; - Função exibir ou ocultar a data do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
EstiloData = "normal"; - Estilo da fonte da data do post (normal, bold, italic);
FonteData = 10; - Tamanho da fonte da data do post;
CorData = "#cccccc"; - Cor de fonte da data do post;
MostrarResumo = true; - Função exibir ou ocultar o resumo do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
ResumoPost = 50; - Número de caracteres a serem exibidos no resumo do post;
FonteResumo = 11; - Tamanho da fonte do resumo do post;
CorResumo = "#ffffff"; - Cor da fonte do resumo da postagem;
FonteTitulo = 12; - Tamanho da fonte do titulo do post;
CorTitulo = "#ffffff"; - Cor da fonte do título do post;
CorBorda = "#0046AB"; - Cor da borda acima das informações;
CorFundo = "#000000"; - Cor do plano de fundo das informações;
NumeroPosts = 5; - Número de Postagens a serem exibidas. Obs.: Se o blog tiver menos postagens que o número colocado em NumeroPosts o template ficará deformado;
Marcador = "Notícias"; - Marcador que quer usar para o Slider;
home_page = "http://seublog.blogspot.com"; - Adicione o endereço do seu Blog sem a barra (/) no final do endereço;
SemImg[0] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[1] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[2] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[3] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[4] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif"; - Imagem a ser exibida quando o post não possuir ilustração, para trocar a imagem substitua o endereço “http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/ j6bKjJUbcVY/s1600/sem_imagem.gif” pela imagem de sua preferencia.Por fim, salve o widget e veja se está funcionando corretamente.
Categories : 