Boas tardes chegando do trabalho ,mas personalizei esta box, e acima está exemplo .
É uma box de autor com redes sociais e com efeito shadow box na foto ,tambem botão para o perfil. Eu simplifiquei este gadget para usar só html um único código só para adicionar.
Nota: foi alterado,modificado,personalizado de novo...
ANTES DE TUDO FAÇA UMA CÓPIA DO SEU TEMPLATE...
Vamos lá entrar no painel do seu template e depois em modelo e click editar html.
Agora procure este código:
E abaixo de um desses trechos,linhas coloque o meu código:
/*box autor/ http://best-tuga.blogspot.pt/*/
<b:if cond='data:blog.pageType == "item"'>
<style>
.bt-boxinfo {
margin:0px;padding:8px;background-color: #666;
border:1px solid #fcfcfc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
overflow:hidden;width: 560px;font:normal 14px Lobster;text-transform:none;color:#000;
}
.bt-boximg {
float:left;margin: 0px 10px 0 0px;
}
.bt-boximg img {
-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px #ffffff;-moz-box-shadow: 0 0 3px #ffffff;box-shadow: 0 0 3px #ffffff;
}
.bt-boximg img:hover {
-webkit-box-shadow: 0 0 20px #000, inset 0 0 20px #000;-moz-box-shadow: 0 0 20px #000, inset 0 0 20px #000;box-shadow: 0 0 20px #000, inset 0 0 20px #000;}
.bt-boxinfo h3 {
width: 580px;margin:0px;margin-left:-10px;text-shadow: 0px 1px 0px #000, 0px 2px 0px #fff, 0px 4px 0px #666;
background-color: #fcfcfc;font:18px Lobster;border: 1px solid #afafaf;
box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
color:#666;margin-bottom: 3px;text-align: center;}
.bt-boxinfo p{color:#fff;text-transform:normal;padding:0px;font:16px Lobster;line-height:20px;margin-bottom: 5px;padding-left: 5px;}
.btn {
border: 1px solid #666;color:#fff;background: #666; border-radius: 5px;margin-top: -25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #000, 0px 4px 0px #000;
display: block;margin-left: 228px;padding: 5px 6px;text-transform: normal;
text-decoration:none;font:bold 12px Montez;width: 85px;text-align: center;letter-spacing:1px;
box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;}
.btn:hover {background: #fff; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
</style>
<div class='bt-boxinfo'>
<div class='bt-boximg'>
<img height='80px' src='http://i.imgur.com/ML5OYg6.jpg' width='120px'/>
</div>
<p><a href=''></a> Leve a sério o que quer que faça. Mais tarde verá que tudo parece uma brincadeira, e então divirta-se com seu trabalho ...<br style='clear:both;'/></p>
<a href="https://plus.google.com/u/0/116651899597429747649/" class="btn">Perfil!</a>
<h3>Autôr</h3>
<div align="center">
<a class="social-icons" href="https://facebook.com/s nome aqui"><img src="http://i.imgur.com/bfYPaHB.png?1" /></a>
<a class="social-icons" href="https://twitter.com/s nome aqui"><img src="http://i.imgur.com/cDX8TEX.png?1" /></a>
<a class="social-icons" href="http://www.digg.com/seu nome aqui"><img src="http://i.imgur.com/XQDJnsf.png?1" /></a>
</div>
</div> </b:if>
Bem feito isto pode ir até <head> bem inicio do seu template e adicione stylesheet.
Notas; troque a imagem , troque nome autor , troque a frase , e coloque nome redes sociais.
Estou modificando alguns códigos pois estão ultrapassados então modificarei mais alguns.
Mostra SmilesOculta Smiles