Slide de postagens recentes- com título dos posts, botão Leia mais e categorias - * Blog Elaine Gaspareto *

Slide de postagens recentes- com título dos posts, botão Leia mais e categorias

em 06/07/2017


Há, aqui no blog, alguns slides automáticos de postagens recentes.
Veja:
Todos os slides publicados no Blog Elaine Gaspareto
Hoje quero compartilhar contigo um modelo bem bonito, que foi adaptado desse plugin Wordpress para ser usado nos blogs do Blogger.
Olha como fica bonito:

Demonstração do tutorial

Quer aprender?
Vem comigo, vou te ensinar como instalar em seu blog!

Antes de começarmos algumas informações bem importantes:
Sempre teste antes em um blog de testes que tenha exatamente o mesmo template de seu blog. Assim você tem mais segurança ao realizar o tutorial em seu blog "oficial".
✔ Para funcionar, o blog onde o slide será instalado (seja o blog real, seja o blog de testes) precisa ser público, ter os feeds ativados no modo Completo, ter ao menos 5 postagens com imagens e ter marcadores inseridos nessas postagens.
✔ Pode acontecer do slide não funcionar em seu blog. Isso acontece se seu template tiver muitos scripts que usam a biblioteca JQuery, ou se existir em seu blog algum outro slide. Então, como cada blog é diferente do outro, tem que testar.
✔ Funciona perfeitamente em todos os templates nativos do Blogger (menos os modelos de visualização dinâmica e os novos templates responsivos, tipo Soho, Comtempo, etc), mas não testei em nenhum template baixado da internet. Cabe a você testar, ok?

Informações conferidas? Vamos trabalhar!


Como instalar o slide de posts recentes no blog?


Para começar acesse a página com os códigos necessários ao tutorial:


Copiar os códigos


A seguir acesse a aba Modelo do blog onde o slide será instalado.
Clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que aparecer digite </body> e tecle Enter para localizar.
Abaixo de </body> cole o CÓDIGO JAVASCRIPT.
Salve.

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

Agora vá até a aba Layout (ou Design, Esquema, é a mesma coisa) de seu blog e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e na caixa que expandir cole o CÓDIGO HTML.
No local onde marquei ENDEREÇO DE SEU BLOG AQUI coloque, claro, o endereço de seu blog, completo, começando com http (ou htpps, se for o seu caso).
Inseriu o endereço? Salve, arraste o elemento de página para onde deseja que o slide apareça e salve a alteração do Layout.

