Como Colocar Descrição do Autor no Final dos Posts do Blog

Espaço para colocar a descrição do autor no final das postagens do blog com um design moderno e botões para redes sociais.

A partir do momento que começamos a publicar em um blog precisamos identificá-lo a seu proprietário. Para isso, é necessário destinar uma área para exibir um pouco sobre quem publica, quem cria, quem é o responsável por aquelas páginas. Isso já existe por padrão graças a possibilidade de colocarmos um perfil do Google+ em nossos blogs, mas, muitas vezes nem todos querem exibir seu perfil e outros nem mesmo desejam cria-lo.

Outro ponto negativo, é a dificuldade de personalizar o widget com esse perfil no blog, já que não encontramos muitas opções por aí. Apesar de tudo, graças ao desenvolvimento Html e CSS, é possível a criação de uma box para colocarmos referências do autor das postagens, e, com a possibilidade de personalizarmos para ficar como desejamos.

Box com nome e descrição do autor das postagens

Trazemos uma interessante opção para você que deseja colocar ou modificar uma área para descrição de autor nas postagens de seu blog. Com esse código, você poderá adicionar uma imagem, seu nome, uma pequena descrição, o link de seu blog e botões para seus perfis nas principais redes sociais, tudo isso complementado com uma cor de fundo que poderá combinar com suas páginas.

A configuração é muito simples, mesmo que você não tenha nenhuma experiência verá a facilidade de personalizar a box e mostrar um pouco de você, o que faz, seus gostos para todos os visitantes de seu blog.

 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.

Colocando descrição do autor das postagens em seu blog

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

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* Author Box
----------------------------------------------- */
#author-info {
background: #6C7B8B;
color: #FFFFFF;
display: block;
overflow: hidden;
padding: 10px;
word-wrap: break-word;
}
#author-info img {
float: left;
height: 100px;
margin: 5px 25px 0 0;
width: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#author-info p {
padding-left: 125px;
}
#author-info h5 {
color: #FFFFFF;
font-family: 'Open Sans',arial,sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 26px;
margin: 0 0 0 122px;
padding-bottom: 10px;
}
#author-info a {
color: #E3E514;
text-decoration: none !important;
}
#author-info a:hover {
text-decoration: underline !important;
}
#author-info .web_l {
padding: 15px 0 0 125px;
font-weight: 600;
font-size: 16px;
font-family: 'Open Sans',arial,sans-serif;
}
#author-info .web_l a {
font-weight: 600;
text-decoration: none;
}
#author-info h4 {
font-family: 'Open Sans',arial,sans-serif;
font-size: 16px;
font-weight: 600;
}
#author-info #social_menu {
float: left;
padding: 15px 0 0 110px;
position: relative;
}
#author-info #social_menu ul {
overflow: hidden;
}
#author-info #social_menu ul li {
display: block;
float: left;
margin-right: 5px;
}
#author-info #social_menu ul li:hover {
opacity: 0.9;
}
#author-info #social_menu ul li a {
display: block;
float: left;
text-decoration: none;
}
#author-info #social_menu ul li a span {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZpc5BR4rskwuXkZPdIR4Szf1ZTf3ki-SG2kKYDcHe4UEdjQW5NmM6MGg9kOCmwYcR6Cf_VuzdqTnZux0T_VveS3E1QEHKg9Trbz5lAoJkDA8Fm_11e1WUqfUANfowQh_g5Or0ePFTgJg/s1600/social_icon.png") no-repeat;
float: left;
text-indent: -9999px;
width: 30px;
height: 25px;
}
#author-info #social_menu ul li.ss-rss, #author-info #social_menu ul li.ss-twitter, #author-info #social_menu ul li.ss-facebook, #author-info #social_menu ul li.ss-google-plus, #author-info #social_menu ul li.ss-youtube, #author-info #social_menu ul li.ss-linkedin {
background: #3396b9;
}
#author-info #social_menu ul li.ss-rss a span {
background-position: -9px -12px;
}
#author-info #social_menu ul li.ss-twitter a span {
background-position: -9px -103px;
}
#author-info #social_menu ul li.ss-facebook a span {
background-position: -9px -59px;
}
#author-info #social_menu ul li.ss-google-plus a span {
background-position: -9px -147px;
}
#author-info #social_menu ul li.ss-youtube a span {
background-position: -9px -193px;
}
#author-info #social_menu ul li.ss-linkedin a span {
background-position: -9px -237px;
}

Ajuste:

* Em AMARELO, cor de fundo da box do autor.

* Em AZUL, cor do texto dentro da box.

* Em LARANJA, cor do link dentro da box.

>> Pesquise agora por <div class='post-footer'>
* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

>> Logo ABAIXO do trecho encontrado, cole o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<div id="author-info">
<img alt="" class="avatar avatar-120 photo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVyd_ehEqsgP8dMwYXPwsMEdwSBZMB8wj4fCfUVFyHHO1_ZdcOxBZ4Js_Z8H8-ISnw5DffC1wL_3enJBsKMtEHZv-EErFfkaB50wOFqEGumvEV4dPzm15KijNJWOvvukjQ7yOKF7gWsU/s1600/avatar.png"/>
<h5>Nome do Autor</h5>
<p>Aqui você colocará uma breve descrição sobre o autor das postagens, que poderá ser seus gostos, profissão, cor favorita ou o que mais desejar!</p>
<div class="web_l">Website: <a href="http://SEUBLOG.blogspot.com/" rel="nofollow" target="_blank">http://SEUBLOG.blogspot.com/ </a></div>
<div id="social_menu">
<ul>
<li><h4>Social Links:</h4></li>
<li class="ss-rss"><a href="LINK FEED" rel="nofollow external" target="_blank">
<span>Rss</span></a></li>
<li class="ss-facebook"><a href="LINK FACEBOOK" rel="nofollow external" target="_blank">
<span>Facebook</span></a></li>
<li class="ss-twitter"><a href="LINK TWITTER" rel="nofollow external" target="_blank">
<span>Twitter</span></a></li>
<li class="ss-google-plus"><a href="LINK GOOGLE+" rel="nofollow external" target="_blank"><span>Google+</span></a></li>
<li class="ss-linkedin"><a href="LINK LINKEDIN" rel="nofollow external" target="_blank">
<span>Linkedin</span></a></li>
<li class="ss-youtube"><a href="LINK YOUTUBE" rel="nofollow external" target="_blank">
<span>Youtube</span></a></li>
</ul>
</div>
</div>
</b:if>
</b:if>

Configuração:

* Em ROSA, substitua pela url da imagem do autor.

* Em VERDE, substitua pelo nome do autor.

* Em AMARELO, substitua por uma pequena descrição do autor.

* Em AZUL, substitua pela url de seu blog.

* Em VERMELHO, substitua pelos links dos perfis nas redes sociais correspondentes.

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

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

Após a conclusão do tutorial, box com a biografia do autor já aparecerá em todas as postagens de seu blog e, caso você já a tenha personalizado de acordo com a maneira informada, suas páginas já conterão o seu toque especial de publicador.

" Lembrando que essa box aparecerá apenas nas páginas das postagens de seu blog."

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