Olá!!! Hoje eu lhes trouxe um tutorial para otimizar sua página inicial, melhorando aspectos como o carregamento mais rápido, layout, e fornecendo ao leitor a visualização de um maior número de postagens. Vamos fazer com que as postagens da página inicial apareçam em forma de miniaturas, com título, imagem e algumas informações. Os mini posts aparecerão na busca de posts por categorias também.
Funciona como no estilo de layout que uso atualmente, mas a forma que vou mostrar será diferente, editada por mim com base no que aprendi originalmente no Ciudad Blogger, a quem vai os créditos. Esse que estou usando agora faz parte do template que baixei gratuitamente e foi editado por quem o criou (link ao final do blog), é bem mais profissional, mas ainda não cheguei ao nível de criar efeitos assim ^-^
Consegui obter esse resultado nos modelos Simple e Travel do Blogger:
Antes de começar...
*Em alguns templates a área de posts está em .post-outer ou .post body.Consegui obter esse resultado nos modelos Simple e Travel do Blogger:
Antes de começar...
Claro que a personalização vai mudar de acordo com o modelo que usar e você pode incrementar o código com mais coisas. Considere esse como uma base ok?
Agora sim, acrescente o código abaixo ANTES de </head> em seu HTML:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#main-wrapper {
width: 910px; /* soma da largura da sidebar+area de posts */
}
.post {
border-left: 2px solid #fee; /* borda esquerda*/
border-right: 2px solid #fee; /* borda direita*/
border-bottom: 2px solid #fee; /* borda do rodape*/
border-top: 2px solid #fee; /* borda do topo*/
box-shadow: 5px 5px 5px 5px #a1a1a1;
float: left;
height: 200px; /* altura do quadradinho */
width: 200px; /* largura do quadradinho*/
margin: 6px; /* Distancia entre os quadradinhos */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #f9b; /* cor dos titulos dos posts */
background: #fff; /* background dos titulos dos posts */
margin: 5px 5px 0 5px;
text-align: center;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px solid #fee; /* borda abaixo do titulo*/
width:100%;
font-size: 15px;
}
h3.post-title, .post-header {
margin: 0;
background:#fff;
}
.post img {
height: 100px; /* altura da imagem */
width: 200px; /* largura da imagem */
float: left !important;
border: none;
box-shadow: 2px 2px 2px #a1a1a1;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
h2.date-header { /* ocultar data apenas na pagina inicial*/
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>
Visualize e salve se deu tudo certo. No código você pode personalizar cores, bordas, tamanhos de cada quadradinho e da imagem; se quiser que apareça apenas as imagens com títulos altere a altura (height) da imagem.
Note também que como são miniaturas, você pode adicionar até mais de 10 postagens na Home e nas buscas. No caso, o que fiz tem espaço para adicionar de 2 em 2 posts seguindo o valor da largura da sidebar (310px) e dos posts (600px), então para não ficar espaço em branco (como ficou no exemplo) adicione números pares tipo 12 posts. (Defina isso em Layout-Postagens no blog-Configurar postagens-Número de postagens na página principal).
Hmmm...acho que é só por enquanto. Divirtam-se modificando o código e beijinhos ;3
Eu estava precisando o tuto, muito obrigada gostei muito xD
ResponderExcluirkissus ;3
Era o que eu queria *-*
ResponderExcluiranw~ eu ainda achava o cabecalho mais kawaii com a chibi Hatsune Miku >\\\\< mas assim também tá muito lindo :3 amo os lays do seu blog u.u são sempre de encher os olhos!!!
ResponderExcluirOi linda me ajuda por favor? Me blog é novo e queria ajuda de alguém mais experiente, tipo vc sabe? Então, você pode divulgar meu blog?
ResponderExcluirObrigada desde já (ps: entenderei se vc não puder)
with-you-s2.blogspot.com
Que bom que gostaram ^^
ResponderExcluirIza:Também adorei ele ^^ Demorei trocar ;--;
Mandi:Tá divulgado ^^ Se quiser deixe seu link também ali na aba make wish ok?Sucesso para vc ;3
Eu consegui,mas só que as imagens não ficam direitinhas -.- tem alguma solução pra isso?
ResponderExcluirTudo referente às imagens se edita em post img, como o posicionamento, largura e altura; só que o valor da área definida por vc (aquela da área de postagem + sidebar) e dos quadradinhos interfere também; aí vc deve verificar esses valores direitinho para ficar alinhado certinho. Tente ir modificando o código para se adequar ok?
ExcluirBeijus ;3
Adorei! Obrigada :D :D :D
ResponderExcluirMuito obrigado me ajudou muito tentei outros códigos nenhum funcionou ! só o seu ! Vlw
ResponderExcluirOlá, tudo bem?"
ResponderExcluirSei que o seu tutorial é antigo, mas super funcionou no meu blog, te agradeço muito. Apenas gostaria de retirar o texto da postagem na página inicial e gostaria que ele aparecesse somente na página interna dos posts
E gostaria também de inserir um botão do tipo leia mais
Como faço? Me ajuda? Vou ficar esperando sua resposta!
Oie :3 Tdb?
ExcluirBem, vc pode aumentar o tamanho da altura da imagem para que ela ocupe toda a área da miniatura de postagem (lá em height: 100px;).
Ou pode adicionar o leia mais automático: desse post aqui.
Espero ter ajudado ^^
Olá! Como alinho uma do lado da outra? O meu ficou como uma escadinha, uma mais abaixo da outra mas do lado. Queria todas na mesma linha como no seu exemplo.
ResponderExcluirColoquei na minha página, ficou muito bom. Obrigado.
ResponderExcluirOlá amei seu blog. E gostaria de uma ajuda. Esse tutorial foi o mais fácil e perfetio que achei. Mas queria saber se dá pra mostrar apenas a foto de capa, tem como fazer isso?
ResponderExcluirObrigada!
www.danielabritto.com
Oi (=^v^=) Muito obrigada!!! Fiquei feliz com sua visita <3
ExcluirEncontre o trecho:
.post img {
height: 100px; /* altura da imagem */
Aí aumente o valor da altura da imagem, por exemplo:
.post img {
height: 100%; /* altura da imagem */
A imagem oculta o texto; espero que ajude :3
Obrigado por responder. Não consegui, ficou igual. Outra opção seria deixar a fonte do texto menor, mas quando mudo o font size fica igual. Será que tenho que acrescentar algum código?
ExcluirOi :3 Então, desse jeito que te falei da altura da imagem continua dando certo em modelos padrões do blogger; essa é a maneira que conheço ^^
ExcluirVou dar uma olhada em alguns códigos de templates de sites como soratemplates.com, themexpose.com e way2themes.com, que tenho por aqui e se encontrar uma maneira melhor, posto aqui no blog ok?
Tente esses códigos: miniaturas de posts com leia mais
ExcluirFUNCIONOU MUITO OBRIGADAAAA
ResponderExcluirsó ainda queria saber como eu coloco leia mais nessa miniatura de post, pode me ajudar com isso?
Consegui fazer isso assim: Mniaturas de posts com leia mais
ExcluirEspero que seja útil :3
Oi Roberta .. eu gostei muito do tutorial, mas no meu blogger as tres ultimas postagens em miniatura aparecem em escadinha,as seguintes aparecem alinhadas, e as linhas de contorno do corpo original do post aparecem acumuladas ao topo por tras das miniaturas ....como eu faço pra arrumar ?
ResponderExcluirTalvez você deva dar uma olhada nas larguras do seu blog, da área de postagem...
ExcluirTestei esse código aqui em um modelo padrão do blogger e continuou normal.
Tem esse desse post também e deu certo.