Personalizar as postagens mais vistas do blog- modelo com imagens maiores

em 16 de agosto de 2016



Há, aqui no blog, uma categoria que mostra algumas opções de personalização para as postagens mais visualizadas (ou postagens populares) do blog.
Reveja:

Hoje quero te mostrar uma opção mais moderna, mais limpa e muito bonita.
Veja:

Demonstração do tutorial


São 3 passos simples, vamos aprender?


Antes de começar leia isso!


1- Antes de começar qualquer alteração em seu template, mesmo uma simples como essa, faça sempre backup dele para evitar estragos caso algo saia errado.

2- E, tão importante quanto o backup é ler o tutorial todo antes de sair fazendo.
Só comece após ler o tutorial, ler os códigos e se certificar de haver entendido tudo.
Combinado?
Combinado.
Então, vamos lá!



Personalizar as postagens populares do blog


Para começar, claro, você precisa ter instalado em seu blog o gadget Postagens populares.
Faça assim: vá ao painel administrativo do blog, clique na aba Layout e escolha Adicionar um gadget.
A seguir escolha Postagens populares e  configure marcando o período em que deseja as exibições, a quantidade de posts exibidos e não marque a caixinha snippet.
Salve, arraste para onde deseja que fique, salve as alterações do Layout e clique na aba Modelo.

Aí clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de pesquisa que aparecer digite </head> e tecle Enter para localizar.
Abaixo de </head> cole o Código CSS e salve.

Agora, na barra de pesquisa digite </body> e tecle Enter.
Acima de </body> cole o Código Javascript que faz a personalização funcionar.
Salve.
Está prontinho!

Ah, sim, claro, os códigos:

Copiar os códigos


Dicas extras:

1- Caso seu template já possua alguma personalização nesse gadget o modelo que ensino aqui pode não funcionar.
É preciso remover a personalização anterior e aí colocar essa, exatamente como explico no tutorial.

2- No Código CSS quase tudo pode ser trocado/personalizado ao seu gosto e de acordo com as necessidades de seu blog.
Meu modelo usa imagens na largura de 300px. Se sua sidebar for mais larga ou mais estreita ajuste esse valor para caber certinho dentro da sua coluna lateral.
Lembre que o valor 300 se repete também no Código Javascript. Portanto, se alterar no Código CSS altere igualmente o valor no Código Javascript.

3- Cores são alteradas trocando o código hexadecimal precedido de #.

4- A fonte que está no modelo é Cambria. Altere para a fonte que desejar.

5- Alterações diversas no Código CSS são por sua conta. É muito fácil de editar mas precisa ter um conhecimento básico. Vá mexendo, testando, até chegar na aparência que deseja.


Gostou?
Então compartilha aí, meu povo!

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.

5 comentários , comente também!

  1. Ótima dica, vou usar no meu site. Quem quiser seguir meu site, eu dou dicas de informáticas e disponibilizo programas úteis para pcs e notebooks.

    Meu site é http://www.infoescrivani.com.br

    ResponderExcluir
  2. Adorei Elaine!!! Sempre trazendo dicas incríveis... Vc ajuda a gente de mais!!! Obrigada sempre

    :*

    Beijos
    Fran
    Achei e Rabisquei

    ResponderExcluir
  3. Não consegui mudar o tamanho da imagem. As miniaturas sempre ficam pequenas em vez de ficar com tamanho de 300px. O que poderia estar acontecendo?

    ResponderExcluir
  4. Estou com o mesmo problema da moça acima, mesmo alterando as imagens ficam bem pequenas.
    Achei a opção muito linda e limpa, parabéns e obrigada! <3

    Simples Bella

    ResponderExcluir
    Respostas
    1. Nanda, pelo que notei a personalização não funciona em templates muito modificados/já personalizados ou baixados da internet.
      Tentei em um assim e não dá certo...
      :(

      Excluir

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…