Slide de destaques lindo e cheio de efeitos para modernizar o blog! - * Blog Elaine Gaspareto *

Slide de destaques lindo e cheio de efeitos para modernizar o blog!

em 18/09/2017


Há, aqui no blog, vários tutoriais que ensinam como colocar no blog os mais variados tipos de slide.
São slides de posts recentes, slides de destaques, etc...
Hoje quero te mostrar esse, que é uma adaptação de um original Wordpress.
Veja:


Demonstração do tutorial


Bonito, né?
Em minha opinião um slide de destaques é mais útil do que o slide de posts recentes. Ele serve para destacar aquele post importante, destacar banner de parceiros ou anunciantes, ou ainda destacar as categorias/assuntos mais relevantes do blog.
Veja lá no meu blog de testes as várias opções de uso de cada aba do slide.
Quer ter em seu blog?
Abaixo segue o passo a passo que mostra como instalar e como configura-lo para seu blog.
Vem comigo!


Como adicionar o Slide de destaques no blog?


A instalação desse slide é a coisa mais fácil do mundo! Juntei todos os códigos, tanto o Código CSS quantos os códigos HTML e os scripts javascript num único bloco de códigos, para simplificar ao máximo a instalação.
Acesse a página com o código completo do slide, copie todo o código e cole em um post de rascunho (ou bloco de notas) para facilitar a edição:


Copiar o código


Como você viu no código do slide ele tem, na primeira parte,  linhas destacadas em CAPSLOCK, que indicam as áreas editáveis do slide relativas às cores e fontes.
Leia o código, ele te dirá exatamente o que e onde alterar para que as cores combinem com seu layout.
Essa parte é de sua escolha, se não quiser alterar nada, fica a seu critério. Se não mexer em nada as cores serão as do meu exemplo.
As cores sempre são alteradas trocando o código hexadecimal delas pelo código hexadecimal da cor de sua escolha. Aqui tem uma tabela de cores e códigos, caso precise.

A segunda parte do código é o CÓDIGO HTML e essa parte é indispensável que você altere.
Como sempre, leia o código e ele te dirá onde alterar tudo que precisar.
Esse é o código completo de uma aba do slide:

<li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>


Entendendo o Código HTML:


Onde você lê LINK AQUI é o endereço de cada marcador ou página, ou post que queira colocar nessa aba;
Onde você lê ENDEREÇO HTTP DA IMAGEM AQUI é, claro, o endereço da imagem hospedada como ensinei acima;
Onde está Aqui o nome do marcador coloque o nome da categoria (Receitas, por exemplo, ou o que desejar...);
Onde está Aqui a descrição do post ou da categoria coloque a descrição da categoria, página ou post.

A área das miniaturas é assim:

<a href="LINK AQUI" title="NOME DO POST 1 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 1 AQUI"/></a>

Também bem simples de entender, né? Basta colocar o link, o endereço da miniatura e o nome do post, marcador, assunto, etc... nos locais indicados.


Como editar as imagens para o slide?


A parte mais trabalhosa é editar cada imagem que você for usar em seu slide.
Nesse ponto é importante ressaltar que é indispensável editar cada imagem no tamanho exato recomendado, tanto a imagem em tamanho grande do slide quanto a miniatura dessa imagem.
Para cada imagem do slide é necessário editar a mesma imagem em 2 tamanhos: Imagem grande: 950px de largura por 350px de altura;
Miniatura: 85px de largura por 48px de altura.

Vamos supor que eu esteja inserindo o slide em meu blog.
Eu destacaria as minhas categorias principais e a página Anuncie.
Assuntos: Dicas para blogs, Receitas doces, Receitas salgadas, Livros e resenhas e a página Anuncie.
Então as imagens que eu escolheria seriam relativas a esses temas, entende?

Então, reforçando: escolha imagens que tenham a ver com o tópico de cada aba do slide, edite essas imagens cada uma nos dois tamanhos recomendados, e a seguir hospede-as para obter o endereço de cada uma delas.


Como hospedar as imagens?


Imagens prontas?
Então é hora de hospeda-las pois precisaremos do endereço http de cada uma delas.
Para hospedar as imagens você pode usar o próprio Blogger.
Faça assim:
Em um blog de testes crie uma postagem e carregue nela as imagens que desejar.
Deixe todas em Tamanho original e (no navegador Chrome) clique sobre cada imagem com o botão direito do mouse.
Dentre as opções que aparecerem escolha Copiar endereço do link.
Esse é o endereço web de sua imagem.


Editar o código e colocar o slide no blog


Chegou a hora de editar o código do slide.
Insira tudo o que ele pede, os links dos marcadores, posts ou páginas, a descrição de cada aba e o nome da categoria/assunto/marcador.
Coloque o endereço da imagem maior no local indicado, e o endereço da mesma imagem em miniatura no local indicado no código.
Faça isso com todas as abas e depois de terminar a edição copie todo o seu código.

A seguir vá ao painel do blog onde deseja instala-lo e clique em Layout.
Aí clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixinha que expandir cole todo o código copiado e salve.
Arraste para baixo de seu cabeçalho ou menu e salve a alteração do Layout.
Seu slide já estará funcionando.


Fiz tudo certo e não apareceu...


Sim, pode acontecer.
Se seu blog tem outro slide este pode não funcionar ou ambos se anularem;
Se existem muitos gadgets em seu blog que usam javascript para funcionar (slides, menus mais elaborados, etc...) pode dar conflito.
Se você apagar alguma aspa ou sinal do código ele pode não funcionar. Então tenha atenção.

Agora o pulo do gato! O Código javascript!
Nos testes que fiz eu notei uma coisa espantosa que consegui resolver depois de muito estudo, preste atenção!

Se seu blog não tem domínio próprio e portanto começa com https o endereço do script tem que ser este, do meu site de hospedagem de arquivos:

https://sites.google.com/site/codigoselainegaspareto/scripts/slidedestaquesbyelainegaspareto.js


Se seu blog tem domínio próprio e começa com http o endereço do script é o que está no código.
Isso acontece porque o script precisa ter a mesmo sufixo do blog onde o slide for hospedado.

Deixei explicadinho na página de códigos, ok? Basta ler e substituir, dependendo do caso de seu blog.
Imagina o tanto que deu trabalho descobrir isso?
Deu, mig@s, muito...

E terminamos!
Horas de trabalho para montar o tutorial, traduzir e converter os códigos, testar e descobrir os erros...
Merece um compartilhamento?
Eu agradeço...




3 comentários via Blogger
comentários via Facebook

3 comentários:

  1. Que slide incrível, amei! Funcionou direitinho no meu blog. Obrigada!

    ResponderExcluir
  2. e caso eu queira colocar imagnes maiores, como fazer?

    ResponderExcluir
    Respostas
    1. Diego, basta alterar o tamanho das imagens e do slide, está marcado no código a largura e altura. Mas mexa com cuidado, há valores que são interligados, então tem que ir testando até ajustar.

      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…



No Instagram