Delicious LinkedIn Facebook Twitter RSS Feed
Showing posts with label Cajas. Show all posts
Showing posts with label Cajas. Show all posts

Gadget Html,Cuenta atrás Horaria.

Código que muestra una cuenta atrás de en horas, minutos y segundos,muy útil para alguna centa atrás para eventos,concursos,ponlo en tu web/Blog,según útilidad.



Lo mejor de todo es que no contiene Publicidades,y solo debes copiar y pegar en cualquierparte que prefieras de tus elementos "Html" sin necesidad de ser en plantilla,por ejemplo: Diseño-añadir´html..
<html><head>

<script language="javascript"><!--

//Codigo que muestra una cuenta atras hasta finalizar el tiempo indicado

//La Web del Programador

//http://www.lawebdelprogramador.com

//variables que determinan el tital de horas, minutos y segundos para la cuenta atras

toHour=1;

toMinute=0;

toSecond=0;

//cuenta atras

function countDown(){toSecond=toSecond-1;if(toSecond<0) tosecond="59;" tominute="toMinute-1;" value="toSecond;" tominute="59;" tohour="toHour-1;" value="toMinute;" value="toHour;" value="0;" value="0;" value="0;" style="font-weight: bold;">>

</script><style type="text/css">

.form_input

{font-family: Verdana;

font-size: 12;

color: #ffffff;

border-width: 0;

background-color: #000077;

text-align: right;}</style></head><body onload="countDown();">

<form name="form">Tiempo restante...:<input type="text" size="5" class="form_input" name="hour" disabled>:<input type="text" size="5" class="form_input" name="minute" disabled>:<input type="text" size="5" class="form_input" name="second" disabled>

</form></body></html>













Tiempo restante...:::







Caja contenedora para codigos html

-voy a explicaros la forma de crear una caja contenedora para poder mostrar nuestros códigos html.
-Podremos modificar a nuestro gusto los siguientes datos:
background, color, margin, padding etc.
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :

-CODIGO:
/* Caja de código */pre {padding-top:22px; /* Relleno - para ajustar Fondo */}pre code {overflow:auto; /* Determina si es necesario agregar barras de Scroll */background-color: #efffdf; /*Color de Fondo en Hex */border:1px solid #999999; /*Color de Borde en Hex */color:#333333; /*Color de letra en Hex */display:block; /* No tocar */padding:8px; /* Relleno del cuadro */white-space:pre; /* No tocar */text-align:left; /*Alineacion del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /*Altura minima del Cuadro */}/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */code:hover {background-color: #CAF99B; /*Color de Fondo en Hex */border:1px solid #0066cc;/*Color de Borde en Hex */le}/*FIN Caja de código */

-Una vez agregado el código a nuestra plantilla guardamos los cambios y listo.
-Si queremos que cada vez que nos interese mostra un código aparezca nuestra caja, lo haremos de la siguiente forma:
-Al inicio de nuestro código pondremos las etiquetas <pre><code>Aquí el Código</code></pre>.
-Si queremos que aparezca automaticamente en nuestra plantilla "posts" accederemos a: Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardaremos los cambios efectuados.
El resultado final seria como el que os muestro en este post, pero con colores distintos.

Cuadro para Codigos Html

-como crear un "cuadro" en el cual meter un código:
Esto es lo que verán una vez que introduzcan las etiquetas  <pre><code></code></pre>


-El código que se necesita para ese efecto es el siguiente:

Para agregar este código a Blogger, simplemente ve a Edición HTML (Plantilla)y agrega el código antes de ]]></b:skin>

pre {

background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen Superior, si desas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

padding-top:24px; /* Relleno - para ajustar Fondo */

}

pre code {

overflow:auto; /* Determina si es necesario agregar barras de Scroll */

background-color:#fffbe5; /* Color de Fondo en Hex */

border:1px solid #fff1a3; /* Color de Borde en Hex */ color:#7e1f09; /* Color de letra en Hex */ display:block; /* No tocar */ padding:5px; /* Relleno del cuadro */

white-space:pre; /* No tocar */

text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

min-height:63px; /* Altura minima del Cuadro */}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

background-color:#FEFEDD; /* Color de Fondo en Hex */ border:1px solid #ffd511;/* Color de Borde en Hex */le

}


Ahora solo queda poner el siguiente código para que funcione,en "creación de entradas" cada vez que queramos publicar un post e incluir este cuadro: <pre><code>></pre>


-Yo os aconsejo hacer una cosa "para tener siempre a mano ese código"...

-Vamos a "Configuración",seleccionamos "Formato",bajamos hacia abajo y vemos que pone "Plantilla de entrada"y "un cuadro"...hay "en el cuadro" introducimos el "ultimo código" y "guardamos conflagración"

-Así cuando queramos realizar una nueva entrada siempre nos aparecerán "las etiquetas" necesarias para "entre ellas" introducir un código y que nos salga como en este blog lo hacemos.















Como poner una caja para agregar codigo html de nuestro banner:

-El Código "html" que veis podéis copiarlo (botón derecho y copiar) vais a vuestro blog,diseño,añadir un gadget,html/javascipt,y pegáis el código,ya solo os falta el banner podéis diseñarlo aquí: Cool Text





<div class="widget-content">
<a href="http://ayudablognovato.blogspot.com/" target="_blank">
<img width="109" alt="Ayuda Blog" src="http://images.cooltext.com/427732.jpg" height="20"/></a>
<textarea><a href="http://ayudablognovato.blogspot.com/" target="_blank">
<br/><img width="109" alt="Ayuda Blog" src="http://images.cooltext.com/427732.jpg" height="20"/></a></textarea></div>



-En el código podéis apreciar que e puesto tres colores:
1-Rojos- Debéis poner la "URL" de vuestro blog.

2-Azules- Debéis poner la "URL" de la imagen del banner,la cual habréis generado,(Por ejemplo en Cooltext,o ImageShacK(Con imagen previamente subida),(Formato jpg").

-3-Verdes- Podéis cambiar el tamaño de las cajas,superior e inferior,altura,y ancho.
El resultado es una caja para que agreguen "TU" Banner como esta:


Ayuda Blog

-A petición y por ser una cosa muy útil,se me pidió que dijese como modificar el "tamaño de la caja",y es verdad que para algunas columnas laterales mas estrechas "la caja del banner se sale",como seguramente mas de uno querrá modificar el tamaño,lo dejaré aquí puesto y así todo el que quiera hacerlo,lo tendrá sin esperar una respuesta...hay va:

*En el código a copiar "son 2" diferenciamos entre el 1º y el 2º...pues bien en el segundo podemos ver que empieza así: <textarea> púes es tan simple como añadir: rows="2" cols="14"> por lo cual la parte indicada debe quedar así: <textarea rows="2" cols="14">

*Podemos modificar "Rows" y "cols" los valores de manera que nos de la caja el tamaño deseado,cualquier consulta por aquí andamos...