Como instalar um slide de destaques no blog

Em muitos templates que personalizo para meus clientes eu coloco variações desse slide.

Ver a demonstração

Vou ensinar você hoje como colocar em seu blog, tá?
Vem comigo!

Para começar vou partir das explicações gerais:

1- Esse slide não é automático, ou seja: cada lâmina dele, cada imagem, precisa ser editada no tamanho correto, hospedada e ter seu endereço inserido no código HTML do slide;.
2- Não é complicado, ao contrário, é bem simples; mas leia e releia até se certificar de haver entendido o passo a passo;
3- As medidas que vamos usar são 640px de largura por 300px de altura. Claro que você pode alterar essas medidas, mas até pegar o jeito sugiro seguir essas do meu exemplo, ok?
4- Não faça em seu blog! 

Experimente antes em um blog de testes! Isso é altamente recomendado, escute a tia Elaine!
5- Se quiser usar suas próprias setinhas e bullets basta ter as imagens, hospeda-las e efetuar a troca no código, no local onde está marcado. 

Em meu exemplo tanto as setas quanto os bullets são pretos.

Colocando o slide no blog

Para começar vá ao painel de seu blog de testes e clique na aba Modelo.
A seguir clique em Editar HTML e tecle Ctrl+F dentro da caixa de códigos.
Na barra de busca que expandir digite </head> e tecle Enter para localizar.
Abaixo de </head> cole este código:


Copiar o 1º código

Salve e a seguir clique em Layout.
Vai aparecer o modo Layout de seu blog; clique em Adicionar um gadget e na caixa de opções escolha HTML/JAVASCRIPT.
Dentro da caixa que expandir cole este segundo código:


Copiar o 2º código

Faça as alterações no código:
Onde marquei em verde é o endereço de sua imagem;
Onde marquei em laranja é o endereço do post, página ou do marcador para onde a imagem direciona ao ser clicada;
Onde marquei em pink é o texto da legenda da imagem;
Não apague as aspas, tá? Senão não funciona.

Depois de feitas as alterações salve o seu slide, arraste para cima da área do post e salve as alterações do layout.
Veja se está tudo certo.
Caso algo tenha dado errado releia o passo a passo até se certificar de haver feito tudo certo.

Como hospedar imagens no próprio Blogger?

Faça assim: crie um post de rascunho em seu blog, um post que não será publicado.
Carregue nesse post todas as imagens que for usar.
Depois de carrega-las clique sobre cada uma delas, deixe-as em Tamanho Original e copie a url (se estiver no Firefox) ou o link da imagem (se estiver no Chrome).
Este é o endereço da imagem.
Mesmo se deletar o post de rascunho não perde a imagem, a menos que a delete do seu álbum Picasa, tá?

Onde editar as imagens para o slide?

Até no Paint dá certo. Basta que cada imagem tenha o tamanho do slide, que em meu exemplo é 640px de largura por 300px de altura.
Editores mais avançados como Photoshop, Photoscape, Photofiltre, etc... todos servem para redimensionar, cortar e editar imagens.

Aqui tem um post meu com dicas de sites para baixar imagens de ótima qualidade, de graça.

Não consegui, e agora?

Releia tudo, refaça tudo.
Se ainda assim não deu certo veja se não há outros scripts em seu blog que possam causar conflito com o slide.
Por exemplo, um outro slide vai anular este e vice-versa.
Caso as imagens apareçam mas não há transição verifique se não há algum script causando o conflito.

Brindes para você

Abaixo seguem algumas imagens de bullets e setinhas para você usar.
Baixe em seu pc, hospede em seu blog e divirta-se!

Bullets

Setas

Gostou do tutorial?
Comente, compartilhe o post!
Eu agradeço...