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:
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:
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!
Diz oi pra mim...
Dias online
Postagens
comentários
Olá Eliane, muito boa sua dica. No meu blog não tem o código (PopularPosts1) só (PopularPosts2) o processo é o mesmo? Grato!
ResponderExcluirSim, o processo é o mesmo :}
ExcluirOlá Eliane
ResponderExcluirOs recentes tutoriais cabem nos novos responsivos?
Grata
Regina, não testei mas se tiver os códigos mencionados pode dar certo.
Excluirbjsss
Regina, corrigindo: eu testei e sim, esse tutorial funciona nos modelos responsivos recentes.
ExcluirOi Elaine!!
ResponderExcluirObrigada pelo tutorial! Adorei!!
quando eu coloquei o codigo do CÓDIGO HTML
ResponderExcluir(colar no lugar do código original do gadget)
sumiu a unica postagem que tinha era pra acontece isso só tenho tres postagem no blog
Parabéns pelo trabalho sempre maravilhoso, Elaine! Coloquei lá no blog e amei.
ResponderExcluirBeijos
www.marimonteirublue.blogspot.com.br
bom dia como retirar o numero 1 ele ficou em todos os quadros
ResponderExcluir