Nota: esta box de autôr foi alterada ,modificada,actualizada...
Boas tardes chegando do trabalho ,mas personalizei esta box acima como está exemplo aqui imagem e vim postar ,partilhar aqui com vcs. É uma box de autor com redes sociais e com efeito no hover ,efeito esse de box shadow.
Não está visivel online mas é como na imagem acima..
Antes de tudo faça uma cópia do seu template...
Vamos em modelo no seu blog e depois editar html e procure 1 destes códigos:
Agora abaixo uma dessas linhas coloque este meu código...
/*autorbox/ http://best-tuga.blogspot.pt/*/
<b:if cond='data:blog.pageType == "item"'>
<style>
.bt-boxinfo {
float: left;width: 560px;font:normal 14px Arial Black ;color:#000;padding: 10px;
border:1px solid #000;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
margin-bottom: 5px; margin-top: 5px; background-color: #666;
box-shadow: 0px 0px 20px -5px #000;-moz-box-shadow: 0px 0px 20px -5px #000;-webkit-box-shadow: 0px 0px 20px -5px #000;-ms-box-shadow: 0px 0px 20px -5px #000;-o-box-shadow: 0px 0px 20px -5px #000;
}
.bt-boxinfo h3 {
width: 250px ; height:40px;font:16px Lobster;text-transform:none;
background-color: #fcfcfc;margin-left:90px;
border: 1px solid #000;line-height: 2.5;
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;
-webkit-border-top-right-radius:8px;-webkit-border-top-left-radius:8px;
-moz-border-radius-topright:8px;-moz-border-radius-topleft:8px;
border-top-right-radius:8px;border-top-left-radius:8px;
color:#000;text-shadow: 0 0.06em 0 #fff;margin-bottom: -53px;text-align: center;}
.bt-boxinfo p {font:16px Lobster;line-height: 1.5;margin-bottom: 5px;margin-left:2px;}
.bt-boximg {
float: right;
margin: 0px 0px 0 5px;
}
.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;}
</style>
<div class='bt-boxinfo'>
<div class='bt-boximg'>
<img height='100px' 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>
<h3>ADM-BLOG:</h3>
<div align="right">
<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>
Coloque stylesheet abaixo da header do seu blog bem inicio template...
Feito salve e veja como ficou.
Nota: procure por este código; width: 560px; e coloque sua largura quiser.
Nota: onde diz seu nome aqui coloque seu respectivo a cada rede social.
Foi esta a partilha ,duvidas disponha até mais...
Mostra SmilesOculta Smiles