[Tutorial] Widgets personalizado debajo de tus entradas.

Avatar de: reloj
Status: Escuchando snow kiss ending 1 de D.Gray-Man
Hoy Hice: modifique un codigo
Tema a Tratar: Un Tutorial
Palabra: lluvia
Ultima Serie Vista: Zetman Cap 02

Halo! como andan? hoy vengo con un tutorial bastante simple para que logren tener un widget personalizado como el que tengo yo en el blog en la parte inferior al termino de las entradas en donde habla un poco acerca de mis gustos y demás es algo fácil y simple ya verán porque vamos allá!.


1.- Nos vamos a Diseño - Añadir un Gadget - HTML/Javascript y pegamos este codigo:

/** Widget Personalizable **/
<div id="Fondo"><img src="URL DE LA IMAGEN" /></div>
<div id="Texto"><img src="url de un avatar OPCIONAL"align="left"hspace="10" /><p style="text-align:justify">TU TEXTO</p><br />
</div>

<style type="text/css">
#Fondo {
    position:absolute; z-index:0;
    width : 500px;
    height : 271px;
    border : none;
   margin-top:-50px;

}
#Texto {
    position:absolute; z-index:1;
    overflow : auto; 
    padding-left:25px;
    panding-top:5px;
    width:270px;
    height:175px;
}
</style>

*Morado: Cambiarlo por la url de la imagen que utilizaran de fondo.
*Rojo: Cambiarlo por la direccion de un avatar si les gusta si no solo borren esta linea:

<img src="url de un avatar OPCIONAL"align="left"hspace="10" />

*Naranja: El texto que quieres mostrar en el widget.
*Amarillo: allí modificamos el alto, ancho y margen de la imagen principal es decir la que nos sirve de fondo del widget.
*Celeste: Esto es para que al escribir textos o párrafos largos cree automáticamente una barra desplazable.
*Verde Claro: aquí modificamos el ancho, alto, y espacio en donde colocaremos el texto, aquí nos tomara un poco de tiempo por los espacios hay que ir probando hasta que nos quede bien, a mi me tomo bastante xD.


OJO: Este widget lo arrastran hasta que lo coloquen justo debajo de "Entradas del Blog".

Pueden ver este tutorial funcionando acá, este es originalmente hecho por mi.

Espero les sirva el tutorial, lo practiquen, recuerden siempre: GUARDEN UNA COPIA DE SEGURIDAD DE SU PLANTILLA, todo esto para que no se les dañe.

*Comparte el Tuto
* Si lo haces porfa da credito o enlaza mi blog ^^
*GRACIAS!!

Nos leemos hasta un nuevo post ^^ Jane!