Pular para o conteúdo principal

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 deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.