Slide simples para exibir banners de parceria (ou outros) no blog - * Blog Elaine Gaspareto *

Slide simples para exibir banners de parceria (ou outros) no blog

Publicado em 04/07/2018

Tempo de leitura:

Slide simples para exibir banners de parceria (ou outros) no blog
Dia desses uma amiga e leitora do blog me perguntou se havia como inserir um slide que mostrasse os banners de parceiros na lateral do blog.
No caso específico dela são editoras parceiras, mas podem ser quaisquer banners: de parcerias, de outros blogs, de posts do próprio blog, de redes sociais, etc...
Eu disse que sim, há jeito e é bem simples. E justamente isso é o que vou compartilhar contigo hoje, um slide simples para colocar na lateral, no rodapé, acima da área dos posts ou onde mais você desejar.
Depois de pronto o resultado será este:


Demonstração do tutorial


Como colocar o slide no blog- passo a passo completo


Antes de mais nada preste atenção às minhas recomendações e explicações gerais:
  1. Caso já exista algum slide em seu blog este pode não vai funcionar pois ele pode entrar em conflito com outros slides;
  2. Se existir em seu blog algum outro recurso que use a biblioteca Jquery pra funcionar precisará testar antes; em alguns casos dá certo e em outros não.
  3. Antes de mais nada é preciso que você tenha suas imagens previamente prontas. As do meu blog de testes medem 400px de largura por 400px de altura e você pode definir no código do slide o tamanho de ezibição das imagens;
  4. Se seu objetivo é coloca-lo na coluna lateral recomendo reduzir o tamanho das imagens para ficar mais leve. Creio que 400x400 seja um bom tamanho, e todas as imagens do slide devem ter o mesmo tamanho pra evitar saltos.
  5. Todas as áreas editáveis estão marcadas no código. Se desejar alterar algo mais precisará ter um certo conhecimento em CSS e aí é por sua conta.
  6. Esse slide funciona nos novos modelos responsivos nativos do Blogger tipo Soho, Empório, etc.
  7. No código estão os créditos originais do desenvolvedor e os meus. Não apague.
Informações dadas e assimiladas?
Vamos inserir o slide, que é a coisa mais simples do mundo!
Acesse o painel de seu blog e clique na aba Layout.
A seguir clique em Adicionar um gadget e dentre as opções escolha HTML/JAVASCRIPT.
Na caixa que expandir cole este código:


Copiar o código


Onde marquei LINK AQUI coloque o endereço web para onde a imagem vai direcionar (o link do site do parceiro, por exemplo) e onde marquei URL DA IMAGEM AQUI coloque o endereço da imagem do banner.
Onde está Descrição da imagem aqui coloque a descrição que desejar, o nome do parceiro ou apague se não quiser texto nenhum.
Faça isso em todos os campos e salve.
Arraste para onde deseja que fique e salve a alteração do Layout.
E é só isso.
Simples, né?


Dica bônus: como hospedar imagens usando o próprio Blogger


Como colocar o slide no blog- passo a passo completo

Faça assim: crie um post de rascunho em seu blog ou crie um blog de testes só pra isso.
Abra o editor de postagens (ali onde você escreve seus posts), carregue as imagens que precisa hospedar, deixe-as em Tamanho original.
Pare o mouse sobre cada uma delas e clique sobre a imagem com o botão direito do mouse.
Selecione (no Chrome) Copiar endereço do link.
Essa é a url hospedada de sua imagem.
Os posts de rascunho podem ser apagados depois, as imagens permanecem.
Elas só desaparecerão se sua conta for excluída.


Gostou do tutorial?
Aproveita que estamos papeando e curta a postagem, isso ajuda muito o blog!





6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Elaine, sabe a caixa que tem no blog com demonstração do resultado do tutorial? A que está "assine o feed do blog". Já tem algum tutorial aqui ensinando fazer parecido?

    ResponderExcluir
  2. Oi Elaine!
    Eu gostaria que o slide ocupasse todo o preenchimento do blog, como faço? sempre fica sobrando um espaço na esquerda.

    ResponderExcluir
    Respostas
    1. Se sua sidebar é maior que 300px de largura basta aumentar o tamanho das imagens para a largura da área que deseja que o slide ocupe, aí não sobrará espaço...
      Para mudar o tamanho de exibição das imagens localize dimensions: [250, 250],
      e troque os valores 250 pelo valor que deseja, lembrando que o primeiro se refere a largura e o segundo a altura e não precisam ser iguais (mas eu gosto mais)

      Excluir
  3. Elaine, como faço para aumentar os tamanhos das imagens?

    ResponderExcluir
    Respostas
    1. Respondi acima em negrito, troque os valores que estão no código conforme expliquei na minha resposta anterior :)

      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…