Eu já ensinei aqui no blog alguns modelos de slides, relembre:
Hoje quero compartilhar contigo este modelo, que é um dos mais bonitos que consegui adaptar para o Blogger.
Veja:
Ele é responsivo, o que significa que ele assumirá a largura da área onde for colocado.
Se colocar acima da área do post ele assumirá o tamanho dessa área; se o colocar na sidebar ele ficará da largura da sidebar, e se o inserir abaixo do menu ele ficará da largura total do blog.
A instalação é bem simples, apenas três códigos, sendo que a maior dificuldade é a personalização.
E mesmo isso é muito fácil, trata-se apenas de trocar cores e fontes, caso queira.
Se não mexer em nada o resultado será exatamente como em minha demonstração.
A única alteração indispensável é colocar o endereço completo de seu blog no campo destacado no terceiro código, o Código HTML.
Vamos aprender?
Dicas preciosas para evitar erros
→ Para começar a dica de ouro é: faça antes em um blog de testes que tenha exatamente o mesmo template de seu blog real.
→ Leia o tutorial inteiro antes de começar. E leia o código, especialmente o primeiro código, o que comanda a aparência do slide, o código CSS.
Repito: leia o código até entender; faça testes até achar o que deseja, mexa, revire, faça com dedicação e paciência.
Instalando o Slide de postagens recentes
Vá ao painel de seu blog e clique na aba Modelo. A seguir clique em Editar HTML.
Dentro da caixa de códigos tecle Ctrl+F e na barra de busca que aparecer digite ]]></b:skin>.
Tecle Enter para localizar.
Acima disso cole o código CSS:
Este é o código que define cores, fontes, a aparência geral do slide.
Deixei marcado emCAPSLOCK todas as áreas que acho seguro você editar.
Ajuste as cores para combinar com seu blog, ajuste as fontes se desejar, etc.
Feito isso, salve.
Agora, dentro da caixa de pesquisa digite </head> e tecle Enter.
Acima dessa tag cole o código JAVASCRIPT:
Salve a alteração.
Uma dica importante: caso seu blog já tenha a chamada JQuery apague a primeira linha do código pois não é preciso ter 2 chamadas Jquery no mesmo template.
Agora vamos instalar de fato o slide.
Vá ao seu painel do blog e clique na aba Layout (Deseño em espanhol, ou Esquema, em português de Portugal).
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Cole dentro da caixa que expandir o código HTML:
No campo destacado em azul coloque, claro, o endereço completo de seu blog.
Salve, arraste para onde deseja que fique e salve a alteração.
Se tudo deu certo seu slide está pronto.
Fiz tudo conforme o tutorial e não deu certo, o que houve?
Não há como eu saber pois cada template possui características próprias.Podem ter acontecido algumas dessas coisas:
- Seu blog possui excesso de scripts e eles causaram conflito com o slide; Nesse caso precisa descobrir a causa do conflito e elimina-la se possível;
- Você pulou alguma parte, inseriu algum dos códigos no lugar errado ou apagou alguma aspa, sinal ou comando sem querer. Refaça tudo para se certificar;
- Seus feeds precisar ser ativos e seu blog precisa ser público;
- Você colocou o endereço de seu blog de forma incorreta ou incompleta;
- Seu template não assume o slide, e nesse caso não há o que fazer, a menos que troque de template;
- Já existe algum slide em seu blog? Não pode ter outro além desse.
Tutorial completo, longo mas bem simples de seguir. Leia com atenção, faça com paciência.
Acredite em mim, fazê-lo vai demorar bem menos do que você imagina, e certamente bem menos do que eu demorei para traduzir os comandos, interpretar o código, adaptar ao Blogger, testar em 4 templates nativos diferentes montar o tutorial :)
Elaine!!!! Era meu sonho de consumo!!!! Vc leu meus pensamentos!!! kkkkkkkkk
ResponderExcluirSempre via em alguns blogs slides como este que vc publicou!!! Meus "pobremas si acabaram si"!!!! kkkkk
Beijos querida!!!! Vc como sempre arrasa!!!
Tuca, é isso aí, eu leio pensamentos rsrsrsrsr
Excluirbeijossss
Elaine, houve um problema ! O slide não de adequa ao tamanho do gadget, daí fica completamente desproporcional. E isso ocorre em qualquer gadget. Ficaria extremamente agradecido se você pudesse me ajudar ! Agradecido desde já !!
ResponderExcluirElaine, percebi que o problema não é o seu tutorial, mas sim alguma configuração do meu blog. Tentei instalar os slides de apresentação, que estão presentes nos gadgets, e o problema continuou: Tamanhos desproporcionais, com imagens muito grandes que ultrapassam os limites. Se você souber corrigir este problema, por favor, me responda. Agradecido desde já !!
ExcluirInfelizmente não, como disse no tutorial cada template tem características próprias...
ExcluirMuito interessante e bonito. Porém como já tenho dito, sou um calhau com olhos, nesta coisa de html. Tenho sempre medo de fazer asneira.
ResponderExcluirUm abraço
Elvira, faz num blog de testes, até perder o medo rsrsrs
Excluirbeijosss
olá, adorei o Post.
ResponderExcluirjá te sigo e te adicionei ao meu blog.
queres seguir-me também: http://caraanjo.blogspot.pt/
Muito obrigada, Fatima, por seguir o blog!
Excluirbeijossss
Elaine, como sempre você arrasou. Vou esperar a correira do aniversário da Aimê passar e depois vou tentar instalar o slide.
ResponderExcluirObrigada pelas dicas.
bjk
Amei ♥ Já instalei!!! Uhulll
ResponderExcluirwww.planetadablogueira.com
Beijos
a data nao apareceu no meu ):
ResponderExcluirSem dúvida é o blog que mais me ajuda com funcionalidades para o meu blog! Novamente parabéns Elaine e muito obrigada.
ResponderExcluirSamanta Santos - Ateliê Fawkes
Seus tutoriais são ótimos. Parabéns !
ResponderExcluirEu queria saber se tem como aumentar o número de postagens. Abraço.
ResponderExcluirBom dia Luan. Para aumentar o número de postagens você tem que achar no último código essa linha aqui:
ExcluirMaxPost:10, /*--QUANTIDADE DE POSTS EXIBIDOS--*/
Depois é só modificar o Número 10 pela quantidade de postagens que você deseja tem em seu Slide de Postagens. Espero ter ajudado. Abraço.
Elaine, seus posts são sensacionais!
Excluireu tenho uma dúvida: como eu faço para colocar esses slides entre postagens na página inicial do blogger?
se poder me responder agradeço!
Jade, entre postagens requer um conhecimento em html para converter o código e inserir no código fonte do blog.
ExcluirNunca testei, até porque não dá pra inserir mais de um slide, eu acho...
Nunca testei, não sei se é possível.
Olá Elaine Gaspareto,
ResponderExcluirPrimeiramente agradecer por nos proporcionou uma postagem que ajudou não só ao meu blog como o de muitos, está e parabéns.
Agora, nós queríamos saber se tem como colocar nesses slides postagens variadas, não somente as recentes, mas também antigas, aleatórias.
Agradecemos novamente pelo excelente trabalho,
Abraços,
Equipe BioOrbis.
Nesse slide só dá pra ser assim, posts recentes.
Excluirquero exibir 5 de vez em vez de 3, onde mudo isto, consegui apenas achar as larguras no css, e modificar o tamanho, porem só exibe 3 ainda, mesmo com os tamanhos alterados.
Excluirtem como eu exibir 5? eu n acho a contagem pois só exibe 3
ExcluirNão, devido ao script .js ele só exibe 3 posts por rotação...
ExcluirOi Elaine tudo bem? fiz o tutorial tudo certinho e o slide aparece, mas não fica organizado as imagens ficam uma abaixo da outra, não entendi o por que. Pode me ajudar?
ResponderExcluirComo seu blog foi modificado por ser que algum script esteja causando o conflito, não tenho como saber...
ExcluirMinha dica é testar em um blog sem nenhum outro gadget até descobrir o motivo...
bjsss
Para mim o que ocorreu foi ficarem alinhados todos e irem mudando a posição da imagem
ResponderExcluirAlguma coisa em conflito pena pois ameis o modelo responsivo bjks
Tem como alterar o tempo de transição? Pra, tipo, trocar de postagens mais rápido?
ResponderExcluirSim.
ExcluirLocalize no código HTML o trecho interval:10000, e altere até ficar como deseja.
Não aparece nada...
ResponderExcluiro que sera que fiz de errado?!
Oba deu super certo!!! Era tudo o que eu queria!!! Amei!!! Ele fica um charme no blog ♥ Beijos *-*
ResponderExcluirElaine, como posso por mais de 3 slides exibindo? pois quero diminuir a largura dos retangulos direitos e exibir quatro quadrados, em vez de 2 retangulares.
ResponderExcluirApareceu a caixa de slide mas fica em branco, não aparece as imagens. O que se pode fazer?
ResponderExcluiro meu tbem ficou assim....
ExcluirO meu tá super pequeno, não sei por que refiz mais de 30 vezes literalmente mas não deu em nada... só faltou o comprimento dele por a largura tava ótima e dava pra ver que tava funcionando..
ResponderExcluirTop! como sempre Elaine, você arrasa e nos ajuda de mais... Obrigada por compartilhar conosco :D
ResponderExcluirelaine, amei, obrigada. Ficou super fashion!!! bjs
ResponderExcluirElaine, me da uma luz por favor !
ResponderExcluirDeu tudo certinho, e quando abro o blog o slide funciona por um segundo, depois as imagens somem e fica apenas a borda preta. O que pode ter acontecido? Segui todos os passos, e usei o tema janela de imagem do blogger, e n tinha modificado ele ainda.
Elaine, pode deixar. Descobri testando que é porque os meus posts de teste estavam se tag. Muito obrigado mesmo assim! Bjs
ResponderExcluir