Galeria para destacar posts à sua escolha

em 24 de novembro de 2015


Eu já mostrei aqui no blog, em outras ocasiões, como colocar os posts mais recentes em uma galeria de destaques.
Relembre:

Tutoriais para exibir posts recentes


Mas acontece que, às vezes, a gente não quer exibir os posts recentes e sim destacar alguns posts importantes (tipo um sorteio, um post relevante, etc...) e é justamente isso que vou ensinar hoje.
Se você fizer tudo certo e se o seu blog não tiver nada que conflite com os códigos que vou disponibilizar o resultado será assim:


Demonstração do tutorial


É relativamente simples de conseguir, mas como sempre, vamos às recomendações:

  1. Sempre teste antes em um blog de testes, que tenha o mesmo template de seu blog e preferencialmente os mesmos gadgets, nos mesmos lugares. Sim, é importante, por isso se chama blog de testes, para testar.
  2. Leia e releia esse tutorial até se certificar de haver entendido. Eu demoro, em média, 4 horas para montar o tutorial, testar em 3 modelos diferentes, corrigir os erros e finalmente postar. Então, vai por mim: seu eu fiz e deu certo, você consegue.
  3. Claro que pode haver em seu blog algo que cause conflito com os códigos desse recurso. Aí não há o que eu possa fazer; cabe à você descobrir o que pode estar dando conflito e caso descubra, optar pelo que prefere manter.


Depois de haver lido todas as recomendações, vamos trabalhar?
Para começar selecione 3 posts seus que deseje destacar.
A seguir selecione e edite as 3 imagens que deseja usar.
Elas devem medir 300px de largura por 200px de altura.
Assim como nesse exemplo:


Preparou as 3 imagens? Agora você precisa hospeda-las.
Faça assim: crie um post de rascunho em seu blog e carregue nele as imagens. Não publique.
Pare o mouse sobre a imagem, clique com o botão direito dele sobre ela e  e copie o endereço do link (no Chrome) ou copie o link (no Firefox).
Esse é o endereço http de sua imagem. Reserve.


Agora vamos ao código-fonte de seu template.
Vá ao painel do blog, clique em Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código que abrir tecle Ctrl+F e na barra de busca que expandir digite  ]]></b:skin> e tecle Enter para localizar.
Achou? ACIMA disso cole este código:


Copiar o código CSS


Salve.
Esse código define a aparência da galeria de destaques. Coisas como cor, fonte, sombra, etc... são definidas aí. Deixei marcado em CAPSLOCK no código todas as áreas editáveis.
Altere se desejar e salve se alterar.

Agora vamos ao modo Layout de seu blog.
Clique em Adicionar um gadget e na caixa de opções que abrir escolha HTML/JAVASCRIPT.
Dentro da caixinha que expandir cole este código:


Copiar o código HTML


Preste muita atenção ao que vou explicar, tá?

Onde você lê AQUI O ENDEREÇO DE SUA IMAGEM coloque o endereço da imagem que hospedou lá no primeiro passo, lembra? São 3 imagens, cada uma vai em um dos códigos.

Onde está escrito AQUI O TÍTULO DO POST coloque, claro, o nome do post que está destacando.

Onde está escrito AQUI O TEXTO QUE DESEJAR coloque um texto, um resuminho básico do que trata o post em destaque;

Em  AQUI O ENDEREÇO HTTP DO POST coloque o endereço completo do post que deseja destacar, sempre começando com http;

Se preferir alterar a chamada Leia mais basta substituir pelo que preferir.

Marquei em cores no código pra você não se perder, tá?
Depois de pronto clique em Salvar.
Arraste para baixo do cabeçalho ou do seu menu, e salve.
Tá feito, e se tudo deu certo, tá lindo!


Aqui vai uma dica de ouro: 

Em templates nativos do Blogger (do Designer de modelos) que usam o menu de páginas do Blogger pode ser mais complicado achar o lugar correto para instalar a galeria. Faça testes.
Uma dica especial é essa: dentro do código fonte de seu template tecle Ctrl+F e na barra de busca digite Cabeçalho. Tecle enter para localizar.
Vai aparecer um código mais ou menos assim:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Nome de seu blog (Cabeçalho)' type='Header'>

Altere onde está true por false, onde está 1 por 4 e onde está no por yes.
Ficará assim:

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
        <b:widget id='Header1' locked='false' title='Nome de seu blog (Cabeçalho)' type='Header'>

Salve.
Isso vai 'destravar' seu header e permitirá a adição de elementos abaixo dele, como menus personalizados e a galeria que estou ensinando hoje, por exemplo.
Dica de ouro, né?

Como eu disse no começo, leia e releia até entender, confirme se não pulou nenhum passo e divirta-se!
Dá pra destacar posts, páginas ou categorias como eu fiz em meu exemplo.
Guarde esse post em seus favoritos, assim que der vou mostrar mais alguns efeitos que usam a mesma base desse de hoje.
Falou, lindeza?


Aproveita que estamos aqui e clica em Compartilhar, ou Curtir, ou Recomendar no G+...
Só um cliquinho...
Clica...



Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

11 comentários , comente também!

  1. Gostei da postagem, em breve estarei usando essa opção em meu blog. Muito legal mesmo. Valeu!

    ResponderExcluir
  2. Parece que estava lendo meus pensamentos! Adorei

    ResponderExcluir
  3. oi Elaine, td bem? Você mais uma vez deixando a gente atualizada... Obrigada por compartilhar seus conhecimentos, pena que eu ando preguiçosa :(
    Bjk e bom final de semana

    ResponderExcluir
  4. Olá Elaine, dicas muito legais, no futuro farei isso. Bjs.

    ResponderExcluir
  5. Sempre que vou personalizar as cores aparece a seguinte mensagem ao tentar visualizar ou salvar: "More than one widget was found with id: HTML2. Widget IDs should be unique." e não salva nem visualiza, o que pode ser? :/

    ResponderExcluir
    Respostas
    1. Não tem a ver com a cor... ELe esta dizendo que tem um outro Widget com o mesmo "nome" de HTML2 tente encontrar qual é e mudar o nome, ou muda o nome desse. ;)

      Excluir
  6. No meu blog as imagens ficam uma embaixo da outra e não na horizontal :/

    ResponderExcluir
  7. Estou amando suas dicas, parabens!!!

    ResponderExcluir
  8. Oi elaine, quero muito usar a galeria, mas as imagens não ajustaram!! O que posso fazer?

    ResponderExcluir
  9. Ola linda! sempre com novidades.
    Adorei muito esta galeria, no meu não aparece o titulo, ja revisei tudo mas não seio o que pode ter dado errado, so puder dar uma olhadinha pra mim ficaria muito grata.

    ResponderExcluir
  10. Boa Noite Elaine, tira uma dúvida minha:
    Como que eu faço para centralizar a galeria?
    No meu blog elas ficam no lado esquerdo, e eu queria apenas centralizá-las.
    O que eu faço?

    ResponderExcluir

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…