Adblock Detectado

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

He desactivado Adblock

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