12 de abr. de 2013

Última postagem maior com posts menores ao lado na primeira página do Blogger



Que tal dar a seu blog uma aparência mais inusitada, facilitar a navegação do leitor e economizar espaço na primeira página do template de seu blog ? Este é um hack antiguinho que, se não me engano foi introduzido na blogosfera pela Ariane do Templates para o Novo Blogger. Dei uma atualizada no código HTML, mas está bem básico, prometendo aqui fazer mais dois códigos mais incrementados...



Vá até o modelo de seu blog e clique em Editar HTML.





Ao abrir a janela, clique em Ir para um widget e depois clique em Blog1




 Agora clique na setinha para abrir o código




Depois que abrir, clique novamente na setinha, para abrir o seguinte trecho:


 <b:includable id='main' var='top'>...</b:includable>



É dentro desta tag que encontraremos o código.





Agora, procure por:

<b:include data='post' name='post'/>


Troque-o por:


<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>




 Procure agora por: <b:skin>...</b:skin>




E abaixo dele, cole o próximo código.


<!-- Design post grande-->
<style>
#first{
width: 60%; /*largura do post grande*/
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
}

#first h3{
display:block;
margin: 10px auto;
width: 100%;
padding: 0px 0px 4px 0px;
line-height:1.4em;
}
.first-body img{ /* estilo para as imagens */
padding:10px;
}
</style>
<!-- Design posts pequenos-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{
border-top: 1px solid #eee;
width:38%;/*largura dos posts pequenos*/
height:180px;/*comprimento dos posts pequenos*/
font-size: 10px; /*tamanho da fonte dos posts*/
margin:12px 2px 15px 5px;
float:left;
overflow:hidden;
padding:2px;
line-height:1.4em;
font-size:12px;
}
.post-body{
height: 140px;/*largura do corpo das postagens */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body img{
width: 95%;
height: 110px;/*largura das imagens dos posts */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body iframe{
width: 95%;
height: 120px;/*largura das imagens dos iframes */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post h3{
height: 30px;
font-size: 11px;/*tamanho da fonte do título*/
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
letter-spacing:1px;
}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none;
padding:0 0 0;
}
.date-header{display:none;}
.post img{border:none;}
.post-footer{display: none;}


#showlink{
padding: 1px 3px 0 0;
margin: 0 2px 0 0;
float:right;
font-size: 10px;
}
</style>
</b:if>
</b:if>

SALVE!


Gostei muito, ficou legal Elke mas, cade o menu de navegação do blog ???

Calma apressadinho, agora vamos acrescentar mais um código...

Procure agora por  <b:includable id='nextprev'>...</b:includable> e abara a setinha que tem ao lado.



Cole então o código abaixo logo depois de <b:includable id='nextprev'>


<div style='clear: both;'/>


Salve e aproveite seu layout bacanudo :-)

2 comentários:

  1. Kara, muito bom esse tutorial, funcionou perfeitamente em meu blog..era exatamente isso que eu queria para meu blog, dez de quando eu fiz meu blog eu procuro um tipo de tutorial desse jeito.. deu outra kara ao meu blog mano...ta de parabéns mano...já ganhou um fã...muito obrigado mano por esse tutorial, alias vocês fazem parceria com blogs, se fizerem gostaria muito de ser parceiros de vocês...
    meu blog é: http://x-games-filmes-aem.blogspot.com.br/

    aproveitem e olhe o tutorial de vocês em ação hehehe;;;

    Muito Obrigado mesmo...
    aguardo respostas

    aemdia6@gmail.com

    ou se quiserem responder aqui mesmo pode responder que eu venho sempre aqui vlw...obrigado e parabéns mais uma vez...

    Sucesso...

    Att,
    ADM AnzyNn

    ResponderExcluir
  2. Olá amigo, gostaria de saber como é que faz para deixar só as postagens pequenas sem a postagem grande em destaque....obrigado...preciso dessa ajuda urgente blz...obrigado e parabéns pelo o site...vlw..

    aemdia6@gmail.com

    Att,
    ADM AnzyNn

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube