Modelo pronto para personalizar as Postagens mais vistas do blog - * Blog Elaine Gaspareto *

Modelo pronto para personalizar as Postagens mais vistas do blog

em 02/08/2017

Modelo pronto para personalizar as Postagens mais vistas do blog

Um dos gadgets nativos do Blogger que eu mais gosto e considero essenciais para aumentar o engajamento do leitor com as postagens é, sem dúvida, o gadget que mostra os posts mais vistos/mais lidos/mais acessados.
Ao longo do tempo mostrei aqui no blog vários modelos prontos para personalizar o gadget de Postagens populares. Recorde:


Hoje quero mostrar essa opção, que é muito bonitinha e ocupa um espaço reduzido no layout do blog:

Demonstração do tutorial

Quer aprender?
Vem comigo!


Como instalar o gadget Postagens mais vistas no blog?


Importante: você precisa, claro, já ter instalado em seu blog o gadget Postagens mais visitadas.
Se não tem faça assim:
Acesse a aba Layout (ou Design, é a mesma coisa) de seu blog e clique em Adicionar um gadget. Na caixinha de opções que aparecer escolha Postagens mais visitadas.
Configure para exibir 10 posts, deixe desmarcada a caixinha Snippet e selecione o período que deseja (eu sugiro mostrar os posts mais vistos da semana). e salve.
Arraste para onde deseja que fique e salve as alterações do layout.
Caso já tenha o gadget instalado em seu blog pule essa parte.


Como personalizar as Postagens mais vistas do blog?


Antes de mais nada acesse a página com os 2 códigos necessários à realização desse tutorial:

Copiar os códigos


A seguir acesse o painel de seu blog e clique na aba Modelo.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de pesquisa que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

Agora preste atenção!
No alto do seu código-fonte tem uma caixinha escrito Ir para um widget, com uma setinha ao lado. Clique na setinha; essa ação vai fazer aparecer todos os gadgets que voce tem instalados em seu blog.
Localize o gadget PopularPosts1 e clique nele.
Voce será levado ao código do gadget, que começa com <b:widget e termina com </b:widget>
Selecione todo o trecho do código e substitua-o pelo CÓDIGO HTML que forneci pra você, lá no blog Códigos para seu blog.
Fez isso?
Salve.
Tá pronto!

Se tudo deu certo (claro que deu, #temfé) seu resultado será exatamente igual ao do meu blog de demonstração.
Quer mudar cores? Simples!
Todas as áreas editáveis do código estão marcadas em CAPSLOCK no CÓDIGO CSS.
Altere cores (aqui tem uma tabela com os códigos das cores), tamanho de fontes, etc.


Vídeo do tutorial


Pra facilitar sua vida tem vídeo-aula da realização do tutorial.
Aperta o play e inscreva-se no canal; ele é um apoio aos tutoriais do blog e eu agradeço muito sua inscrição!


Aproveita que tu tá por aqui e clica em curtir ao final do post... ou deixe seu comentário dizendo 'oi"...
Diz oi pra mim...


6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Olá Eliane, muito boa sua dica. No meu blog não tem o código (PopularPosts1) só (PopularPosts2) o processo é o mesmo? Grato!

    ResponderExcluir
  2. Olá Eliane

    Os recentes tutoriais cabem nos novos responsivos?

    Grata

    ResponderExcluir
    Respostas
    1. Regina, não testei mas se tiver os códigos mencionados pode dar certo.
      bjsss

      Excluir
    2. Regina, corrigindo: eu testei e sim, esse tutorial funciona nos modelos responsivos recentes.

      Excluir
  3. Oi Elaine!!
    Obrigada pelo tutorial! Adorei!!

    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…



Visualizações

Contando...

Dias online
Postagens
comentários