Slide de destaques responsivo para blogs - * Blog Elaine Gaspareto * Slide de destaques responsivo para blogs - * Blog Elaine Gaspareto *

Slide de destaques responsivo para blogs

Publicado em 10/01/2018


Sabe o que nós vamos fazer hoje?
Vamos aprender o passo a passo mais completo que eu consegui imaginar para a construção de um slide de destaques responsivo para usar no blog.
Quando terminarmos ele vai ficar assim, olha que lindo:


Demonstração do tutorial


Além de lindo, e de ter efeitos múltiplos, ele é responsivo. E isso, atualmente, é algo muito, mas muito importante mesmo!

Por que usar slide de destaque no blog?


Eu já mostrei aqui no blog diversos slides, tanto de destaques quanto de posts recentes.
Veja:


Quando se trata de slide de posts recentes é mais simples pois em geral a captura das imagens é feita via feed e o slide exibe, claro, os posts recentes publicados no blog. Também pode exibir posts de determinada categoria, dependendo de sua configuração.
Acho interessante, especialmente pela praticidade, mas pessoalmente não vejo muito sentido em mostrar posts recentes de um blog que já mostra os posts recentes na página inicial. Acho redundante.

Um slide de posts (ou categorias) em destaque, creio eu, tem mais utilidade e razão de ser.
Nesse, que vamos aprender hoje, você pode definir se quer destacar um post, uma categoria, uma rede social, ou até mesmo um anunciante. Ou seja: dá até pra vender espaço publicitário no slide de destaques.

Agora que já expliquei a minha motivação pra gostar mais de slides de destaques, vamos aprender como instalar um em seu blog?
Vamos trabalhar!


Como instalar um slide de destaques no blog


Para começar você precisa definir se vai colocar em seu slide posts em destaque, categorias em destaque, alguma página ou algum banner de anunciantes.
E a melhor parte é que pode ser tudo isso, no mesmo slide.

Definidas as páginas, posts ou categorias que vamos colocar no slide é a hora de escolher as imagens que você vai usar.
Elas precisam ser editadas todas na mesma largura.
A altura, no caso específico deste slide, não importa, mas a largura sim.
Para nosso exemplo vamos usar imagens que têm a largura de 1366px. Pode ser maior? Sim, pode.
Mas não recomendo menor. Sempre é melhor maior que menor, no caso específico desse slide, repito.

Além das imagens grandes será preciso redimensionar cada uma delas para as miniaturas. Use a medida de 100px de largura, sendo que a altura não importa.
Olha como fica um exemplo meu, nos dois tamanhos (clique sobre a imagem maior para ver em tamanho real):



Imagens prontas nos dois tamanhos?
Use o site TinyPNG para compactar e reduzir o peso das imagens senão seu slide ficará muito pesado.
Veja:



Imagens compactadas?
Então é hora de hospedar todas elas.

Como hospedar imagens usando o próprio Blogger?


Hospedar uma imagem significa obter o endereço dela na web.
Toda e qualquer imagem que existe tem um endereço único na internet.
Há sites onde podemos hospedar as imagens, mas eu prefiro sempre a segurança e simplicidade de hospedar imagens usando o próprio Blogger como host.
Vou te ensinar como faço, é muito simples:

Comece um post de rascunho em seu blog.
Carregue nesse post todas as imagens que precisa hospedar, e deixe-as em Tamanho original.
Se estiver usando o navegador Chrome clique com o botão direito do mouse sobre a imagem carregada e copie o Endereço do link.
Esse é o endereço web de sua imagem.

Links escolhidos, imagens editadas e devidamente hospedadas?
Então é hora de colocar o slide no blog. Essa é a parte mais fácil pois juntei (depois de muito errar) todos os scripts em só código, pra facilitar sua vida!
Vamos lá!
Comece acessando a página com os códigos necessários à execução do tutorial:


Copiar o código


Agora, no painel do blog onde o slide será instalado clique em Layout e a seguir clique em Adicionar um gadget.
Dentre as opções que aparecerem escolha HTML/JAVASCRIPT e na caixa que expandir cole o código que pedi para copiar.
Nesse código voce verá que deixei devidamente sinalizado onde pode ser alterado para trocar cores e fontes.
Só mexa nessas coisas que tiver ao menos um conhecimento básico em HTML e CSS, ok?

