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





2 comentários

  1. OOii queria agradecer muito você por disponibilizar, por toda a ajuda que dá, coloquei no meu blog, ficou lindo, muito agradecida, apenas meu slide ficou duplicado, to tentando resolver mas ainda não sei como, como eu poderia? Já aconteceu antes?

    ResponderExcluir
    Respostas
    1. Raianny, qual o blog?
      Não tem 2 códigos do slide?
      Está duplicado como, exatamente?

      Excluir

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…