Se tudo deu certo (deu, #temfé) seu slide está aparecendo e agora você pode partir para a personalização de cores, fontes, tamanho, etc...
Vamos lá que vou explicar em linhas gerais o básico dessa personalização.


Como personalizar o slide de posts recentes?


✔ Toda a aparência do slide é definida no CÓDIGO CSS.
Então, coisas como fontes, cores, tamanho são alteradas nesse código.
Deixei o principal marcado no próprio código, então é só ler com atenção, ok?
Se nenhuma mudança for feita o resultado será exatamente como em meu exemplo (slide menor).

Nota importante: sempre mantenha o mesmo valor para altura e largura em todas as marcações.
Você pode usar os tamanhos que desejar, mas sempre mantenha os mesmos valores em cada uma das marcações.
Se você optar por usar as fontes que usei (Source sans pro e Shadows Into Light Two) precisa instala-las em seu template, senão elas não aparecerão.
Aprenda aqui como usar fontes especiais do Google em seu blog.

✔ No CÓDIGO HTML deixei marcado o local onde você coloca o endereço de seu blog. Não esqueça o http.

✔ Também é no CÓDIGO HTML que você altera coisas como a quantidade de posts exibidas no slide e a frase Leia  mais.
A quantidade de posts é definida nesse trecho:

var numposts_gal            = 20;

Para aumentar a quantidade mude o valor expresso em 20.

✔ Caso seu post não tenha imagens aparecerá esse aviso:
✔ Se desejar criar uma imagem personalizada basta criar como desejar e hospedar a imagem. A seguir altere o endereço https://4.bp.blogspot.com/-Ft9vQdRayDs/WV1zjwlcZRI/AAAAAAABXao/fJUArFkK6vg-rBcRuV9pyj0VcxHpYURGACLcBGAs/s1600/SEM-IMAGEM.png pelo endereço da sua imagem.
Esse endereço de imagem está no CÓDIGO HTML.

✔ Para aumentar ou diminuir a velocidade de transição do slide é preciso alterar o script que o faz funcionar. Para isso é preciso baixar o script, edita-lo, hospedar de novo e substituir o link dele no CÓDIGO JAVASCRIPT.


Sobre o script JQuery- como editar e como hospedar


É comum scripts JQuery saírem do ar se o site que hospeda o script cair, ou a conta de quem hospedou o script for deletada, ou o arquivo for deletado, ou se houver excesso de tráfego (já aconteceu com scripts meus) etc...

Então a dica é: baixe o arquivo para seu computador.
Clique no link abaixo e copie o conteúdo da página que abrir.
Cole em um bloco de notas, salve com a extensão .js e a seguir hospede em sua própria conta (Google Sites, Dropbox, etc...)
Arquivos:
http://static.tumblr.com/uoel5vg/p51nl0jk4/easyslider1.7.js

✔ Não sabe como hospedar arquivos?
Veja esses tutoriais e seus problemas siacabaram!



O tutorial ficou longo, mas é porque eu quis "cobrir" a maioria das questões/perguntas que podem surgir.
Ele, na verdade, é bem simples, 3 passos e o slide está lá, lindão e funcionando.
Experimenta e me diz...
E se tiver alguma pergunta que eu não tenha esclarecido no tutorial diz aí nos comentários e eu ajudo, se for possível...

Ah, quer ver o slide em tamanho maior?
Olha que lindo que fica:

Demonstração do tutorial- slide maior



15 comentários via Blogger
comentários via Facebook

15 comentários:

  1. Ficou lindo! Instalado com sucesso. Obrigada Elaine. Bjs.

    ResponderExcluir
  2. Oi Elaine! Quando o blogger apresentou os templates responsivos, escolhi recentemente o Contempo. Como você falou deles neste post (no caso de não ser possível usar este lindo slide - adoro slide! snif!rs). Na verdade, desde que lançaram sempre esperei um post seu sobre o que achou e o que é possível criar neles... Sei que demanda estudo e talvez você já os esteja estudando.
    Sempre com carinho e gratidão a você por nos ajudar. Aprendi e aprendo muito contigo.
    Beijos

    ResponderExcluir
    Respostas
    1. Regina, eu não fiz um post sobre eles porque fiquei decepcionadíssima rsrsr
      Não dá pra personalizar nada, o código não é open source, se quisermos usar é do jeito que está, o máximo que dá é mudar cores e algumas coisas pelo painel.
      Ainda não mexi a fundo, olhei bem por cima mesmo mas por enquanto não penso em usar pra nada. Mas futuramente penso sim em fazer um post mostrando. Deveria ter feito na época mas lembro que eram dias muito tensos aqui e acabou passando...
      bjsssa

      Excluir
  3. No meu não deu certo, ficou pequenininho e mesmo aumentando como você falou, não muda o tamanho do meu.

    ResponderExcluir
    Respostas
    1. Ana, qual o endereço de seu blog?
      Se você fez tudo como está no tutoriall e ainda assim não deu certo pode ser algum conflito em seu template...

      Excluir
  4. Elaine, boa tarde, estou tentando instalar este slide em meu blog, porém no slide as imagens entram em conflito e ficam "invadindo" o espaço do outro post do slide, além de não aparecer os botões no local certo.
    Pode me dar uma luz? Meu blog:
    https://laricerqueira.blogspot.com.br/

    Obrigada

    ResponderExcluir
  5. Oi Elaine, tudo bem? O slide está funcionando perfeitamente, mas, quando colocou o mouse em cima dele, aparece uma borda cinza no lado esquerdo e no topo. Não consigo tirar isso. Obrigada <3

    ResponderExcluir
    Respostas
    1. Dayane, qual o endereço do blog? Talvez seja algo relativo aos gadgets do template ou até mesmo a área onde o slide está...

      Excluir
  6. Olá, Elaine! Como sempre, vc arrasando! Esse slide é lindo e charmoso! Fiz e deu certinho! Gostaria de colocar um background nele com uma imagem delicada ao fundo! Vc poderia dar uma dica sobre isso! Obrigada, bjs!

    ResponderExcluir
    Respostas
    1. Erica, eu nunca testei colocar fundo, até porque a proposta do slide é ser clean, mas se quiser experimentar pode tentar em background. Mas como eu disse, nunca testei :)
      bjssss

      Excluir
  7. Tem como colocar o slide somente para mobile (celulares, tablets) no blogger?

    ResponderExcluir
    Respostas
    1. Não porque ele não é responsivo...

      Excluir
    2. E se for responsivo? Tem como fazer?

      Excluir
    3. Este, especificamente, não. Mas estou trabalhando em um responsivo, se der certo eu posto em breve...

      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.
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…



Visualizações

Contando...

Dias online
Postagens
comentários