Bueno bloggers antes que nada pido disculpas por el error garrafal que eh tenido con una entrada anterior denominada

Como siempre muestro una demostración del tutorial del que vamos a realizar y siempre encuentro un detalla para corregir pero en esta entrada no tuve tiempo recuerdo y no realice la demostración para corregir errores que siempre salteo. Al no tener una demostración,  no pude corregir este error que ustedes me indicaban. No lo hagamos mas largo y corrijamos este tutorial

Antes de comenzar veremos una demostración:
Demo

Comencemos: 

  • Paso 1: Vamos a Blogger>> Plantilla>> Edición 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 
.TBTpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:auto;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
text-shadow:1px 0 0 #fff;
color:#111;
border: 2px solid #c4c4c4;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
}
.TBTpostauthoravatar {
background: #fff;
border: 1px solid #D3D3D3;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.TBTpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.TBTpostauthoravatar:hover img {
opacity: 1;
}
.TBTpostauthorlabel {
background: url("https://lh6.googleusercontent.com/-i1ah-jfaB-8/UcYR-IhjHNI/AAAAAAAABKI/WPUcrbvfMoM/h64/AdminTutorialesBlogger.info.png") no-repeat center transparent;
display: block;
height: 25px;
position: absolute;
bottom: -30px;
width: 128px;
}
.TBTpostauthorcontent {
margin-left: 160px;
}
.TBTpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.TBTpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TBTpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.TBTpostauthorbox p a {
color: #E65002;
}
.TBTpostauthorbox-footer{
padding:10px 0 10px;
font:bold 12px Trebuchet MS;
}
  • Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F) 
<data:post.body/>
  • Paso 5: Seguramente aparecerán mas de 3 <data:post.body/>  debajo de todos los códigos a buscar pegamos el siguiente código HTML.
<div class="TBTpostauthorbox">
<div class="TBTpostauthoravatar">
  <img alt="Fernando Salas" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c35.35.442.442/s160x160/6298_628527040491180_1971615314_n.png"/>
<div class="TBTpostauthorlabel"></div>
</div>
<div class="TBTpostauthorcontent">
<div class="TBTpostauthorhead">
<h5>
  Creada por:
                            <a href="http://www.tutoriales-blogger.info/p/quienes-somos.html" title="Fernando Salas">
                              Fernando Salas
                            </a>
</h5>
</div>
<div class="postAuthorbio">
                          Fernando es un joven de 20 años de Buenos Aires, Argentina, desde la adolescencia le encanto el mundo de Blogger. A sus primeros 15 años comenzó a escribir en foros y web como autor sobre HTML y CSS. El 24 de Noviembre de 2012 llego su propio blog denominado Tutoriales-Blogger.info.
                          <b>
</b>
</div>
<div class="postauthorbox-footer">
<div style="float:left;text-align:left;">
                            Siguenos en:
                            <a href="https://twitter.com/TutorialesBlogg" rel="nofollow">
                              Twitter
                            </a>
                            |
                            <a href="https://www.facebook.com/TutorialesBlogger" rel="nofollow" target="_blank">
                              Facebook
                            </a>
                            |
                            <a href="https://plus.google.com/u/0/102309934171768207604/posts" rel="nofollow" target="_blank">
                              Google Plus
                            </a>
</div>
</div>
</div>
</div>
  • Paso 6: Guardamos los cambios realizados en la plantilla. 
Nota: Cambiamos la URL de tus Redes Sociales en Roja
Nota: Cambia las URL de las imagenes en rojo por las que tus quieras Roja

Espero sepan disculpar con el tutorial anterior mal realizado 


- - 4 Comentarios
Tag

Comentarios (4)

  1. ¿Como hago si mi blog tiene varios autores?

    ResponderEliminar
    Respuestas
    1. Solo tienes que agregar el paso 5 tantos co-autores tengas, si tienes 2 co-autores agregas el paso 5 dos veces. Espero que me hallas entendido

      Eliminar
:))
:((
: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