Como personalizar a postagem mais recente do blog

Esses dias veio em minha cabeça a ideia de fazer um template mais avançado e diferenciado. Pensei então em um jeito de personalizar apenas a primeira postagem que aparece no blog. Vocês podem ver um exemplo aqui mesmo na Íntegra Studio, perceba que a primeira postagem está larga e as seguintes estão em colunas, seguindo um estilo magazine.

Como não é nada muito complicado e ao mesmo tempo interessantíssimo, vou ensiná-los.

Criar classe CSS (estilo) e adicionando ao post

Primeiramente precisamos criar um estilo apenas para essa postagem. É bom ressaltar que você deve declarar as propriedades que deseja diferenciar das postagens seguintes. Ou seja, se suas postagens tiverem um background azul e uma borda verde e quer que apenas a primeira postagem tenha um background vermelho e continue com a borda verde, você só declararia que quer mudar o background, a borda não seria alterada.

Depois de criada a classe, utilizamos um código jQuery para adicioná-la a primeira postagem.
ENFIM, vamos ao que interessa:

Adicione o seguinte código logo APÓS ]]></b:skin>:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
$(document).ready(function() {
  $(&#39;.post:first&#39;).addClass(&#39;first-post&#39;);
  });
</script>
<style type='text/css'>
.first-post{
   background: #ddd; /* edite o plano de fundo */
   border:1px solid #f00; /* --edite a borda--*/
   font-size: 15px; /* --tamanho da fonte do texto--*/
   color: #333; /* edite a cor do texto */
    width:100%; /*edite a largura */
    -webkit-box-shadow: 4px 4px 5px -3px rgba(0, 0, 0, 0.5); /* edite a sombra */
    box-shadow: 4px 4px 5px -3px rgba(0, 0, 0, 0.5); /* edite a sombra */
  }
/* estilo para imagens do primeiro post */
  .post.first-post .post-body img{
    width:300px !important; /* largura da imagem */
    height: auto;
 
  }
  .first-post .post-body img:hover{
-webkit-box-shadow: 1px 1px 10px 1px #00cc99;
box-shadow: 1px 1px 10px 1px #00cc99;
        opacity:0.8;
  }

/* estilo para o link leia mais - posicione-o */
  .post.first-post .jump-link{
     position:relative;
     top:0px;
     left:2%;
  }

  /* estilo pata o bloco do titulo da postagem */
 .post.first-post h3.post-title{
    background:#000;
    color:#f00;
    padding:5px;
  }

  /* estilo para o link do titulo da postagem */
 .post.first-post h3.post-title a{
 
    color:#f00;
  }

  /* estilo para o rodapé da postagem */
 .post.first-post .post-footer{
    background:#333;
  }

  /* estilo para links do rodapé */
 .post.first-post .post-footer a{
    color:#fff;
  }

  /* adicione aqui mais classes que deseja alterar */
</style>
</b:if>

Explicando o código...O que está em amarelo limita que esse hack funcione apenas na página inicial do blog, se não deseja isso retire.

O que está em rosa (ou seja lá que cor é essa)  é o código que adiciona a biblioteca do jQuery ao blog, isso é bem importante!

O que está em roxo é o script que adiciona a classe que criamos ao primeiro post, também é muito importante!

O que está em vermelho é o estilo CSS do bloco da postagem (da postagem em si), o resto do código está comentado, imagino que vocês não tenham muita dificuldade para entender...

Lembrando que você pode editar o que mais você quiser, apenas conheça um pouco do código do seu blog! E o que você não deseja editar, basta excluir o bloco de código referente a classe.

E é isso galera, espero que tenham gostado! É meio complicado, então estarei disposto a responder qualquer dúvida, basta comenta aqui em baixo.

Se gostou nos siga nas redes sociais e por favor, não plagie nosso conteúdo nem de nenhum lugar, se quiser compartilhar o tutoriais que mantenham os créditos!

Compartilhe essa postagem!