Post em destaque personalizado para blog- uma nova cara para o gadget nativo do Blogger - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Post em destaque personalizado para blog- uma nova cara para o gadget nativo do Blogger

Publicado em 17/04/2019

Post em destaque personalizado para blog- uma nova cara para o gadget nativo do Blogger
Tem um gadget nativo do Blogger chamado Postagens em destaque, que pouca gente usa porque o bichinho não tem lá muitos atrativos...
Mas e se a gente aplicasse a ele algumas melhorias e o transformasse?
Assim:


Demonstração do tutorial

Quer aprender?
Vamos trabalhar!
Comece acessando a página com os códigos que vamos usar:


Copiar o código


A seguir vá até o painel administrativo de seu blog e clique em Tema.
Aí clique em Editar HTML e dentro da caixa com o código fonte tecle Ctrl+F.
Na barra de busca que expandir digite </head> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO 1 e salve.

Agora preste atenção!
Seus posts em destaque estão personalizados para serem colocados abaixo do cabeçalho ou abaixo do menu caso seu blog tenha menu abaixo do cabeçalho como o meu atualmente.
Pode ser em outro lugar?
Pode mas aí você terá que procurar em seu código fonte o lugar exato. Por sua conta e risco, ok?

Vou dar apenas esse  direcionamentos, colocar abaixo do cabeçalho ou abaixo do menu.
Localize, dentro do código-fonte, essa tag de fechamento:
</header>
Abaixo dela cole o CÓDIGO 2.
Salve.

Seu menu é como o meu, abaixo do cabeçalho?
Cole seu código dos posts em destaque abaixo do código do menu.
E salve.
Só isso!


Informações extras:
O gadget está configurado para aparecer apenas na página inicial do blog. Então, claro, ele não aparece nas páginas internas dos posts e nem nas páginas estáticas.
Achei melhor assim pra não ficar repetitivo.
Mas se quiser que ele apareça na home e em todas as páginas, internas e estáticas, apague a primeira e a última linha do CÓDIGO HTML.
Assim:

<b:if cond='data:view.isHomepage'>
<div class='featured_postz' id='featured_wrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>

Cores e fontes:
Cores são mudadas no CÓDIGO CSS/JAVASCRIPT.
Cor sempre é definida pelo código hexadecimal precedido do sinal #
Troque o código original pelo código da cor que desejar.

Quer mostrar apenas posts de um marcador pré-definido?
Use o CÓDIGO DE MARCADOR ESPECÍFICO ao invés do CÓDIGO 2 e coloque o nome exato do marcador cujos posts quer mostrar no lugar sinalizado com CATEGORIA AQUI.

Tem alguma dúvida ou pergunta que não foi respondida no tutorial?
Diga sua dúvida ou faça sua pergunta nos comentários e assim que possível eu ajudo :)

Leia bem o tutorial, faça em seu blog, experimente, teste.
Enjoy!





8 comentários

  1. Adorei!
    O único slide que anunciou sem causar nem conflito, eu acho. Aparentemente, tudo normal.

    ResponderExcluir
  2. eu coloquei abaixo de div class='row' id='content-wrapper'. Há algum problema ou tá certo? por que ficou certinho no meu template atual.

    ResponderExcluir
    Respostas
    1. Sim, está certo. Como seu tema é petsonalizado o lugar para inserir o Código 2 pode variar mas ficou certinho!

      Excluir
  3. vc sempre arrasa! Já falei q sou tua fã, né!?

    ResponderExcluir
  4. Elaine, muito obrigada por mais esta preciosidade! Eu apliquei em um dos temas responsivos novos do Blogger (o Emporio) e funcionou direitinho tanto na visão de desktop como na de celular, bem melhor que a postagem em destaque nativa do tema. :)

    ResponderExcluir
  5. Oi, Elaine!!!! Deu super certo aqui, só a questão da cor que não estou conseguindo resolver. A cor do título está ficando um cinza fechado e queria que fosse branca. Como resolvo?

    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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…