Código do box Autor+Redes sociais

Views:
CÓDIGO HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='LINK DE SUA PÁGINA SOBRE' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>COLOQUE AQUI O TEXTO QUE DESEJAR      
</p>
<div class='authorsocial'>
<a class='img-circle1' href='LINK DE SEU FACEBOOK' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='LINK DE SEU TWITTER' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='LINK DE SEU GOOGLE+' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='img-circle4' href='LINK DE SEU INSTAGRAM' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>



CÓDIGO CSS:

/* CSS Box Multi Autor by Elaine Gaspareto */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:nth-child(4) i {background:#517fa4;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) ,.authorsocial a:hover:nth-child(4)i {opacity:0.90;}



CÓDIGO DA FONTE ESPECIAL:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage