1. Primeiramente vamos em Design > Editar Html e clicamos em expandir modelos de widgets.
Agora, procuramos por ]]></b:skin>. Copie o código abaixo e cole antes de: ]]></b:skin>.
#post-footer-autor {
width: 100%;
height: 70px; /*Altura da caixa de autor */
background: #669900; /* Cor de fundo da caixa */
margin: 8px 0px 8px 0px; /* Margens da caixa de autor */
border: 2px solid #ccc; /*Borde da caixa*/
}
/* Estilo do avatar */
#autor-avatar {
width: 54px; /* Largura do espaco para o avatar */
height: 54px; /* Altura do espacio para o avatar */
background: #ccc; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Margens do avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo do texto da descricao */
#sobre-autor p{
font-size: 12px; /* Tamanho da fonte */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Cor do texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Cor do enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}
2. Agora vamos procurar esta etiqueta: <div class='post-footer'>, caso não encontre procure por <div id='post-footer'> e cole após ele:
Alterações:
Desta forma, a caixa só será visível após as postagens do autor. Para que ela apareça também na home do blog, apagamos a primeira linha do código: <b:if cond='data:blog.pageType == "item"'> e a última </b:if> do final.
NOME DO AUTOR: Colocamos aqui, o nome do autor exatamente igual ao que aparece no nosso perfil do blog, ou seja, o nome que usamos na nossa conta para postar .
URL DA IMAGEM DO AUTOR: Colocamos aqui a imagem do nosso avatar, que deverá ter aproximadamente 50px por 50px.
DESCRIÇÃO BREVE DO AUTOR: Aqui escrevemos uma descrição breve do autor, usando a vista prévia para calcular o tamanho para que o texto não ultrapasse o espaço disponível.
Quando encontrar uma das duas, copie o código abaixo e cole antes da etiqueta encontrada este código: