Adicione um gadget do autor em seu blog, e toda vez que seus leitores lerem um artigo, eles saberão quem escreveu, isso se o blog tiver mais de um autor. Este gadget é uma boa opção para você acrescentar em seu blog. Então, vou postar duas formas de adicionar esta gadget.
1 Opção
Neste Gadget você poderá adicionar seus links de redes sociais como google+, twitter, facebook, seu contato E-mail e o link de seu site, se tiver outro. Deve resaltar que não é preciso colocar o link do seu site principal, onde você colocará este gadget.
"Aconselho a você que antes de fazer as alterações em seu blog, faça um backup antes".
Vá em Modelo > Editar HTML > Dê um CTRL+F > Procure pelo trecho ]]></b:skin> e acima, cole o código abaixo.
Agora vamos adicionar o HTML do gadget do autor novamente. Dê um CTRL+F e procure pelo trecho <div class='post-footer-line post-footer-line-1'> adicione abaixo dela o código e salve.
Faça as alterações da foto, perfil das redes sociais e bio.
Para trocar a imagem "MDB ADM", procure pelo código abaixo e substitua pela url de sua imagem.
https://lh4.googleusercontent.com/-ttCbMtsf23I/UO71-LQl0eI/AAAAAAAABu0/xzdy6QwUBTc/h70/MBD-ADMINblog.png
Para facilitar as alterações veja abaixo, o que você pode mudar. Todos destacados de vermelho.
<!--começo do gadget MBD html-->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='MBDpostauthorbox'>
<div class='MBDpostauthoravatar'>
<img alt='Jay Ryan Macabato' src='https://lh6.googleusercontent.com/-asIhNfKkobE/UO7z1tG1SBI/AAAAAAAABuY/6hQrki88es0/h120/CARLINHOS+CACHUERA.jpg'/>
<div class='MBDpostauthorlabel'></div>
</div>
<div class='MBDpostauthorcontent'>
<div class='MBDpostauthorhead'>
<h5>Postado Por:
<a href='https://plus.google.com/u/0/ID-da-sua-página/' title='Seu nome aqui'>Seu Nome aqui</a></h5>
</div>
<div class='MBDpostAuthorbio'>
ESCREVA AQUI SUA BIOGRAFIA <a href='URL-DO-SEU-SITE' target='_blank'><b>SEU-SITE</b></a> E <a href='URL-DO-SEU-SITE Contato' target='_blank'><b><i>E-mail</i>Blog</b></a>!</div>
<div class='MBDpostauthorbox-footer'>
<div id="soc">
<div class="soc">
<a class="facebook" href="http://www.facebook.com/NOME-DA-SUA-PAGINA-do-facebook" target="_blank">Facebook</a>
<a class="twitter" href="https://twitter.com/SEU-TWITTER" target="_blank">Twitter</a>
<a class="googleplus" href="https://plus.google.com/u/0/SEU ID" target="_blank">Google Plus</a>
</div>
</div>
</div>
</b:if>
<!--final do gadget do autor MBD html-->
2 Opção
Para esta segunda opção de gadget, é necessário ter um pouco de conhecimento em CSS. Mais, você pode deixa-lo da forma que você deseja basta seguir as instruções abaixo.
Vá em Modelo > Editar HTML > Dê um CTRL+F > Procure pela tag ]]></b:skin> e cole o código abaixo desta tag.
/* Autores
----------------------------------------------- */
#post-footer-autor {
width: 100%;
height: 77px;
background: #e6e6e6; /*Cor do plano de fundo*/
border: #ccc; /*Cor da borda*/
margin: 8px 0px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; /*Espessura da borda*/
}
#autor-img {
width: 64px; /*largura da imagem*/
height: 64px; /*altura da imagem*/
background: #fff; /*plano de fundo da imagem*/
float: left;
margin: 7px;
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #333; /*Cor do texto*/
}
#autor-sobre a{
color: #3d85c6; /*Cor dos links*/
text-decoration:none;
}
#autor-sobre a:hover {
color: #9A9A9A; /*Cor dos links ao passar o mouse*/
text-decoration:underline;
}
Se você tem conhecimento em CSS, você pode fazer as alterações, onde está destacado em vermelho.
Agora procure por <div class='post-footer'> e cole ANTES dessa tag o seguinte código:
<!-- Resumo dos autores-->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Nome do autor"'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/>
</div>
<div id='autor-sobre'>
<p>
<b>Sobre o autor:</b>
Faça uma breve descrição. <a href='link'> Nome do link</a></p>
</div>
</div>
</b:if>
</b:if> <!--Resumo dos autores Final-->
Antes de salvar, faça as seguintes alterações:
Em Nome do autor, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.
Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64.
Em Faça uma breve descrição, escreva algo sobre o autor.
Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc)
Em Nome do Link, escreva o nome da página que está sendo linkada.
OBS: Se seu blog tiver mais de um autor, repita o segundo código para cada um deles.
Depois de editar, visualize e estando tudo okay, salve.
Postar um comentário