Veja:
Hoje quero te mostrar esse, que adaptei de um original Wordpress:
Trata-se do slide de postagens recentes mais fácil de instalar de todos os tempos!
Sério, é muito simples!
E tem outro grande atrativo para esse slide: você pode escolher se ele vai exibir todos os posts de seu blog por ordem de publicação ou pode, se preferir, definir que ele exiba apenas os posts de determinada categoria.
Vamos aprender?
Como instalar slide de postagens recentes no blog
Para começar você precisa definir se deseja exibir todos os posts ou apenas os posts de determinado marcador.
Se desejar exibir os posts recentes por ordem de publicação não precisa alterar nada no código que vai copiar logo mais.
Se, porém, desejar inserir o slide para que ele exiba os posts de determinado marcador então substitua, no código, o trecho que marquei em azul por este trecho:
Para copiar selecione o conteúdo da caixinha e copie o conteúdo.
Coloque no local indicado o endereço de seu blog e o nome de seu marcador. Só isso.
Mas se quiser mostrar todos os posts basta copiar o código que vou disponibilizar abaixo e pronto!
Configurando a aparência do slide
Agora vamos ao painel de seu blog.
Clique na aba Layout e na página que expandir clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da janela que abrir cole este código:
No código estão, em CAPSLOCK, todas as informações acerca das áreas editáveis, como cores e fontes, e tamanhos.
Leia atentamente o código, ele te dirá o que fazer, o que pode ser alterado.
A seguir você precisa escolher as cores que mais combinam com seu blog.
Acesse essa página e selecione suas cores pelo código hexadecimal.
Agora vem a parte mais importante: onde está escrito ENDEREÇO DE SEU BLOG coloque, claro, o endereço completo de seu blog, começando pelo http.
Salve, arraste para onde deseja que o slide fique (o melhor lugar é acima da área dos posts) e salve as alterações do Layout.
Veja se está ok em seu blog.
Se tudo deu certo o slide estará aparecendo e exibindo seus posts na ordem em que foram postados, sejam todos os posts seja por categoria.
Fiz tudo e não apareceu o slide
Leia o tópico abaixo, talvez a sua solução esteja nele!
- Verifique se seu blog é público, se tem os feeds ativados e se a distribuição do feed é completa (Sinopse ou Até jumpbreack não dá certo) e se colocou o endereço do blog no lugar correto, sem apagar as aspas e começando com http.
- Verifique se o endereço do blog está correto, se não esqueceu nada. Muitas vezes esquecemos uma letrinha e aí não dá certo mesmo.
- Caso seu blog possua outro slide pode haver conflito e nesse caso é questão de escolher qual deseja manter.
- Outra possibilidade é que seu blog já tenha a biblioteca JQuery instalada. Aí precisa excluir, no código do slide, esse trecho: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
- Seu blog precisa ter posts, claro, e esses posts precisam ter marcadores inseridos.
- Verifique se não tem nenhum outro gadget ou hack que possa conflitar com o slide. Para tirar qualquer dúvida tente instala-lo em um blog de testes, como eu fiz no meu exemplo.
Uma última dica: leia e releia, tanto o tutorial quanto o código em si, até se certificar de haver entendido tudo.
Daí é só ter paciência, dedicação e um bom tanto de prática pra conseguir sem erros!
Acredite: nem sempre a gente consegue de primeira...
Acredite: nem sempre a gente consegue de primeira...
Enjoy!
Dias online
Postagens
comentários
Olá Elaine,deu certo!!! Só não consegui ajeitar a largura, mas já gostei do resultado!!! Super obrigada e muito sucesso pra você. Bjs e tenha uma linda semana!
ResponderExcluir#prevBtn, #slider1prev{left:-30px !important;}
Excluir#nextBtn, #slider1next{left:630px !important;} no meu blog, eu estava com dificuldade em ajustar as aquelas barras de next e prev... então ajustei com essta parte do codigo... veja aqui allmusicstar4ever.blogspot.com
Olha Ademar, valeu carinha...fiquei horas tentando tirar o next prev e nao conseguia de jeito nenhum. graças a esse codigo ae, sumiu as setas. Só não sei onde foi parar haha.
ExcluirAbraço e sucessso.
Incrível, Elaine. Você sempre nos surpreendendo e agraciando com seus conteúdos excelentes.
ResponderExcluirOlha, vou te contar que abri um sorrisão quando vi que você tinha me adicionado no G+, e um maior ainda quando seguiu meu blog!
Espero que não tenha infringido nenhuma regra em relação ao uso do template e dos tutoriais, rs. Não que você precise de divulgação em um blog pequeno como o meu, porque seu blog já é um sucesso, mas com certeza vou linkar diversas coisas que encontro aqui e que são super úteis. Mais uma vez e sempre, muito obrigada por compartilhar seu conhecimento ♥
Kemmy, eu que agradeço, especialmente a divulgação.
ExcluirAjuda demais, pode crer!
beijossss
Boa dica!
ResponderExcluirBeijos.
Otimo post!
ResponderExcluirwww.sempremorenaantenada.blogspot.com
Poxa o meu funcionou, mas só ficou aparecendo o primeiro post, não ficou passando o slide, sabe como resolver?
ResponderExcluirDany Guimarães| Legalmeente Ruiva | Legenda da Trindade
www.legalmeenteruiva.com
Eu não consegui ver este modelo mas estou procurando se tem o tutorial do slide que fica acima deste vermelho. Um que, ao passar o mouse, fica rosinha. Eu amo e queria usar aquele. Quero trocar o do meu blog por um modelo mais moderno.
ResponderExcluirBeijos e bom FDS!
Vera, tem tutorial aqui no blog, não lembro o nome, mas tem.
ExcluirDá uma olhada na categoria dicas para blogs, é do ano passado, eu acho :)
bjssss
Fiz tudo certinho mas não deu certo só apareceu a primeira postagem e o fundo vermelho sendo que eu coloquei apenas tons de rosas e não tem seta, se puder resolver te agradeço.
ResponderExcluiraconteceu o msm com o meu !
ExcluirMeninas, não tenho como ajudar porque não sei exatamente o que vocês fizeram, não conheço os códigos dos seus templates e nem sei quais scripts já haviam neles.
ExcluirSugiro relerem o tutorial, e ver se seguiram os passos certinho.
Também experimentem em um blog de testes limpo.
É assim, tentar até achar o ponto de ajuste.
bjssss
Elaine de Deus!!! Gostei muito do slide automático e já coloquei no meu blog, estou ensaiando voltar a blogar e comecei por essa mudança legal no visual. Obrigada!!!
ResponderExcluirno meu caso eu nao quero que ele apareca automatico eu quero por um slide definido tem com ?
ResponderExcluirTayenne, esse slide, não.
ExcluirMas tem outros aqui no blog que são de destaques, veja na categoria Slides...
bjsss
Fiz o tudo certinho, mas só aparece uma tela verde. Não aparece nehum post e nem nada, só um quadrado (espaço do slide) verde :(
ResponderExcluirNicoly, não pode ter outro slide no blog, e nem muitos scripts JQuery, senão causa conflito.
ExcluirAmei esse slide e uso faz algum tempo!
ResponderExcluirMas, recentemente ele parou de funcionar.
Creio que seja problema no servidor onde foi hospedado o código...
Você tem os arquivos?
Maxwell, recoloque os códigos, eu hospedei de novo os arquivos.
ExcluirE recomendo que você baixe os scripts, salve e hospede em uma conta sua, e aí troque os endereços dos arquivos.
Assim evita que eles saiam do ar por excesso de tráfego.
Fiz o recomendado, mas acho que não consegui ou errei ao fazer. Existe algum tutorial aqui explicando? Acessei os 2 endereços que terminam com '.js' e baixei em 'salvar como...', fiz upload pelo Drive, Dropbox e 4shared. Mas, os links que eles compartilham parecem não servir para leitura do código. Aparecem apenas como download. O que posso fazer? Somente os seus funcionam, mas acabam ficando fora do ar por excesso de tráfego. Desculpe, mais uma vez, o incômodo...
ExcluirMaxwell, ao salvar os arquivos precisa lembrar de salvar na extensão .js
ExcluirSe não fizer isso eles serão apenas texto e não servirão...
elaine, eu queria retirar as setas laterais, pois como aumentei o tamanho do slide as setas ficaram fora do enquandro do slide, e pelo fato que eu aumentei o tamanh do slide para 1460px x 450px as imagens estão bem pequenas, como faço para as imagens ficarem do tamanho do slide?
ResponderExcluirGabrielle, para retirar as setas apague o endereço delas.
ExcluirAssim:https://lh5.googleusercontent.com/-j28HsFjcG30/VV3dCV-DpdI/AAAAAAAARdA/TgQMuUyFkpE/s64-no/arrowleft.png
e
https://lh3.googleusercontent.com/-pyCcEr7m8OU/VV3dCYWdUKI/AAAAAAAARdE/nkwTgozDdYg/s64-no/arrowright.png
bjssss
Elaine, fiz as alterações de cores de acordo com o meu blog e o slide parou de funcionar e o carregamento da página ficou pesado. Ai, estava tão feliz...rsrs. O slide modelo responsivo mais recente que deu, funcionou no blog de testes e não no oficial. O slide do blog de testes é que gosto mais, na verdade. Beijos se puder me dar um help (http://reginabomfim.blogspot.com.br)
ResponderExcluirRecentemente fiz um backup de postagens que não era pra fazer. Era pra fazer só do Template. Aff ainda aprendo.
Regina, eu não sei o motivo de não funcionar, não tenho como saber.
ExcluirCada template tem características próprias, e também pode ter algo que esteja causando conflito.
Sobre a página ficar mais pesada, sim, fica mesmo, pois tudo que colocamos no blog tem um peso
Então, é questão de optar sempre :)
bjsssss
Oi Elaine tudo bem? tentei colocar vários slides que você ensinou, mas nenhum deu certo no blog oficial asnossasmanias.com.br, apenas um funcionou mas só no blog de testes, enfim, vou continuar tentando, obrigado por partilhar seu conhecimento.
ResponderExcluirAmeii!! Fiz e ficou ótimo no meu, o bom é que vai mostrando as postagens todas, inclusive as mais antigas que ficam escondidinhas. O tutorial dá certinho, é só fazer com atenção, valeu Elaine.
ResponderExcluirmeumundocordevida.blogspot.com
Este comentário foi removido pelo autor.
ExcluirEste comentário foi removido pelo autor.
ExcluirOlá elaine, pode me dizer como eu faço para mover aquelas duas barrinhas, as quais ficam as setas, para esquerda ou para direita
ResponderExcluirJoão, está no código, em vermelho. Apague e elas sumirão.
ExcluirOi Elaine, Não consigo colocar o slide nas pastagens, ele fica perto, o que estou fazendo de errado? Esse link que você passou eu preciso modificar ele?
ResponderExcluirFaty, não entendi a pergunta. Muito perto de onde?
ExcluirOlá Elaine, boa tarde!! Obrigado pela grande ajudar que nos deu! Porém necessito de uma ajuda! As fotos da postagem estão ficando apenas na metade do Slider, como faço para que ela ocupe toda a área? E mais, como diminuo a altura da área de resumo, uma vez que deixarei apenas o título?
ResponderExcluirOlá!
ExcluirTudo o que pode ser alterado sem causar erro deixei marcado no código, em letras maiúsculas. Lá, no código, você encontrará todas as informações de como editar.
Atenciosamente
Ola Elaine, eu já tentei de todas as maneiras colocar um slide no meu blog e não consigo, ele fica marron, já fiz no blog de teste e funciona, você teria alguma dica do que eu poderia fazer? Meu blog é: https://origensdocinema.blogspot.com Bjsss
ResponderExcluirFaty, pode haver algo em seu blog que esteja causando conflito...
ExcluirOlá, tudo bem? Como faço para aumentar a altura das imagens do slide? Já fiz de tudo e não consegui. Desde já agradeço a atenção.
ResponderExcluirFiz, ajustei, deixei do jeito que eu queria, só que ele está aparecendo em todas as páginas do blog, teria como aparecer apenas na página home?
ResponderExcluirDeniezio, tem um tutorial aqui no blog que ensina como fazer isso.
ExcluirProcure por Condicionais do Blogger e está lá.
Atenciosamente
Obrigado irei procurar.
ExcluirNossa, muito obrigado, deu certíssimo.
ExcluirObrigado mesmo...
Excelente Slider... Realmente muito simples... Só fiquei triste porque não funciona em Https, somente em Http... Ai no caso no meu blog não deu certo... :/
ResponderExcluirSammyr, funciona sim. Talvez tenha algo em seu blog causando conflito...
ExcluirNo meu também só funciona em http, em https fica apenas o espaço vazio, teria alguma solução?
ExcluirPutz o meu ficou todo verde
ResponderExcluiro que será que fiz de errado, não apareceu nada só chapadao verde.
Olá elaine, Primeiramente parabéns, o meu ficou show, mais só apareceu uma postagem e nãao apareceu as setas, o que houve ?
ResponderExcluirAmei esse modelo, deu certo, mais infelizmente no modelo responsivo não deu certo.
ResponderExcluirQueria um modelo igual a esse responsivo alguém me indica um ?!
Daiane, experimente esses:
Excluirhttp://www.elainegaspareto.com/2016/09/slide-de-postagens-recentes-para-blog.html
http://www.elainegaspareto.com/2015/09/slide-de-postagens-recentes-responsivo.html
Olá, o endereço para verificar o código das cores está desatualizado, contudo, encontrei o link abaixo:
ResponderExcluirhttp://erikasarti.net/html/tabela-cores/
Esse aqui é o endereço do meu Blogger, quero que você der uma passadinha por lá.
https://fernandovilhena.blogspot.com.br/
muito Obrigado Elaine, consegui
ResponderExcluircoloquei no meu blog: http://www.palavrareveladaoficial.com.br/
não consigo fazer to tentado o slide mas ele ica vermelho não aparece e o código que ta no texto da pagina mas eles não copia, 4kids.yyo.us
ResponderExcluirEu acredito que não funcione porque o template que vc usa, um dos novos responsivos do Blogger, não aceita.
ExcluirNão testei mas creio que seja isso...
Boa noite segui os passos e apenas apareceu um fundo vermelho sem as imagens, pode me ajudar, te enviei um email no contato do blog la diz que aparecia um fundo verde quando fiz seguindo seus passos apareceu um fundo vermelho.....
ResponderExcluirComo eu disse na resposta ao comentário acima do seu caso vc use um dos novos templates do Blogger (Emporio, por exemplo) não vai funcionar pois o template não aceita. Não sei o motivo, mas percebi que em nenhum dos modelos novos responsivos esse e a maioria dos slides não funciona.
ExcluirExperimente em um outro modelo, Simples ou Viagem por exemplo, creio que dará certo.
Tem como colocar um texto em vez de fotos e quando eu coloco uma foto ela fica no topo tampa tudo e n aparece as foto e as setas tem como me ajudar?
ResponderExcluirNesse slide não, ele só captura imagens.
ExcluirPara dizer se sei como resolver o problema que menciona preciso ver o blog com o slide.
Qual o endereço?
O meu ficou Verde!
ResponderExcluirOi, tenho uma dúvida, talvez você possa me ajudar. Eu já criei o blog com uma template com slides configurados. Nos códigos html eu mudei o texto e os links. Mas não consegui alterar as imagens que circulam.
ResponderExcluir