Leia mais automático estilo Magazine | Quero Dicas Quero Dicas : Leia mais automático estilo Magazine

Quero Dicas : Leia mais automático estilo Magazine

Leia mais automático estilo Magazine

|

Leia mais automático estilo Magazine

A pedidos, hoje eu trouxe outro estilo de leia mais automático para Blogger. Ele é um pouquinho mais complicado que o anterior : Leia Mais automático no blogger e Leia Mais automático em caixas. Mas basta prestar atenção e seguir certinho o tutorial que dará certo.

Este estilo é bem legal. Ele dá maior destaque ao ultimo artigo publicado e os demais ficam em caixas logo abaixo. Veja na imagem abaixo como fica:

créditos de imagem: Helplogger

Claro, se você entender um pouquinho de CSS poderá alterá-lo e deixar ao seu gosto. Vamos ao tutorial e verá suas personalizações? Vem...

Tutorial

Antes de começarmos, sempre recomendo para fazer um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog ou, dê preferências, faça testes em um blog de teste.

Não saiba fazer Backup? Não tem problema. Acesse: Como fazer um Backup ou restauração do seu blog.

Agora clique na imagem "Acesse" para pegar os códigos que iremos utilizar.


1.  Acesse o painel do seu blog

2. Vá em 'Modelo' e 'Editar HTML'

3. Clique em qualquer lugar dentro da área de código e pressione CTRL + F para para abrir a caixa de pesquisar

4 - Ao abrir a caixa, cole e procure pelo código:


5. Você irá encontrar mais de um trecho igual. opte pela segunda. Exclua!

6. No local cole o 1º código.

Note que a palavra Read More está destacada em vermelho. Você pode alterar como desejar (leia mais, continue lendo, etc)

7. Agora por este outro código:


8. Exclua ele também! No local, cole o 2º código

Note que a palavra Read More aparece novamente destacada em vermelho. Altere como desejar (leia mais, continue lendo, etc).

9. Agora procure por:


10. Antes dele cole o 3º código

11. E logo abaixo do 3º código cole o 4º Código - CSS

12. Salve!

Personalizando

No inicio do 3º código existe este trecho:
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;

first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

Note:

• O primeiro número (290) é o número de caracteres para os posts pequenos quando não haverá imagem disponível.

• O número 240 é o número de caracteres que irá mostrar quando há imagens nos posts pequenos .

• A terceira e a quarta linha é para a altura e a largura das imagens em miniaturas das postagens. 

• O mesmo se repete para o que está em azul, mas somete afeta apenas o primeiro post. Este é o post mais amplo (miniatura maior)

Agora vamos ao CSS

• Para alterar a largura e altura, para o primeiro contêiner procure estas linhas em vermelho:
width: auto; height: 250px;

A largura auto ocupará a largura total do post principla e 250px ocupará a altura das colunas primeira coluna.

• Para os demais post (pequenos), basta alterar esta parte:  width: 46%; height: 230px;

A largura 46% ocupará a largura e 230px ocupará a altura das colunas em miniatura.

• Os itens em roxo destacado, são cores, tamanhos das fontes, etc. Altere e customize como desejar.

Gostou? Comente!
Beijinhos

Créditos: Helplogger

Compartilhe


Nenhum comentário:

Postar um comentário


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir