Blogger hack - Destacando o post recente

Umas das formas mais utilizadas para destacar o primeiro post dos demais no blogger é utilizando a tag isFirstPost, que você pode conferir no artigo isFirstPost - um estilo diferente para o primeiro post. O único problema é a quantidade de código a ser usada. Para novatos isso pode ser um pouco complicado.

Pensando nisso, criei um hack um pouco mais simples com um outro método.

Exemplo do hack

exemplo do hack

O que faço é adicionar uma imagem junto com uma condicional que testa se a página é a principal, se for, o hack insere a imagem.

Entenda a estrutura e como o hack é inserido.

extrutura do hack

Repare que a imagem que destaca o post recente não se encontra dentro da div post. Isso acontece porque a div post faz parte do loop do blogger, e se colocarmos o hack dentro dessa div, ele se repetirá em todas as postagens. E não é o que queremos.

Antes de tudo, copie o modelo do seu template para evitar problemas.

Adicionando o código do hack

Encontre o seguinte trecho em seu template:

<div id='main-wrapper'>

Adicione o seguinte trecho logo abaixo do código acima.


<b:if cond='data:blog.url == &quot;http://seublog.blogspot.com/&quot;'>
    <span class='stick'>
        <img alt='' src='caminho da sua imagem'/>
    </span>
    <b:else/>
<style type='text/css'>
.stick {
display:none;
}
</style>
</b:if>

No trecho acima, utilizei uma condicional que irá verificar se a página em questão é a url principal.

Adicionando o css

Com o hack já inserido, vamos ao css. Procure pela id #main-wrapper e defina sua posição como relative.


#main-wrapper {
   position:relative;
}

Observação: Não retire as configurações que já estejam na id main-wrapper, só adicione a propriedade acima junto das existentes.

Defina o css do hack, adicione o trecho a seguir abaixo do trecho anterior.


#main-wrapper .img-recente {
   background:url(caminho da sua imagem) no-repeat;
   width:80px; /* comprimento da imagem */
   height:80px; /* altura da imagem */
   display:block;
   position:absolute; /* define o posicionamento como absoluto */
}

Veja o código completo.


#main-wrapper {
   position:relative;
}
#main-wrapper .img-recente {
   background:url(caminho da sua imagem) no-repeat;
   width:80px; /* comprimento da imagem */
   height:80px; /* altura da imagem */
   display:block;
   position:absolute; /* define o posicionamento como absoluto */
}

A classe .img-recente é a classe utilizada pelo hack. Adicione o caminho de sua imagem, e defina o comprimento e largura de sua imagem.

Seu hack já deve estar assim:

estrutura do hack

Definindo a posição do hack

Defina a posição absoluta da imagem do hack.


#main-wrapper .img-recente {
   background:url(caminho da sua imagem) no-repeat;
   width:80px; /* comprimento da imagem */
   height:80px; /* altura da imagem */
   display:block;
   position:absolute; /* define o posicionamento como absoluto */
   top:10px; /* distância do topo */
   left:-70px; /* margem negativa para que a imagem não fique em cima do título do post. */
}

Salve seu template e veja como ficou.

Exemplo do hack

hack configurado e funcionando

Qualquer dúvida é só usar os comentários do blog.

Comentários

  1. Interessante essa alternativa. Ainda não tinha visto algo igual.

    ResponderExcluir
    Respostas
    1. É um hack simples de se aplicar e tem um visual bem bacana.

      Excluir

Postar um comentário

Postagens mais visitadas