Caso não altere nada a aparência de seu slide será exatamente como em meu exemplo, claro que com suas imagens, links e legendas.
Essa parte de links, imagens e legendas também está devidamente sinalizado no código.
Para preencher com seus dados basta colocar cada item no campo indicado e tudo dará certo.
A área que precisa necessariamente ser editada se repete 5 vezes é essa:

<div data-link="LINK AQUI" data-thumb="URL DA MINIATURA AQUI" data-src="URL DA IMAGEM MAIOR AQUI">
            <div class="camera_caption fadeFromBottom">
                Texto da legenda da imagem aqui
            </div>
        </div>

Entenda o código:

1- LINK AQUI: é o endereço para onde a imagem direcionará ao ser clicada. Pode ser um marcador como em meu exemplo, uma página, um post, etc. Sempre começa com http ou https.
2- URL DA MINIATURA AQUI: é o endereço url da imagem menorzinha.
3- LINK DA IMAGEM MAIOR AQUI: é a url da imagem grande do slide, aquelas que você editou, compactou e hospedou previamente.
4- Texto da legenda da imagem aqui é, claro, o texto que acompanha a legenda de cada foto do slide.

Depois de todos os campos preenchidos é só salvar, arrastar para onde deseja que o slide fique e salvar a alteração do seu Layout.


Dicas extras e informações importantes


Vou listar abaixo algumas dicas importantes e respostas para possíveis dúvidas que possam surgir.
Leia com atenção e tudo dará certo, tá?

1- Aqui no blog tem uma lista com dezenas de sites que oferecem imagens de alta resolução gratuitas para usar no blog. Assim você não corre o risco de usar imagens que possuam dono ou imagens em resolução ruim. Confira:


2- Mas, Elaine: onde posso editar essas imagens?
Simples! Em qualquer editor de imagens!
Eu uso Photofiltre, Photoscape, Photoshop e até o Paint.
Eu sugiro o mais simples de todos: o Photoscape.
Você pode baixa-lo gratuitamente  no site do desenvolvedor. Veja meu tutorial que ensina como fazer isso:


3- Por ser responsivo esse slide pode ser colocado em qualquer área do blog. Ele vai se adaptar e assumir a largura da área onde for colocado.
E o melhor: caso seu template seja responsivo o slide pode ser usado e ficará perfeito!
Dá também para mostrar o slide na versão mobile de seu celular.
Veja como ativar a versão mobile de seu blog e exibir gadgets no celular:


4- Eu hospedei cada um dos arquivos em minha conta no Google sites.
Recomendo que você faça o mesmo para evitar excesso de tráfego e os scripts saírem do ar.
No código do slide basta clicar nos endereços dos scripts e eles serão baixados automaticamente para seu computador.
Salve cada um deles hospede-os como ensino abaixo:


5- Fez tudo certo, conferiu tudo, está certo que não esqueceu nada e ainda assim o slide não aparece?
Seu template pode ter algum outro script que esteja conflitando com os scripts do slide.
Teste em um blog de testes limpo e tire a dúvida.
Se o erro persistir em seu blog pode ser que tenha então que fazer escolhas do que manter e do que excluir.

6- Testei em templates nativos do Blogger, em templates personalizados como em meu exemplo e em nativos personalizados responsivos.
Não testei nos modelos responsivos baixados da internet e nem nos novos modelos responsivos do Blogger (Soho, Comtempo, etc). Se quiser testar, me diz depois se deu certo.

7- Gostou do blog de testes onde o slide está?
Baixe-o gratuitamente, edite como desejar e seja feliz!
Baixe aqui o Template Sou blogueira!

E acabamos, querido leitor!
Se fizer diga aí nos comentários e eu ou te visitar pra ver.
Se tiver qualquer pergunta que não tenha sido contemplada no tutorial diga nos comentários e eu ajudo assim que for possível.
E se puder me ajudar compartilhe esse post para que o blog siga crescendo, é importante pra mim e para o trabalho que faço aqui :)
Enjoy!




1 comentários via Blogger
comentários via Facebook

Um comentário:

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…