Favicon, Que es, como se hace y como lo agrego a mi blog..

Un FAVICON es simplemente un icono o dicho de otra manera una imagen pequeña que se puede notar en algunos navegadores (FireFox, Opera, IE7 en IE6 no se puede observar), en la barra de direcciones del lado izquierdo de la dirección de la web en la que estamos.. Una pequeña prueba acerca de esto, simplemente dirige tu mirada a la dirección de ese blog podrás notar una pequeña imagen junto a la url del sitio, pues como lo dije anteriormente, ese es un FAVICON..

¿Pero y como hago un favicon?

Es muy simple, todo esto se realiza en unos cuantos pasos sin necesidad de descargar ningún programa especial ni nada de eso, en pocas palabras utilizaremos un servicio online que nos da la posibilidad de hacerlo sencillo y rápido..

Los pasos a seguir son muy simples, lo haremos así..

[1] Elegimos la imagen que se convertirá en nuestro favicon, puede ser alguna letra, simbolo,dibujo, etc..

[2] Una vez elegida la imagen la editamos un poco con el programa que mas nos acomode, dentro del programa de edición de imagenes le cambiamos el tamaño original por el de 16×16 pixel..

[3] Cuando este lista entramos a esta web para subir nuestra imagen a la cual hemos cambiado el tamaño para convertirla en nuestro favicon, al subirla la web por si sola convertirá la imagen a formato ico, y nos dará el código para pegarlo en tu blog o web..

Copiamos y pegamos el código que nos proporcionan en nuestra plantilla y eso sera todo, la próxima vez que entres a tu blog podrás observar que ya tienes tu propio FAVICON..

¿Pero quiero ahorrarme todos estos pasos, que hago?

Si no te gusta seguir pasos y lo quieres todo a la mano este sitio es para ti, en ella se recopilan una gran cantidad de iconos para agregar a tu blog totalmente gratis, además de todo puedes subir tu propia imagen o dibujo y en menos de un minuto tendrás el favicon que deseas..

Una vez que hayas elegido el favicon idoneo o creado tu propio favicon, lo descargas a tu pc, en este casi tendrás que subir la imagen a tu servidor, después de ellos solo copias la url del archivo y lo agregas al código que te proporcionaran en MpP..

Lo agregáis a tu plantilla antes del fin de < /Head> y eso sera todo..

<link href="'DIRECCION DE TU FAVICON'" rel="'shortcut" type="'image/x-icon'/">
<link href="'DIRECCION DE TU FAVICON'" rel="'icon'" type="'image/jpg'/">

Hay que tener presente que la parte final del código puede ser modificada, si el formato de tu imagen no es jpg solo remplazala por el formato de tu favicon que corresponda..

Como podrás ver ya no hay excusa para tener tu propio favicon..


Entradas relacionadas

Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Dar estilo a las listas con CSS
IE6, Un problema para los diseñadores y bloggers

Personalizando nuestro buscador con CSSy HTML..

En Blogger, agregar un buscador al blog es muy sencillo, es tan simple como usar el que nos muestran en Blogger Draft o simplemente crear uno a nuestro gusto y nuestros colores y forma preferida..

Para agregar un buscador sencillo al blog basta con agregar este pequeño código en el lugar donde queramos que aparezca, como podrán observar a continuación no tiene nada de fantástico..

<form action='http://nombreblog.blogspot.com/search' method='get'>
<input type='text' value='' name='q' />
<input type='submit' value='Buscar' />
</form>

El resultado seria este, lo único que hacemos es cambiar nombreblog por el nuestro en el codigo visto anteriormente..

¿Pero como lo personalizo utilizando CSS en el?

Es muy fácil, usaremos estas lineas de código para lograr lo que estábamos buscando..

#searchform #s { // Esta instrucción la usaremos para personalizar la caja de búsqueda
padding: 0px;
margin: 0px auto;
background-color : #FFFFFF; // El color de fondo es blanco, agrega el código hexadecimal para cambiar el color
height:14px; // Cambia la altura de la caja de búsqueda, cambia 14px por la medida exacta
width:150px; // Cambia el ancho de la caja de búsqueda, cambia 150px por la medida exacta
margin-left: 10px;
font:11px Arial, Times New Roman; // Tipo de letra y tamaño de letra
font-weight: normal;
padding: 5px 16px;
}

#searchsubmit:hover { // Esta instrucción la usaremos para personalizar el botón de enviar por defecto
background:#777777; // El color del enlace al ser pulsado
}

#searchsubmit {
margin-left: 0px;
padding: 0px;
background:#FFFFFF; // Color de fondo del botón de enviar
border:none;
width:80px; // Anchura del botón de enviar
height:21px; // Altura del botón de enviar
font:11px "Trebuchet MS", "Lucida Sans Unicode", Verdana;
color: #777777; // Tipo de letra, tamaño de letra y color de letra de la palabra Enviar
}

