Dois modelos de Gadget do Autor


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


GIF Anuncio 468x60

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-->


eletronicos/gif/468x60.gif

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 == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nome do autor&quot;'>
<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.



Marcadores:

Postar um comentário

Alberto Monteiro

{twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL}

Formulário de contato

Nome

E-mail *

Mensagem *

Tecnologia do Blogger.
Javascript DisablePlease Enable Javascript To See All Widget