Les entrego esta vez dos formas de hacer mensajes de alerta.
El primer mensaje se genera al pasar el puntero en un texto que vos determinas y el segundo creamos un botón, con estilo, que al presionarlo aparece el mensaje.
1)
Código:
2)
Código:
Aca vas a ver como se le puede dar estilo al boton:
Border: para darle color y forma a los bordes
color: Color de letra
background-color: color de fondo
Mira como funcionan:
►Demo!!
Mensajes de alerta II
Bordes. [Siete formas]
Nota: Esta es otra manera de escribir y hacer que nuestro blog, además de las ideas que le ponemos, las historias propias y ajenas, etc., se vea lo más bonito posible. Esa es la idea nada más y nada menos. Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
Viste la nota simple de arriba. Pero si le agregamos bordes vos haces que resalte mejor.
Te dejo siete maneras de hacer que una cita, nota o mensaje se vea mejor con bordes.
Siempre el primer código va después de <head>.
[+/-]Abrir código
<style type='text/css'>
p.one
{
border-style: solid;
border-top-width: 15px
}
</style>
El texto va entre: <p class="one">.............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type='text/css'>
p.linea
{
border-left: medium solid #ff0000
}
</style>
El texto va entre: <p class="linea">............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.s
{
border-bottom: medium solid #ff0000
}
</style>
El texto va entre: <p class="s">.................</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.l
{
border-style: solid;
border-left-width: 15px
}
</style>
El texto va entre:<p class="l">...............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.three
{
border-style: solid;
border-color: #800000 #008000 #3366FF
}
</style>
El texto va entre:<p class="three">..........</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.uno
{
border-style: solid;
border-left-color: #ff0000
}
</style>
El texto va entre:<p class="uno">..........</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.dotted {border-bottom-style: dotted}
</style>
El texto va entre:<p class="dotted">..........</p>
Buena suerte!!!
Mensaje de alerta
Ojo el piojo ; )
Este es un truquito muy feliz. Donde podes hacer un mensaje de alerta y decir algo que no pase desapercibido.
Buscá en tu plantilla esto:
]]></b:skin> y antes pega el siguiente código:Después de guardar podes empezar a usarlo con esto:
<p class="alert">ACA VA EL MENSAJE</p>
Cartel para mensaje
Este es un cartelito que te sirve para dar algún mensaje importante a tus visitantes.
Ya te lo dejo preparado para que le des uso.
Primero pega en tu plantilla después de <head>
[+/-]Abrir código
<style type='text/css'>
.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}
.commentfooter{
background: url(http://img.godlike.cl/images/fle.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}
</style>
Después de guardar pone el cartel desde "elementos de página" usando esto:
PARA TENER EN CUENTA:
Como verás en el primer código, el cartel tiene un ancho de 450px [width: 450px;], asi que ponelo en el centro de tu blog desde desde añadir elemento:
Imagen en forma de cuadro
Ver blog de prueba
Mira que bien queda el cuadro de Quinquela
Esto se puede hacer si agregamos un elemento a nuestra hoja de estilo [CSS] y luego subimos la foto en la columna.
Códigos:
Primero pegas esto en la hoja de estilo entre <head>....</head>
Aca vas a poder configurar el fondo del recuadro, color, tamaño, letra del subtitulo, color y forma, entre otras cosas.
Después para subir la foto tenes que hacerlo con esto:
ACLARACIÓN: Tenes que tener en cuenta dos detalles.
1) Hay que ser muy prolijos con la foto que ponemos. Fijate el tamaño, que no se te vaya la mano, mira que tiene que estar acorde al ancho de la columna y el tamaño que le dimos en la hoja de estilo.
2) La foto la subis desde agregar un elemento de página. No la pongas en un post.
Buena Suerte !!!
CSS Creator !!!
Banner en forma muy sencilla y sin imágenes. Una vez me habían preguntado como hacer para crearlos sin foto y que sea lindo.
Lo intentamos en un post anterior pero no se podía hacer tan fácil y con vinculo como ahora.
Este es el resultado que verán en la columna del blog.
Veamos paso a paso:
Al ingresar van a ver tres opciones para trabajar.
Elegimos CSS Banner Generator (los otros no me resultaron llamativos)
Aca van a ver el panel.
Veamos en detalle para que nos salga un banner bien bonito:
Banner link: Aqui pongan la dirección de su blog
Banner size: Pueden configurar el tamaño a gusto, verán que hay una cantidad de opciones. Luego, en la misma linea, está background-color: que les sirve para darle el color de fondo.
border width: El borde, tamaño, forma y color.
Heading 1: Para poner el título. Pueden aliner, darle forma y tamaño a la letra y el color.
Heading 2: El subtitulo, con los mismos atributos que el anterior.
CSS Banner Code: Es el último paso donde hacemos clic en HTML - code seleccionan el código para pegar en el blog.
A medida que lo van creando verán que va apareciendo en la parte superior de la página.
Para dar color deberán apretar aca
y se va a desplegar un cuadro de colores.
Buenos sitios !!!!
A pedido subo algunos sitios que son de mucha utilidad para los blogs
Para entrar clic en el titulo:
Hay muchos, pero muchos pero esto es un avance.....
Generador flash muy simpatico !!!!
Tenes varios motivos distintos:
Mira que al costado esta el panel para elegir entre 14 motivos.
Una vez que lo elegis, se carga y subis una imagen.
A continuación te va a dar el código feliz !!!!
Un dato: Cuando publiqués la entrada te va a decir que no es aceptable, no importa, marca
y listo el pollo, pelada la gallina......
Tenes METAS !!!??
Seguro que uno se pone metas todo el tiempo, algunas te salen mal, pero siempre intentamos y así vamos en la vida.
Pero acá la intención no es hablar de la vida, sino de las etiquetas META TAGS.
Varias veces me pregunté para que eran esas lineas que aparecen en la parte de arriba nuestro código:
Veamos algunos ejemplos:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Esto sirve para explicar a los navegadores que están ante un documento HTML codificado en Europeo Occidental (ISO). Útil para que los usuarios puedan ver acentos, ñ y ç.
<META NAME="description" CONTENT="descripción del contenido de la web">
Esto es la descripción para buscadores.
<META NAME="keywords" CONTENT="palabra para que nos busquen">
Esto son las palabras clave.
<META NAME="rating" CONTENT="General">
Esto es para indicar que no es "para adultos", que todo el mundo la puede ver.
Puse los que para mi son más importantes, pero para completar este informe generá vos mismo los METAS haciendo clic acá abajo:
Otro generador de texto bonito !!!
Para que el mago se ponga a trabajar y genere un mensaje debemos ingresar a este sitió:
Una vez que estamos en él ingresamos el texto que deseamos y hacemos clic en generate
A continuación no generara el código para que peguemos en nuestro blog, lo podemos poner en donde nos guste. También se puede descargar la imagen (verán el texto azul que lo indica)
Trabajando con el código:
Este es el código que me genero con esta frase
Se puede configurar si lo desean:
Si no quieren que la imagen sea un vinculo sacan esto:
<a href="http://www.fodey.com/generators/animated/wizard.asp">
Para cambiarle el tamaño:
width="582" height="129"
También la descripción de la imagen:
alt="Wizard Animation"
Agregar un aviso a un parrafo !!
Un recurso que veo no se usa mucho y es muy útil es ponerle un aviso a lo que escribimos.
Es un cartelito que aparece abajo de lo que escribimos.
Usemos un ejemplo:
Estimados amigos que me han escrito en relación al gmail.
Les comento que tengo 100 invitaciones para mandarle a los que me escriban.
Al poner el cursor sobre 100 invitaciones veras que aparece un cartelito.
Código:
Buena suerte !!!
Las invitaciones existen de verdad
Agregar caritas al chat de CBOX !!!!
Vamos a ver como agregarle nuevas imágenes o "smilies" al Chat de cbox.
En primer lugar ingresamos a Admin Panel y allí abrimos en la barra de tareas "smilies":
Una vez allí, vamos abajo de todo donde tenemos espacio para agregar nuevas.
Aquí vamos a tener que pegar la dirección de la imagen que queremos.
Elegimos una imagen:
Podemos usar un vínculo "Gif animados" que tengo en el blog:
Van a ver que hay muchas imágenes simpáticas para agregar.
La imagen que nos gusto copiamos la ruta de la imagen (en el Explorer se hace copiando acceso directo)
Luego esa dirección la pegamos donde va la URL de la imagen. Y le agregamos un nombre.
Para que funcione deberemos poner dos puntitos:
Guardamos (save) y listo el pollo, pelada la gallina !!!
Mas textos en movimiento !!!
Código
<marquee behavior="alternate">Texto en movimiento</marquee>
Código
<marquee direction="up">Texto en movimiento</marquee>
Código
<marquee direction="down">Texto en movimiento</marquee>
Código
<marquee direction="up" behavior="alternate">Texto en movimiento</marquee>
Código
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Texto en movimiento</marquee></marquee>
Código
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Texto en movimiento</marquee></marquee>
Código
<marquee style="border:#FF4500 2px SOLID">Chauuu</marquee>
Código
<font color="#FFFF00"><marquee direction="left" style="background:#CD3333">Buena Suerte....</marquee></font>
Generador de mensajes simpaticos !!
Clic en Play:
Entrando a esta página:
Tenes varios fondos para elegir:
Elegida una opción generamos el mensaje, color de fondo y texto.
A continuación generamos el código que vamos a usar:
Creación de Banner !!!!
Esta es una página para crear banner en forma muy, pero muy facil.
Ingresan a esta PAGINA
.
Tenemos varias vinculos para crearlos.
Elegimos el primero.
Aqui van a tener medidas para optar.
Elegimos la de 234 X 60
Luego nos aparecen varios modelos:
Elegimos uno y empezamos a editar lo que queremos que aparezca.
Resultado:
Buena Suerte !!!
Tabla con borde doble !!!
| Aquí poner el contenido |
Esta tabla con doble borde y color pude ser muy útil para hacer titulos, resaltar algo, etc.
Menú desplegable !!!
El menú desplegable permite que coloques varios enlaces en un solo lugar.
Con solo seleccionar el enlace y automáticamente el navegador se dirigirá a la página.
Código:
<form>
<select NAME="links" onChange="top.location.href=this.form.links.options
[this.form.links.selectedIndex].value">
<option SELECTED>Elija la página:</option>
<option VALUE="http://agregafotos.blogspot.com/">
Ayuda para todos</option>
<option VALUE="http://jcesarp.blogspot.com/">
Mi Blog</option>
<option VALUE="http:/www.google.com.ar">
Google </option>
</select>
</form>
Queda asi:
Agregando este código podes poner los vinculos que quieras:
<option VALUE="http://......">Titulo</option>
Texto móvil
EJEMPLO:
Código
<MARQUEE>Texto móvil</MARQUEE>
Podemos incorporar un color de fondo con el atributo BGCOLOR.
Código
<MARQUEE BGCOLOR=#FF4500>Texto móvil</MARQUEE>
También puede ir acompañados de los atributos HEIGHT (alto) y WIDTH (ancho).Estos deben ir seguido de un valor numerico el cual se mide en píxeles.
Código
<MARQUEE BGCOLOR=#FF4500 HEIGHT=25 WIDTH=50%>Texto móvil</MARQUEE>
Se puede controlar el número de veces que queremos que salga el mensaje, y el sentido (de izquierda a derecha o al contrario), el primero se logra con el atributo LOOP, y el segundo con DIRECTION, el cual tiene dos valores RIGHT o LEFT, su valor por defecto es LEFT.
Código
<MARQUEE LOOP=3 DIRECTION=RIGHT >Texto móvil</MARQUEE>
Regalito:
El que más me gusta, el que choca a los costados y se detiene cuando apoyas el puntero.
Código
<span class="gen"><marquee scrollamount=5 onMouseOver=this.stop() onMouseOut=this.start() WIDTH=50% behavior=alternate /><font color="#FF8C00"><b>Texto móvil</b></font></marquee><br /> </span>
*scrollamount = velocidad.
*WIDTH = tamaño de caja.
Suscribirse a:
Entradas
(
Atom
)
Podes mirar, copiar, sugerir y/o desechar, todo es gratis, lo único que te pido
no borrés los créditos de las plantillas y me linkees si podes.
Abrazos, buena suerte y más que suerte!