Cabe recordar que las partes en verde no pertenecen al código y que las borraremos cuando agregemos este mismo a nuestra plantilla..

Cuando terminemos de personalizar el buscador mediante CSS, agregamos esta otra linea de códigos en la parte de HTML, en la zona exacta donde queramos que aparezca el buscador..

<span>
<form action='/search' id='searchform' method='get'>
<table border='0'  width="350" bgcolor="#000000" cellpadding='10' cellspacing='0'>
<tbody>
<tr>    
<td><input id='s' maxlength='50' name='q' onblur='if (this.value == "") {this.value = "¿Buscas algo?";}' onfocus='if (this.value == "¿Buscas algo?") {this.value = "";}' size='18' type='text' value='¿Buscas algo?'/></td>    
<td><input id='searchsubmit' type='submit' value='Buscar'/></td>
</tr>
</tbody>
</table>
</form>
</span>   

Las partes que podemos modificar están marcadas de colores diferentes, para cambiar el tamaño y color de fondo de la parte donde estará el buscador, cambiamos las zonas marcadas con verde, para cambiar el mensaje de ¿Buscas algo? y Buscar simplemente modificamos ese texto por el deseado, las demás partes seria mejor dejarlas así si no queremos errores dentro del código..

Al final podría quedar algo parecido a esto si por supuesto usamos y modificamos estos pequeños códigos de una manera correcta y eficaz. Eso es todo, si te preguntas si esto funcionara en IE7 la respuesta es si, si funciona correctamente, pero ten cuidado el modificar el código ya que puedes llevarte una desagradable sorpresa :x..




Entradas relacionadas

Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Dar estilo a las listas con CSS
IE6, Un problema para los diseñadores y bloggers

IE6, Un problema para los diseñadores y bloggers

Hace poco me entere de que esto es un problema grave para infinidad de diseñadores y bloggers que buscan dar un buen aspecto a su blog mediante el lenguaje mas usado en cuestión para diseñar paginas, hablo del ya famoso CSS..

Hace poco yo me encontré con este problema, ya que el blog se veía sumamente mal en IE6, y por supuesto me vi obligado a cambiar todo el código y por consecuencia todo el diseño, en el cual me lleve mas de una semana. También hace poco entre a un blog en donde no se veían las entradas y a que no saben quien fue el responsable, si así es fue Internet Explorer 6..

Lo malo de todo esto es que nadie puede obligar a nadie a usar un mejor navegador como Opera o Firefox, ya que mas de la mitad de las personas que navegan por Internet usan Internet Explorer 6..




Lo mejor seria sin duda que actualizaran su navegador por uno mucho mejor que cumpla con casi todos los estándares como son: Internet Explorer 7, Opera o Firefox.. Además de ser mucho mejores, los diseñadores y muchos bloggers se los agradeceran :)..


Entradas relacionadas

Iconos y mas Iconos..
Cambiar el color de texto seleccionado con CSS
Logo Generator 2.0..
Cursor personalizado en CSS..
Generador de Botones online..

Generador de Botones online..

Button Maker se trata de una aplicación online que permite generar botones de todo tipo y forma de una maneara sumamente sencilla..

Button Maker ofrece un configuración de colores de fondo y texto, puedes decidir la alineación y elegir entre dos tamaños: 80 15 x o 80 x 31px..

Cuando termines de configurarlo a tu gusto simplemente damos clic sobre el botón que dice Generate Button, tenemos que guardar el botón y subirlo a un servidor para obtener la la url para así poder agregarlo a nuestro blog..

Me parece una aplicación muy útil para generar botones de enlaces para compartir o algo parecido..

Con esta herramienta también podemos crear logos de los directorios que usamos con frecuencia, para que así aparezacn todos del mismo tamaño y no afecten la vista o diseño del blog..

Estos son algunos ejemplos que yo hice para probar su funcionalidad xD..







Entradas relacionadas

Live Messenger en tu Blog o Web
Peliculas online..
Cubo 3D con el Logo de tu Blog o Web..
Comida Rapida: Anuncios vs Realidad
WallpaperMaker: Diseña tu propio fondo de escritorio..

Cursor personalizado en CSS..

Habras visto que algunas webs o blogs cuentan con un cursor diferente al establecido, pues esto se puede realizar en nuestro blog de una forma muy sencilla, simplemente utilizaremos una pequeña línea de código en CSS para cursores personalizados..

Antes que todo debemos tener en cuenta que el cursor que utilizaremos tenga la extensión .cur, CSS no especifica el formato del cursor y podría tomarlo como o indicar que es un formato diferente..

Una vez que tengamos nuestro cursor listo y dentro de un pagina que nos ofrezca su enlace procedemos a personalizar el cursor en nuestro blog o pagina.. Si no encuentras un servidor que aloje archivos cur, puedes usar GooglePages, esa es una buena opción..

El código es muy sencillo, solo debemos utilizar la propiedad cursor y el valor, esto se hace mediante la función url(), ahi indicaremos la url o enlace a nuestro cursor..

