Miniaturas de postagem na página inicial


Hello viciados em computador. 
Eu sei que está muito tarde pra um post, mas é que estou muito animada sabe? Então resolvi trazer esse lindo e maravilhoso tutorial:
Crédito [www]
Esse tutorial é para modelos travel e Simple.

Vai ficar assim:

Então, vamos ao tutorial lindíssimo?



Vá em editar html, dê ctrl + f e procure por:
.main-inner .column-center-inner {
Você vai encontrar:

.main-inner .column-center-inner {
padding: 20px 0; } (obs: pode estar diferente)

Abaixo de padding: 20px 0; acrescente:
width: 600; 
Agora, procure por </head> e cole abaixo dele:

01<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
02<b:if cond='data:blog.pageType != &quot;item&quot;'>
03<style type='text/css'>
04#main-wrapper {
05width: 910px; /* soma da largura da sidebar+area de posts */
06}
07.post {
08border-left: 2px solid #fee; /* borda esquerda*/
09border-right: 2px solid #fee; /* borda direita*/
10border-bottom: 2px solid #fee; /* borda do rodape*/
11border-top: 2px solid #fee; /* borda do topo*/
12box-shadow: 5px 5px 5px 5px #a1a1a1;
13float: left;
14height: 200px; /* altura do quadradinho */
15width: 200px; /* largura do quadradinho*/
16margin: 6px; /* Distancia entre os quadradinhos */
17padding: 0;
18overflow: hidden;
19}
20.post-body {
21padding:0;
22margin:0;
23}
24.post h3 {
25padding: 0;
26}
27.post h3 a, .post h3 a:visited, .post h3 strong {
28color: #f9b; /* cor dos titulos dos posts */
29background: #fff; /* background dos titulos dos posts */
30margin: 5px 5px 0 5px;
31text-align: center;
32text-shadow: 1px 2px 3px #fcc;
33border-bottom: 2px solid #fee; /* borda abaixo do titulo*/
34width:100%;
35font-size: 15px;
36}
37h3.post-title, .post-header {
38margin: 0;
39background:#fff;
40}
41.post img {
42height: 100px; /* altura da imagem */
43width: 200px; /* largura da imagem */
44float: left !important;
45border: none;
46box-shadow: 2px 2px 2px #a1a1a1;
47padding:0;
48margin:0;
49}
50.post-outer, .inline-ad {
51padding-top: 0px !important;
52}
53.post-outer {
54padding-bottom: 0px;
55}
56h2.date-header { /* ocultar data apenas na pagina inicial*/
57display: none;
58visibility: hidden;
59}
60#blog-pager {
61clear: both;
62}
63</style>
64</b:if>
65</b:if>
Visualize e se der tudo certo, salve. Você pode personalizar as cores, fontes, backgrounds, larguras, bordas e fazer o seu estilo. Eu acho super fofo e criativo esse modelo para blogs de tutoriais, aprovo e recomendo.
Beijos e até mais.





10 comentários:

  1. Flor para o primeiro blog ele está bem fofinho, agora sobre a vaga no recomendo para divulgação irá ter vagas nos destaques apartir do dia 18 de abril, sempre faço joguinhos para quem vencer, pois muita gente me pede uma vaga, então sobre os recomendos e destaques vou fazer um postagem falando sobre isso ok? Amei seu blog.. Roh - Garota no Mundo Hmtl.

    ResponderExcluir
    Respostas
    1. Onnnnntw *--* obrigada sua fooofa, valeu pelas dicas e incentivos :)))

      Excluir
  2. Adorei o post! Talvez eu use esse efeito... ^^

    ResponderExcluir
    Respostas
    1. Thanks' créditos ao blog Reino Kawaii ;)

      Excluir
  3. Que legal,adorei o tuto *--*

    - Love For HTML

    ResponderExcluir
  4. muito bom o tuto, muito bom, adorei *o*
    kisses
    >>ncnosekai.blogsspot.com

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