Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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:


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
- - 4 Comentarios
Tag

Comentarios (4)

  1. Hola que tal amigo saludos quisiera saber como cmabiarle el color de fondo de la caja ya que me sale transparente y mi blog es igual y no se ven las letras saludos espero tu respuesta

    ResponderEliminar
  2. @Carlos Pavon
    Hola Carlos Pavon lo he marcado en color verde para aquellos que también quieran cambiar el calor de la caja de autor.

    Gracias por tu comentario

    ResponderEliminar
  3. @La Pasion Verde Lamento la demora pero quería tener la entrada creada para lo que me pediste simplemente sigue este enlace Click Aqui

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar