Slide de postagens recentes simples e fácil de instalar - Elaine Gaspareto- Dicas para blogs e inspirações para a vida
Slide de postagens recentes simples e fácil de instalar
Publicado em 03/11/2015 by Elaine Gaspareto
Há, aqui no blog, uma subcategoria dedicada especificamente aos slides.
Slides para blog, várias opções e modelos diversos
Há vários modelos, e hoje quero mostrar este, que inseri em um dos blogs que personalizei:
Ele é muito simples de instalar, é relativamente leve e bem fácil de ser personalizado.
Para começar você precisa acessar o painel administrativo de seu blog e clicar na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
ACIMA disso cole este código CSS:
Este é o código CSS, que basicamente define a aparência do slide, coisas como cor, fonte, tamanho, etc.
LEIA esse código, ele te dirá o que pode ser alterado.
Marquei em CAPSLOCK tudo que pode ser alterado, e deixei em pink o endereço das setinhas caso queira trocar.
As "bolinhas" podem ter as cores alteradas, as fontes do slide podem ser trocadas, a cor de fundo geral, cor de fundo dos títulos, etc...
Não altere nada além do que deixei marcado em capslock, ok?
Feitas as alterações, clique em Salvar.
Agora vamos ao segundo passo, que é colocar os scripts que fazem o slide rodar.
Ainda no código fonte, dentro da barra de busca, digite </head> e tecle enter para localizar.
ABAIXO disso cole este segundo código, o Código JAVASCRIPT:
Ainda não vai aparecer nada, calma.
Depois você poderá voltar e editar essa parte, trocar cores e fontes. Mas antes precisa fazer o slide aparecer, correto?
Vamos instalar o código HTML/JAVASCRIPT que faz o slide funcionar.
Vá até o painel do seu blog, clique em Layout e a seguir clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da caixa que abrir cole este código HTML:
Onde está escrito ENDEREÇO COMPLETO DE SEU BLOG coloque, claro, o endereço de seu blog, sem esquecer o http.
Onde marquei em vermelho é a quantidade de posts a serem exibidos. Altere como desejar, lembrando que quanto mais posts mais tempo leva para carregar.
Salve seu gadget, arraste para onde deseja que fique (eu sugiro abaixo do header, abaixo do menu ou acima da área de postagem como em meu exemplo) e salve a alteração.
Se tudo deu certo e se seu blog não apresentar nenhuma incompatibilidade com os códigos do slide o resultado será exatamente como em meu exemplo.
Fiz tudo e não apareceu nada, o que houve?
Não tem como eu saber, caso a caso é impossível. Cada template é diferente do outro, tem outros elementos de página, etc.
Vou dar dicas que notei enquanto testava.
Se o blog tem mais algum gadget ou widget que usa JQuery o slide não funcionará.
Se há excesso de elementos com animação o slide não funciona.
Há um aparente conflito com alguns tipos de menu que usam JQuery, então faça o teste antes.
Templates baixados da internet em geral não aceitam esses slides. Teste em um template nativo do Blogger. Eu testei em 4 diferentes, todos deram certo. Meu exemplo é um dos modelos Travel/Viagem.
Aliás, essa é a dica de ouro: teste antes em um blog de testes que use um template igual ao seu blog real. Teste, modifique e só depois insira em seu blog real.
Espero que você aproveite o tutorial, faça para aprender, para estudar.
O slide é vantajoso em relação aos demais por ser mais personalizável e não deformar as imagens.
Foi um trabalho grande montar esse passo a passo, mas vale a pena porque você, querido leitor, merece.
Então, vale a pena qualquer trabalho.
Unknown 10 de novembro de 2015 12:14
como eu faço pra eu escolher as postagem que devem aparecer no slid?
Batom nos Dentes 11 de novembro de 2015 19:16
Oi Elaine! Obrigada pela dica. Eu tenho dois blogs para usar como testes, rs. Experimento neles antes de colocar no meu. No primeiro não funcionou, fiz algo errado, mas tentei novamente e deu tudo certo! Só tenho que alterar algumas coisinhas agora. Muito obrigada pela sua dica! Super valiosa. Vou dar mais uma olhada no seu blog para ver o que mais posso usar para personalizar o meu. Parabéns por compartilhar estas coisas!
Ah, depois passa no meu para ver como ficou :) www.batomnosdentes.com
Claudia Carvalho 5 de fevereiro de 2016 08:05
Baixei um template pro meu com slide de posts recentes embutido. Bem, não aparece nenhuma das postagens. Acreditava que era devido ao feed, mas coloquei o endereço do feedburner e continuou não funcionando. O que você acha que pode ser, Elaine?
Claudia Carvalho 5 de fevereiro de 2016 08:07
No caso, o blog é esse: http://ouniversoleitor.blogspot.com.br/
Elaine Gaspareto 5 de fevereiro de 2016 12:39
Claudia, na pasta em que veio seu template deve ter um arquivo que explica como acionar o slide.
Como é um template baixado da internet não tenho como dizer, mas em geral as informações vêm na pasta...
Unknown 8 de fevereiro de 2016 11:33
Eu tentei mudar a altura dele mas não consegui. o que devo fazer?
Ana Mello Vianna 8 de fevereiro de 2016 13:39
Elaine, boa tarde...
Fiz o que você explicou no post masalguma coisa deu errado. E agora? Como faço para reverter isso? Desde já agradeço.
Elaine Gaspareto 20 de abril de 2016 12:06
Ana Paula, se algo deu errado exclua todos os códigos que instalou e salve, o seu template voltará ao que era.
Ana Mello Vianna 8 de fevereiro de 2016 15:48
Conseguiiiiiiiiii...ebaaaaaa... Só não consegui diminuir as bolinhas, mas está lindo. Adorei. OBRIGADA.
Gabriela 19 de abril de 2016 20:30
Boa Noite Elaine, eu estou atrás de um tutorial que ensinasse a colocar um slide, mas todos que eu tento não funcionam, e o seu até que funcionou, mas...eu não sei em que parte eu diminuo o tamanho das bolinhas.
As bolinhas ficaram enormes :( e eu não sei em que parte do código eu arrumo.
Elaine Gaspareto 20 de abril de 2016 12:05
Gabi, ache esse trecho no código CSS:
E altere 11px por um valor menor.
Gabriela 21 de abril de 2016 14:29
Elaine, eu fiz isso mas as bolinhas continuam grandes, e sabe a setinha?Quando passa o mouse em cima da setinha ela dá um "bugue"tipo, ela sobe e desce, e não deixa eu clicar :(
Unknown 20 de maio de 2016 14:55
Unknown 24 de maio de 2016 15:59
tem como colocar o texto na parte de baixo da imagem?
Elaine Gaspareto 24 de maio de 2016 19:20
Abimael, nesse slide, não.
Analu Andrade 27 de março de 2017 15:59
As imagens do slide não quiseram aparecer. E eu não alterei o código, por que salvo tudo primeiro para ver se funciona. O que deu errado ?