Tempos atrás eu ensinei aqui no blog um slide praticamente igual a este que vou mostrar hoje, recorde:
Slide de posts recentes com botão Leia mais, título dos posts e categorias
Ele é lindo, funciona perfeitamente mas tem o problema de não ser responsivo.
E a gente sabe que atualmente muitos dos acessos dos blogs são feitos via dispositivos móveis, o que significa que o design do seu blog precisa ser responsivo ou ao menos adaptado aos dispositivos móveis.
Mas esse slide que ensino hoje é responsivo, e portanto cumpre essa função.
Olha que lindo:
Vamos aprender?
Antes de começarmos, 4 dicas:
- Sempre faça o teste em um blog de testes que tenha ao menos 5 posts com imagens grandes. Evite realizar experimentos em seu blog oficial, ok?
- O blog onde for testar o slide precisa ser público; blogs privados não dão certo.
- O blog precisa ter ao menos 5 posts com imagens grandes, e ter marcadores nesses posts.
- Caso seu blog tenha outro slide ou algum widget que use a biblioteca JQuery para rodar pode acontecer dos scripts se anularem e aí nada funcionará. Então, teste sempre em um blog que não tenha muita coisa instalada e sobretudo, nenhum outro slide ou script em JQuery.
Como instalar o slide de posts recentes responsivo no blog
Dicas anotadas? Acesse a página com os códigos necessários à execução do tutorial:
A seguir acesse o painel administrativo do blog onde deseja instalar o slide e clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.
Agora, na barra de busca, digite </head> e localize.
Acima de </head> cole o CÓDIGO JAVASCRIPT.
Salve.
Localize </body> e acima disso cole o CÓDIGO DO PLUGIN.
Salve.
Sim, é tudo isso mesmo, um bloco bem grande de código.
Infelizmente, por ser um plugin adaptado de um original Wordpress. eu não consegui (ainda) hospedar em um host e fazer funcionar.
Só funciona assim, colando o plugin inteiro. Mas funciona, e é o que importa, né?
Estamos quase no fim.
Vá ao modo Layout do blog e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e na caixa que expandir cole o CÓDIGO HTML.
Salve, posicione imediatamente abaixo de seu cabeçalho e salve a organização.
Se tudo deu certo (#temfé) seu slide aparecerá certinho.
Dicas extras muito importantes
A primeira exibe os posts de determinada categoria e a segunda opção exibe os posts recentes gerais.
Caso você opte por exibir posts de determinada categoria precisa editar o CÓDIGO JAVASCRIPT na parte que aparece assim:
// Enter the posts labels here
cat1 = 'CATEGORIA AQUI';
Onde está grifado em vermelho coloque a categoria cujos posts quer exibir, com a grafia exata de como ela aparece em seu blog.
Exemplo: se eu estivesse usando o slide aqui no blog e quisesse exibir os posts da categoria Dicas para blogs escreveria exatamente assim, que é como essa categoria é grafada.
Entendeu?
2- Se, contudo, optar por exibir os posts recentes gerais apague o trecho marcado em vermelho no CÓDIGO JAVASCRIPT.
3- Caso seu template não seja responsivo você ainda assim pode usar esse slide e inclusive pode configurar seu template para exibir o slide na versão mobile.
Clique no link abaixo para ver como é simples fazer isso:
E terminamos!
Se você tiver alguma dúvida que não tenha sido sanada no tutorial diga nos comentários e eu ajudo se for possível.
E não esqueça de curtir ou compartilhar o post!
Me ajuda muito, muito!!!
Elaine, suas dicas estão bombando, continue mantendo o foco nessas palavras chaves que só dá você nas tops pesquisadas do google rsrs... Nunca comentei, porém sempre te acho nas pesquisas do google, amo blogueiros/a que utilizam a plataforma do blogger e que realmente sabem se esforçar nas técnicas de SEO, estou adorando suas dicas e tutoriais...
ResponderExcluirBoa tarde. Passando, lendo, vendo, apreciando, gostando, e deixando votos de um Natal Muito feliz, extensivo a toda a família e amigos.
ResponderExcluir.
hoje: *Teus lábios, de amor, queimando*
.
Olá Elaine, coloquei este recurso no meu blog e ficou bom com excessão de uma caixa branca no meio da imagem. Sabe me dizer como excluir esta caixa branca e deixar apenas a imagem?
ResponderExcluirObrigado!
Eu não testei mas voce pode experimentar trocar o comando background: #fff; por background: transparent;
ExcluirLegal, deu certo.
ExcluirVocê poderia me dizer qual é a lógica para aparecer o título acima da caixa onde tá escrito "leia o post"? Ficou bom mas tem alguns títulos que aparecem no slide que não condizem com a imagem. Será que ele puxa dos marcadores? Tem como eu tirar aquele título e deixar apenas a caixa escrito "leia o post"?
Sim, vc pode tentar definir a cor dos marcadores como transparent mas eu acho que seu título não aparece porque seu slide está posicionado na seção Entre colunas.
ExcluirO ideal é posicionar abaixo do header... está aparecendo só o marcador, sendo que se posicionar certo vai ficar como em meu exemplo.
É que o template que uso não me deixa posicionar abaixo do cabeçalho.
ExcluirO que queria descobrir é qual critério ele usa pra selecionar o título, por exemplo, tem um post sobre a Tesla e uma imagem da empresa mas o texto que aparece é "Apple". No outro tem a imagem de um drone mas aparece escrito "ANAC". Eu queria tirar esse testo e deixar só a caixa "leia o post".
Eu acho que é esta parte que faz aparecer o texto, confere?
.post__description p a {
color: #fa9ab3;
font: normal normal 13px 'Rock Salt', sans-serif;
font-size: 13px !important;
text-transform: none;
letter-spacing: 4px;
}
.post__description p a:hover {
color: #000;
}
.post__description h2 a {
color: #000;
}
.post__description h2 {
margin-bottom: 2px;
padding-top: 10px;
font: normal normal 22px 'Montserrat', sans serif;
font-size: 22px !important;
line-height: 1.5;
text-transform: none;
letter-spacing: 3px;
}
.post__description h2:hover {
color: #fa9ab3 !important;
Sim, é por aí.
ExcluirTem que ir testando.
Uma dica é mover o slide para cima da área dos posts e ver como fica.
Ele captura o título sim, o seu não aparece por estar o slide no lugar errado, Entre colunas.
Por isso só aparece o primeiro marcador de cada post
Mudei pra cima da área de posts e agora os títulos aparecem certinhos mas ainda ficam aparecendo alguns dos marcadores antes do texto.
ExcluirPeço desculpas se estiver perturbando mas achei suas dicas excelentes e até agora você foi a que fez posts mais fáceis de serem aplicados.
Sabe qual é o comando pra deixar a caixa com 50% de transparência?
ExcluirNesse slide isso não é possível.
ExcluirBP milhão eu consegui fazer aparecer no meu blog mudando área do meu layout no código Html você aperta ctrl + f e digita:
Excluire troca por esse código:
aí na área de layout você poderá adicionar o gadget do slide junto ao cabeçalho, pois você alterou a configuração que deixava só adicionar um widget na área do cabeçalho.
Espero ter ajudado.
PS: Elaine adoro seu blog, muito obrigada pelas dicas!!<3
oi amore, queria subir ele mais para cima, como faço isso ...
ResponderExcluirBell, ele aparece tão embaixo porque há muito espaço sobrando entre ele e seu logo. Reduza o espaço e ele subirá.
Excluirbjsss
Olá, seu tutorial me ajudou DEMAIS! O primeiro que realmente deu certo e que eu gostei do resultado. Muito Obrigado, seu trabalho é extraordinário :)
ResponderExcluirMarcos, obrigada pelo feedback. Eu ainda não havia testado em templates nativos responsivos Blogger, então obrigada por usar e confirmar que funciona!
ExcluirPerfeito !
ResponderExcluirOlá Elaine! Como posso alterar o tempo de transição do slide? Está rápido demais. :/
ResponderExcluirOlha, você pode tentar, no código javascript, nos trechos que aparecem 500ms alterar para mais ou para menos, mas eu não testei. Acho que a transição não pode ser lenta demais senão ninguém verá mais que uma imagem...
ExcluirMas faça testes, se der certo nos diga...
bjssss
elaine e se eu quiser deixar so os post recentes?
ResponderExcluirTem jeito sim, releia o tutorial, no finalzinho tem as dicas extras que explicam como fazer isso :)
ExcluirOi!! No meu não aparece as setas para frente e para trás. Help!! Obrigada :)
ResponderExcluirSara, qual seu blog? Sem ver não tem como ajudar, seu perfil é bloqueado....
ExcluirVocê poderia me ajudar?
ResponderExcluirGostaria de que o slide apresentado ficasse igual a este http://www.remington.com.br/
Talvez só fazer uns ajustes no tamanho. Mas como faço para deixa-lo do mesmo tamanho ou que se ajusta automaticamente?
Vinicius, esse é outro slide, não tem como deixar igual.
ExcluirSeriam outros códigos, outra formatação...
Aqui no blog tem um slide de destaques responsivo, talvez você consiga adaptar:
https://www.elainegaspareto.com/2018/01/slide-de-destaques-responsivo-para-blogs.html
Oks vou tentar adaptar, Obrigado!
ExcluirVocê me salvou!!! Passei dias testando vários outros e o que veio com o tema que comprei não funcionou, tentei suporte com o criador e nada. Que alívio... <3
ResponderExcluirOlá Eliane, estou eu configurando o template Noelle no meu blog oficial e qual minha surpresa?? O comportamento no blog de testes é diferente no oficial. O meu logo em png ficou desfocado e enorrrme... Ao baixar o template, o slide apareceu automaticamente (isso não aconteceu no de testes e estranhei porque no tuto aparecia...), mas só que aparece com uma imagem fixa e não as imagens do post. Se puder dar um help no slid... Desde já obrigada
ResponderExcluirRegina, releia o tutorial do slide, com certeza vc esqueceu algum detalhe...
ExcluirQuanto ao logo precisa alterar o valor na área do cabeçalho, para o tamanho exato do seu logo. No post onde ensino sobre responsividade explico isso, tá na Série Como tornar responsivo um template nativo do Blogger...
Oi Elaine, não expliquei bem o que aconteceu com o slide. Ao baixar o Noelle no blog oficial - ele entrou automaticamente -, só que aparecendo uma imagem fixa. Depois de reler, percebi que faltoU o HTML/JAVASCRIPT, mas ao adicionar ficam 2 slides! (https://reginabomfim.blogspot.com.br). No blog de testes, o slide não apareceu, tive que configurá-lo e deu ok. Suponho, no meu mui poco conhecimento que talvez o problema todo é o template Simple (o que estava antes). O Noelle tem como base o Viagem. Meu blog é basicão de tudo. Não estou conseguindo enxergar onde estou errando. Grata.
ResponderExcluirRegina, pra mim tá normal, só a data dos posts que precisa ser ajustada no formato correto. Slide funcionando, tudo ok.
ExcluirDeu certo afinal?
bjssss
Elaine, fiz as alterações que pediu lendo o tuto da responsividade e deu certo. Só que lendo o tutorial de como editar o cabeçalho, entendi que usar apenas a imagem em PNG prejudica o blog sob o ponto de vista do SEO. Minha proposta de logo é bem simples, queria que ficasse até menor do que ficou (fiz no Paint). Não estou conseguindo entender o modo como trabalha com o cabeçalho nessas duas etapas. Vou continuar tentando até entender. Grata se puder me orientar.
ResponderExcluir(meu blog de testes: https://deliciadeideias.blogspot.com.br)
Gostaria de saber se tem como deixar ele da largura máxima do blog?
ResponderExcluirDankelvis, ele é responsivo, portanto vai sempre assumir a largura útil da área onde for inserido.
ExcluirSe vai ocupar a largura total da página depende de seu template.
No template de testes a área útil é aquela, se fosse aqui em meu blog seria a largura total de fato, portanto depende de seu template...
O tutorial está ótimo! só fiquei com uma dúvida: há como configurar a quantidade de postagens a serem exibidos no slide??
ResponderExcluirSim, altere o valor 9 desse trecho:
Excluirnumposts1 = 9
pelo valor que desejar e salve.
Estou tentando usando template Clarissa e o meu slider não aparece. Fiz 5 postagens com imagens grandes, o blog esta público, coloquei o HTML e não aparece. Não sei onde estou errado.
ResponderExcluirRefiz o tutorial 2 vezes :(
Cilene, o template Clarissa já tem o slide instalado. Talvez seja por isso que não deu certo.
ExcluirVc colocou o nome do marcador cujos posts deseja que o slide exiba no trecho que especifiquei no tutorial?
Onde está "Categoria aqui"?
Elaine, não esta sendo exibida a imagem do meu post e sim de um Kindle.
ResponderExcluirTem como arrumar?
Olha o blog...
https://mementomoriporkzmiro.blogspot.com/
Vc está usando o Tema Noelle, não é?
ExcluirEle já tem o slide adicionado, vc adicionou de novo e daí o erro.
Experimente baixar de novo o tema em um blog de testes, creio que dará certo.
Da sempre um erro eu copio tudo certinho e coloco na tag onde diz no tutorial ,porém sempre aparece um erro .Para colocar o plug do menu suspenso
ResponderExcluirErica, o blog onde quer colocar o slide tem ao menos 5 posts com imagens, marcadores e título?
ExcluirQual o blog?
Olá, não consegui fazer funcionar o slide, vc tem alguma sugestão do sobre o que poderia fazer?
ResponderExcluir