Boa sexta feira,vamos lá a mais uma partilha. Como na imagem acima mostra trago uma box autôr com redes sociais, online (addthis). Box simples com icones no nick e no resumo e efeito simples no hover da foto,avatar e claro com botões addthis. Mas veja online aqui:Entre Aqui!!!
Agora vamos aplicár só de uma vez só, entre em modelo do seu template e vá html .
Antes de tudo faça uma cópia do seu template...
(1)Procure este código:
E acima coloque o meu código que deixo abaixo:
Outras opções caso não tenha este código no seu template,pois consuante o tema pode alterar:
Aqui se optar este código coloque abaixo:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.perfillbt{font:11px Lobster;text-transform:none;font-weight:400;border-radius:2px;border:2px solid #000; margin: 10px 0px;-moz-box-shadow:0 0 3px #e0e0e0;
-webkit-box-shadow:0 0 3px #e0e0e0;
box-shadow:0 0 3px #e0e0e0; padding: 10px; width: auto; height: 80px; background:#666;
-moz-box-shadow: 0 1px 0 inset;}
.title{color:#fcfcfc;text-shadow: 0 0.06em 0 #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzjlXxgpAYfTDZysQwm8Q70VnYEfg9hAJrScKa2WCPzEx-_5f4u0-Fk6_JnWXIZiYjstSyOW1rgmVMcpXRoulY98w7qyfps_yscJYlqITAvdDUzjtW59x4Mv0jjGE6kybd88AwtygtBQ/s1600/photo.gif) left center no-repeat;padding:1px 5px 1px 15px}
.resaut{color:#fff;text-shadow: 0 0.06em 0 #f0f0f0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3S-xuRTsmJI8unhoCC7HG6nd_elbG6zOhV30FkFmwgwV-8ZOJ-QinpvriE_VNGhTCdWty4hwyokRrSy6uHZxemNfc9fMVLS2YHDmOPa5IxN3b7wU_7Yb2tXqDZZBkBOf5DOf8onWR38/s1600/bookmark.gif) left center no-repeat;padding:1px 2px 1px 15px}
.perfillbt img{border-radius:8px;width:77px;height:77px;margin:0 10px 0 0;float:left;padding:2px;background:#555;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;}
.perfillbt img:hover{ border-radius: 50%;}
.social{float: left;width: 200px;overflow: hidden;position: relative;margin-left: 80px;top:10px;height: 35px;padding: 4px 5px;background: #666;border-radius: 2px;border: 1px solid #000;}
.social span{float:left;padding:6px 0}
.addthis_toolbox{height:20px;width:200px;float:left;overflow:hidden;margin:8px 0}
</style>
<div class='perfillbt'>
<img src='http://i.imgur.com/tL21RaB.png'/>
<span class='title'>Autôr:</span><br/><br/><br/>
<span class='resaut'>Espaço de partilha,troca ideias...</span><br/><br/>
<div class='social'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_preferred_1'/>
<a class='addthis_button_preferred_2'/>
<a class='addthis_button_preferred_3'/>
<a class='addthis_button_preferred_4'/>
<a class='addthis_button_preferred_5'/>
<a class='addthis_button_preferred_6'/>
<a class='addthis_button_preferred_7'/>
<a class='addthis_button_preferred_8'/>
<a class='addthis_button_preferred_9'/>
<a class='addthis_button_compact'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-577d901c564e1c6f' type='text/javascript'/>
</div>
</div>
</b:if>
Pronto feito isto aqui deixo como alterar a box autôr/redes sociais:
(1) http://i.imgur.com/tL21RaB.png /troque pela sua imagem.
(2) Autôr: / escreva quiser.
(3) Espaço de partilha,troca ideias... / escreva quiser.
(4) Entre neste link: AddThis e faça sua conta,depois pegue id e troque por este(577d901c564e1c6f)
Pronto feito isto já tem tudo certinho no seu blog,até um próximo tutorial/partilha.
Mostra SmilesOculta Smiles