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 una caja de autor con CSS para Blogger. Este tutorial lo podemos agregar debajo de cada entrada o en un entrada en particular para contar sobre nosotros.
Esta caja de autor también posee iconos con tus Redes Sociales.

Antes de comenzar veremos una demostración.

Comencemos:


  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>.
  • Paso 2: Buscamos la siguiente linea (Ctrol + F).
]]></b:skin>
  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS 
<style type="text/css">
****----Caja de Autor con CSS por Tutoriales-Blogger.info----****
.profile{background : #bababa;text-align:left;margin-top:10px;display:inline-block;position:relative;z-index:999;
.profile{text-align:left;margin-top:120px;display:inline-block;position:relative;z-index:999;background:rgba(255,255,255,.5);width:450px;height:205px;border-top:1px solid rgba(255,255,255,.7)}
.profile:before{content:"";width:100%;height:11px;margin-top:205px;background:url(http://maxme-life.ru/tests/arrow_down.png) no-repeat center;position:absolute;z-index:5};
  width:728px; height:280px;
  border-top:1px solid none;
}
.prof_pic{margin-top:10px;margin-left:25px;border-radius:50%;display:inline-block;position:relative;padding:0;line-height:0;
 box-shadow:0 0 0 1px #ccc;
}
.prof_pic img{z-index:0;border-radius:50%;
}
.social{width:90px;height:100%;position:relative;display:inline-block;padding:30px 0;box-sizing:border-box;vertical-align:top;
text-align:center;
}
.social:before{
content:"";top:0;width:1px;left:45px;height:200px;position:absolute;background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2000000', endColorstr='#00000000',GradientType=0 );
}
.social:after{
content:"";left:46px;top:0;width:1px;height:200px;position:absolute;
background: -moz-linear-gradient(top,  rgba(255,255,255,0.76) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.76)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.76) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.76) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.76) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0.76) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.social a{
position:relative;display:block;margin:0 auto;background:white;width:25px;height:25px;margin:15px auto;border-radius:40px;border:1px solid rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.3);position:relarive;z-index:3;
}
.social .twitter{
background:url(http://3.bp.blogspot.com/-y2QGcmB-W8c/UMt2N7nGwZI/AAAAAAAAJkU/cgiX_vZKuJE/s1600/twitter.png)center no-repeat white;
}
.social .facebook{
 background:url(http://4.bp.blogspot.com/-xodteBnLv_o/UMt2MhUxNTI/AAAAAAAAJkI/OaeijLxpGbM/s1600/facebook.png)center no-repeat white;
}
.social .google{
background:url(http://1.bp.blogspot.com/-35AQ0H_SNHQ/UMt2dVSPtmI/AAAAAAAAJkg/cV1dPIIQoN4/s1600/google.png)center no-repeat white;
}
.biodata{
position:relative;display:inline-block;vertical-align:top;text-align:center;
}
.nama{
color:rgba(0,0,0,.8);text-shadow:0 1px 0px rgba(255,255,255,.5);font-size:20px;font-family: 'ubuntu;line-height:0px;padding-top:40px;
}
.status{
  margin:0;
  padding:0;color:rgba(0,0,0,.8);text-shadow:0 1px 0px rgba(255,255,255,.5);font-size:14px;
 font-family: 'ubuntu;
}
.biodata a{
display:inline-block;margin-top:20px;
background: rgb(0,160,221);
background:url(http://maxme-life.ru/tests/bk33.png), -moz-linear-gradient(top,  rgba(0,160,221,1) 0%, rgba(0,92,128,1) 41%);
background:url(http://maxme-life.ru/tests/bk33.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,160,221,1)), color-stop(41%,rgba(0,92,128,1)));
background:url(http://maxme-life.ru/tests/bk33.png), -webkit-linear-gradient(top,  rgba(0,160,221,1) 0%,rgba(0,92,128,1) 41%);
background:url(http://maxme-life.ru/tests/bk33.png), -o-linear-gradient(top,  rgba(0,160,221,1) 0%,rgba(0,92,128,1) 41%);
background:url(http://maxme-life.ru/tests/bk33.png), -ms-linear-gradient(top,  rgba(0,160,221,1) 0%,rgba(0,92,128,1) 41%);
background:url(http://maxme-life.ru/tests/bk33.png), linear-gradient(to bottom,  rgba(0,160,221,1) 0%,rgba(0,92,128,1) 41%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0dd', endColorstr='#005c80',GradientType=0 );
color:white;font:14px Trebuchet MS;text-decoration:none;padding:5px 25px;text-shadow:0 2px 1px rgba(0,0,0,.6);border:1px solid #006ab9;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.8);
}
</style>

Ahora agregaremos nuestra cada de autor debajo de cada post o en una entrada en particular  

Agregar nuestra cada de entrada debajo de cada entrada.

  • Paso 5: Buscamos la siguiente linea (Ctrol + F)
 <data:post.body/>
  • Paso 6: Justo por encima de  <data:post.body/> pegamos el siguiente código HTML
<div class="profile">
<div class="effect">
</div>
<div class="prof_pic">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c35.35.442.442/s160x160/6298_628527040491180_1971615314_n.png" /></div>
<div class="social">
<a class="twitter" href="https://twitter.com/TutorialesBlogg"></a>
<a class="facebook" href="https://www.facebook.com/TutorialesBlogger"></a>
<a class="google" href="https://plus.google.com/u/0/102309934171768207604"></a>
</div>
<div class="biodata">
<div class="nama">
Fernando Salas</div>
<div class="status">
<br /></div>
<a href="http://www.tutoriales-blogger.info/p/quienes-somos.html">Seguir Leyendo</a>
</div>
</div>
  • Paso 7: Guardamos los cambios realizados en la plantilla

Nota:-  Solo debemos lo que esta en Rojo por la URL de tu Imagen
Nota:-  Cambia lo que esta en Rojo por las URL de tus redes Sociales 
- - 2 Comentarios
Tag

Comentarios (2)

  1. Este comentario ha sido eliminado por un administrador del blog.

    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