Slide para blog modelo Rosalie- ideal para exibir posts de uma categoria pré-definida - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Slide para blog modelo Rosalie- ideal para exibir posts de uma categoria pré-definida

Publicado em 04/04/2019

Slide para blog modelo Rosalie- ideal para exibir posts de uma categoria pré-definida
Tempos atrás eu disponibilizei esse tema grátis para Blogger e prometi ensinar o passo a passo do slide que ele exibe. Acabei esquecendo, mas me pediram algumas vezes e hoje, finalmente, trago o tutorial.
Depois de pronto o resultado será assim:


Demonstração do tutorial


Informações importantes para ler antes de iniciar o tutorial


  1. Esse slide é totalmente personalizável, serve para blogs do Blogger e eu testei em todos os temas nativos e/ou personalizados usando uma base nativa. 
  2. Não pode ser usado em modelos Soho, Contempo, Notável e Empório, e nem nos modelos de visualizações dinâmicas.
  3. Não testei em templates baixados da internet.
  4. Não funciona em templates que já tenha slide em seu código.
  5. E caso seu blog use a biblioteca Jquery para rodar algum recurso pode causar conflito; nos meus testes não causou, mas é sempre bom alertar para a possibilidade.
  6. Sempre faça o teste em um blog de testes. Isso é regra, e mesmo quando for instalar no seu blog real faça backup do modelo antes.
  7. O blog de testes onde for testar o slide precisa ser público, ter ao menos 10 posts com imagens e ter o marcador da categoria escolhida inserido nos posts.
  8. O slide é responsivo, portanto ele fica certinho em temas responsivos. Em temas não responsivos o resultado será levemente diferente.
  9. Caso queira exibir o slide apenas na página inicial e não nas páginas internas dos posts veja como fazer isso aplicando as condicionais do Blogger.
Leu tudinho?
Então vamos trabalhar!
Comece acessando a página com os códigos que vamos usar:


Copiar os códigos


Agora vá ao painel administrativo do seu blog de testes e clique na aba Tema.
Aí clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que expandir digite <head> e tecle Enter para localizar.
Está bem no começo do código.
Abaixo de <head> cole o CÓDIGO DAS FONTES.
Salve.

Na barra de busca digite ]]></b:skin> e localize.
Acima dessa tag de fechamento cole o CÓDIGO CSS.
Salve.

Localize agora a tag de fechamento </head> e cole o CÓDIGO JAVASCRIPT acima dela.
Nesse código note a palavra Teste que eu grafei em vermelho.
Troque a palavra Teste pelo nome exato do marcador cujas postagens você deseja exibir no seu slide.
Atenção aí, tá?
Tem que ser a grafia exata do marcador. Ele diferencia acentuação, letra maiúscula, etc...
Se for, por exemplo, Beleza, tem que ser Beleza.
Se escrever beleza não vai dar certo.
Entendeu?

Agora localize a tag de fechamento </body> e cole o CÓDIGO DO PLUGIN acima dela.
Salve.
Estamos terminando.

Localize a tag de fechamento </header> e cole o CÓDIGO HTML abaixo dela.
Salve.
Seu slide está pronto.

Algumas considerações relevantes...


Você notou que eu falei, no tutorial, em tag de abertura e tag de fechamento?
Isso é importante porque muita gente confunde <head> com </head> ou <body> com </body>
Percebe a diferença?
Quando peço pra localizar <head> não serve </head> e vice versa.
Fique atento/atenta!

Cores e fontes são alteradas no CÓDIGO CSS.
Tudo que é seguro alterar eu deixei marcado em capslock no próprio código.
Leia-o e ele te dirá onde alterar para personalizar ao seu gosto.

No CÓDIGO DAS FONTES eu inseri o código da fonte Playfair Display.
Caso queira usar outra fonte do Google Fonts basta trocar esse código pelo código da fonte que desejar usar e aí troque também no CÓDIGO CSS, ok?
Aqui tem a lista de fontes suportadas pelo Google.

Sim, o CÓDIGO DO PLUGIN é imenso e infelizmente quando eu hospedei ele travou, por isso está aberto e não hospedado.
Acredito que isso aconteça porque é uma adaptação de um plugin desenvolvido para Wordpress.
Então, sim, é imenso, mas funciona :)

Leu tudo, entendeu tudo, fez o tutorial e o slide não apareceu?
Pode haver algo em seu blog impedindo a execução ou causando conflito.
Aí não tem jeito, tem que descobrir o que é e optar...


E terminei!
Tutorial grande mas de execução muito simples, basicamente é copiar e colar.
Tenha atenção ao colar os códigos no lugar certo, instale em blog público que tenha ao menos 10 posts (para ver o slide rodar) com imagens e marcador inserido nos posts e tudo dará certo!

Se tiver alguma pergunta que não tenha sido contemplada no post diga aí nos comentários e eu ajudo assim que possível.
Até breve!


Quer baixar o Tema Rosalie?
Clique no botão abaixo e veja como fazer!

template gratuito para Blogger

Baixar o tema gratuito





Nenhum comentário:

Postar um comentário

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…