cursor:url("enlacedelcursor.cur");

Solo cambiamos el enlace del cursor, la opción que esta en color rojo..

Para asignar el cursor a toda la pagina tendríamos que agregar el siguiente código..

<style type="text/css">
body{
cursor:url("enlacedelcursor.cur");
}
</style>

Algunos navegadores no cargan el cursor si este no se ha indicado por defecto, lo que podemos hacer es indicar un cursor básico para que si el cursor personalizado no fuese cargado el cursor básico aparecería en su lugar..

Para efectuar esa practica utilizaremos el código siguiente..

<style type="text/css">
body{
cursor:url("enlacedelcursor.cur"),help;
}
</style>

En este caso hemos indicado el cursor "help" por defecto..

Vista previa:




Entradas relacionadas

Cambiar el color de texto seleccionado con CSS
Dar estilo a las listas con CSS
Cursor personalizado en CSS..
Como agregar bordes directamente a las imagenes..
Insertar archivos SWF en Blogger

Logo Generator 2.0

Logo Generator es una herramienta online que que genera logos de una casi inmediata. Esta aplicación cuenta con 10 diseños de excelente calidad y con con un diseño típico de Web 2.0, cuenta con algunos efectos como reflejos, fuentes redondeadas, degradados y muchos otros...

Para utilizarlo basta con agregar el texto que queramos, seleccionar el diseño del logo y dar clic en Generar y eso es todo..

Es rápido y sencillo, además de que el logo cuenta con una extraudinaria calidad, esta herramienta es 100% recomendable si quieres un logo rápido y sin tantas complicaciones.



Entradas relacionadas

Television desde tu PC
Generador de Botones online..
Cubo 3D con el Logo de tu Blog o Web..
Iconos y mas Iconos..
WallpaperMaker: Diseña tu propio fondo de escritorio..

Cambiar el color de texto seleccionado con CSS

CSS3 y sus nuevas especificaciones permiten personalizar o modificar el color de la selección de cualquier texto el cual tiene por defecto el color azul, todo esto se logra mediante el elemento ::selection.

Aunque solo nos servirá para Firefox y Safari no deja de ser atractivo, para aplicarlo en toda nuestra pagina utilizaremos este código..

/* Para Firefox */
::-moz-selection {
background: #FFFF00;
}

/* Para Safari */
::selection {
background: #FFFF00;
}

Podremos también agregar clases para cada parte de la pagina..Por ejemplo para p, tendríamos:

p.post-body:selection {
background: #6c82b5;
}

p.post-body:-moz-selection {
background: #6c82b5;
}

Recordemos que esto solo nos servirá en Firefox y en Safari :)..

Mas información | CSS-trikcs


Entradas relacionadas

Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Dar estilo a las listas con CSS
IE6, Un problema para los diseñadores y bloggers

Iconos y mas Iconos

Hace poco, para ser exacto hace dos días, cuando decidí cambiar el aspecto de mi blog, encontré infinidad de webs que contaban con extraudinarios Iconos para ser descargados y utilizados sin ningún problema..

Si estas buscando iconos para crear un blog o tal vez una Web, te dejo esta lista con infinidad de webs especializadas en el tema, puedes utilizarlos sin problema ya que todos son gratuitos, pero antes de hacer cualquier cosa con ellos te recomiendo que leas las condiciones de Licencia que cada uno tiene, ya que algunos no permiten su uso para ser comercializados..

Esta es la Lista..

Free web development icons by ~kurumizawa
Estos son los iconos que utilice yo, son 26 iconos de 16px x 16px con 4 colores diferentes..




FAMFAMFAM - Silk icons
Estos son los que usan casi todos en la realización de su proyecto..
Son iconos de muy buena calidad en formato PNG de 16 por 16 pixeles..




Mini Icons
Es un paquete de mini iconos de gran calidad, además están en formato gif..




Flags
Grupo de 247 iconos en forma de bandera, vienen en dos formatos, gif y png..




Mini Pixel Icons
300 mini iconos de 14 por 14 píxeles con fondo transparente, la única condición para que los uses es otorgar un enlace a N.Design Studio si usas 10 iconos como máximo..




ExplodingBoy Pixel Icons
31 Iconos de diferente color en forma de cuadro..




mIcons - Kostenlose Icons
Iconos clasificados en 8 categorías de gran calidad, en lo personal se los recomiendo..




Feedicons
¿Necesitas iconos para tu feed? Pues aquí tienes un set muy completo..




Sizcons
Excelentes iconos y de gran calidad, cuenta con dos versiones..16 x 16 y 12 x12..




ASP.NET Icons
Estos iconos están en formato gif y son mas de 300, no hay que pedir mas..



¿Alguien conoce otra Web de iconos?


Entradas relacionadas

Descarga y convierte videos de YouTube facilmente..
Television desde tu PC..
Logo Generator 2.0..
Dar estilo a las listas con CSS
Botón flash con un enlace a otra web..