Dicas do Ryu esta de volta

E isso ai assim que eu volta a fazer as atualizações as dicas do Ryu estarão de volta desde ja ja adianto ai para vocês este codigo que da a posibilidade de colocar avatar nas postagens.


Imagem do autor ao lado do título do post

Essa dica é interessante para aqueles blogs que têm mais de um autor/membro, ou seja, se em seu blog tem mais de um autor para os posts e você quer organiza-los, colocando uma imagem(avatar) ao lado do título do post para a fácil identificação do autor.

Essa modificação é simples, porém, deixa um resultado estético e funcional de altíssima qualidade. Dando assim um aspecto mais profissional no seu layout.

Vamos ao que interessa:

1. Vá para Editar HTML;

2. Marque a caixa Expandir modelos de widgets;

3. Procure o seguinte código:

    <b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <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>

4. Logo abaixo da linha em do codigo abaixo adicione as seguintes linhas:
     <a expr:name='data:post.id'/>

    <b:if cond='data:post.author == "AUTOR1"'>
    <span class="author"><img src="IMAGEM1_URL"/></span>
    </b:if>
    <b:if cond='data:post.author == "AUTOR2"'>
    <span class="author"><img src="IMAGEM2_URL"/></span>
    </b:if>

Você pode adicionar mais tags se o blog tiver mais de 2 autores/membros.

Você deve ter em mente que o código é case sensitive. Neste caso autor1 não é o mesmo que AUTOR1. O nome do usuário que você inserir deverá ser idêntico ao que está no perfil do Blogger. O ideal é ima imagem com as dimensões 30x30 ou 50x50 pixels.

5. Agora procure a linha ]]</b:skin> e adicione acima dela a seguinte linha

    .author img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}

A tag float bem como a border podem ser mudadas dependendo do local onde pretende que a imagem seja mostrada.

Veja AQUI um exemplo do resultado.

Espero ter ajudado!

Lembre-se sempre do BACKUP antes de qualquer modificação. Antes de SALVAR O MODÊLO clique em VISUALIZAR para ter certeza de que está tudo certo.

Postem seus comentários.