Como Adicionar uma Imagem ao Lado dos Títulos dos Posts do Blogger

Personalize o título das postagens do blog colocando ao lado uma imagem, padronizando o estilo ao contexto publicado.

Cada vez mais pessoas buscam se tornar blogueiros e mesmo sem entender de programação personalizam suas páginas graças a facilidade e a imensa quantidade de possibilidades proporcionadas pela plataforma Blogger.

Como “tudo” no Blogger pode ser personalizado, um ponto até tido como um dos principais não poderiam ficar de fora, o título das postagens. Através deles é que os visitantes chegam até seu blog interessado é claro no contexto que ele representa, como agora você está lendo essa postagem interessado em colocar uma imagem ao lado do título da postagem.

Imagem Personalizada ao Lado do Título das Postagens

Primeiramente, indicamos que você escolha a imagem a ser utilizada, que poderá ser o que desejar, partindo do logotipo do seu blog, algo referente aos artigos, sua foto e o que mais sua criatividade permitir. Essa imagem, poderá ser criada em um editor de imagens ou simplesmente baixada da internet, porém, algo que recomendamos é o tamanho, que acreditamos para que não se torne algo bagunçado em suas páginas ela deverá ter a proporção de 40x40 px, mas caso achar que fique melhor com um tamanho maior ou menor fica a seu critério. Após isso, hospede-a em um servidor de sua preferência para utilizarmos sua URL.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar Imagem ao Lado dos Títulos das Postagens do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por:

<b:includable id='post' var='post'>

>> Clique na "Setinha preta" ao lado para expandir o código.

>> Selecione e exclua todo o trecho como mostrado na imagem abaixo.

>> No local do trecho excluído, cole o seguinte código:

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'>
           <img src='IMAGE-URL'/></td>
        <td><h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
    
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
  
    </b:if>

* Substitua o trecho destacado IMAGE-URL pela url da imagem desejada.

>> Clique em "Visualizar", estando de acordo como deseja clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a conclusão do processo seu blog já exibirá ao lado do título de todas as postagens a imagem que você escolheu. Essa é mais uma forma de padronizar o blog de acordo com seu gosto e estilo, e além disso, colocar imagem ao lado do título das postagens é um método de melhorar o design de suas páginas deixando-as com visual elegante e único.

Deixe seu comentário, pois ele é a motivação para nosso trabalho