Tutoriales sobre Blogger

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.

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>