Tutoriales Sobre Blogger: Caja de autor con botones de suscribirse a tu Redes Sociales

En Este tutorial veremos como agregar al final de cada entrada una caja de autor con botones de tus Redes Sociales tales como Facebook, Twitter, Google.
Esta caja de autor se situara al final de cada entrada dándole mas estilo a tu blog

Antes de comenzar veremos una demostración:

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>Expandir Plantilla de Artilugios.
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

.author{position:relative;padding:20px 0;border-top:1px solid #fff;border-bottom:1px solid #bbb}
.exlefttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:11px;left:-10px;z-index:4}
.exleftbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:113px;left:-10px;z-index:4}
.exrighttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:11px;right:-10px;z-index:4}
.exrightbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:113px;right:-10px;z-index:4}
#dxh-reb{width:598px;height:100px;margin:0;padding:0;background:#5390ad;border-top:1px solid #42718b;border-bottom:1px solid #42718b;position:relative;top:0;left:-10px;z-index:5}
.author-box{padding:22px 20px;line-height:18px;font-family:Arial;font-size:15px;color:#fff}
.author-box a{color:#fff600}
.author-box a:hover{color:#590000}
.author-avatar{height:50px;width:50px;float:left;margin:4px 10px 15px 0}
.author-inf{padding:5px}
.author-inf a{padding:2px 5px;display:inline;border-radius:3px;margin:5px;color:#fff600}
.author-inf a:hover{background:#00a6dd;color:#fff;box-shadow:0 1px rgba(255,255,255,.2) inset}
.plus{float:right;padding-right:20px;margin-top:-5px}
.share {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
}
.share_size_large {
width: 60px;
}
.share__count {
background-color: #fff;
border: solid 1px #a5b1bd;
border-radius: 3px;
/* add in vendor rules */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #424a4d;
float: left;
font-weight: bold;
margin-right: 10px;
padding: 4px 10px;
position: relative;
text-align: center;
}
.share_size_large > .share__count {
display: block;
float: none;
font-size: 18px;
margin-right: 0;
margin-bottom: 12px;
padding: 10px 0;
}
.share__count:before, .share__count:after {
  content: '';
  display: block;
height: 0;
top: 50%;
  position: absolute;
right: -14px;
  width: 0;
margin-top: -6px;
}
.share_size_large > .share__count:before, .share_size_large > .share__count:after {
  content: '';
  display: block;
height: 0;
left: 50%;
  position: absolute;
top: auto;
  width: 0;
}
.share__count:before {
border: solid 7px transparent;
border-color: transparent transparent transparent #a5b1bd;
} .share_size_large > .share__count:before {
  border-color: #a5b1bd transparent transparent transparent;
bottom: -14px;
  margin-left: -7px;
}
.share__count:after {
border: solid 6px transparent;
border-color: transparent transparent transparent #fff;
right: -12px;
margin-top: -5px;
}
.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}
.share__btn {
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
/* add in vendor rules */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.share_size_large > .share__btn {
padding: 5px 0;
width: 100%;
}
.share_type_twitter > .share__btn {
background-color: #4099FF;
}
.share_type_facebook > .share__btn {
background-color: #3B5999;
} .share_type_gplus > .share__btn {
background-color: #F90101;
}

Nota:- width:598px Es el ancho de tu blogg, 
           height:100   Es la altura de la caja de autor

• Paso 4: Todabia en la plantilla buscamos la siguiente linea (Ctrol + F)

<div class='post-footer-line post-footer-line-3'>

• Paso 5: Justo por encima de <div class='post-footer-line post-footer-line-3'> pegamos el código HTML 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both;'/>
<div class='author'>
<div class='exlefttop'/><div class='exleftbottom'/><div class='exrighttop'/><div class='exrightbottom'/>
<div id='dxh-reb'>
<div class='author-box'>
<div class='author-avatar'><img height='50' src='http://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAArg/mKzD-jmZS-k/s512-c/photo.jpg' width='50'/></div>
<a href='http://www.tutoriales-blogger.info/' target='_blank'><b>Tutoriales Blogger</b></a>:Tips y tutoriales blogger: Todo lo que quieras saber de blogger lo encontraras aquí <br/>
<div class='author-inf'>
Síguenos:
<div class='share share_type_twitter'>
<a class='share__btn' href='#'>Twitter</a>
</div>
<div class='share share_type_facebook'>
<a class='share__btn' href='#'>Facebook</a>
</div>
<div class='share share_type_gplus'>
<a class='share__btn' href='#'>Google +1</a>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d220d76108d54c2' type='text/javascript'/>
</div></div>
</div>
</b:if>

• Paso 6: Guardamos los cambios realizados en la plantilla 

Nota:- Azul Es la URL del avatar de la caja de Autor
          OJO Modificarlo con tu texto deseado
          OJO Las URL de tu sitio y tus Redes Sociales