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

Como agregar bordes directamente a las imagenes..

Para muchos es indispensable usar bordes en sus imagenes para que estas pueden tener un toque mas profesional y llamativo, pero que sucede cuando no entendemos nada sobre CSS y lo queremos hacer de una forma mas entendible y practica..

Esto es muy sencillo y funciona perfectamente en Internet Explorer 7 y Firefox, se trata de un código que se agrega directamente a las imagenes sin tocar en lo mas mínimo el código en CSS..

Haremos una pequeña prueba.. supongamos que queremos una imagen con un borde solido y de color verde..

Lo que haremos sencillamente es agregar este código en donde queramos colocar la imagen..

<img style="border: #008000 5.5pt solid" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">

Los parámetros que podemos modificar los he marcado con color rojo, son estos:

El color del borde, este se representa con el numero decimal especificado en el código, en este caso verde #008000..

El tamaño del borde mediante el parámetro 5.5pt, este valor podemos modificarlo por uno mayor o menos, depende del estilo que le queramos dar..

El parámetro solid, lo cambiaremos por los diferentes estilos que existen para los bordes:



Eso seria todo en cuestión del borde, pero no olvidemos a widht y height que son el ancho y el alto de la imagen, como tampoco a alt que agrega un nombre a la misma..

Un ultimo ejemplo.. A continuación pondré una imagen con un borde doble, y como color de borde agregare un color rojo, el código seria el siguiente..

<img style="border: #c00000 5.5pt double" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">

El resultado seria este..




Y eso seria todo, como pudimos observar agregamos bordes a nuestras imagenes sin utilizar CSS, solo un simple código agregado directamente sobre la imagen :)..


Entradas relacionadas

Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Dar estilo a las listas con CSS
Insertar archivos SWF en Blogger
Cursor personalizado en CSS..

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

Insertar archivos SWF en Blogger

Una tarea común entre los bloggers es insertar archivos Flash, pero que pasa con lo que aun no conocen el código necesario para efectuar esta tarea..

Todo esto es muy simple, a continuación daremos las pautas necesarias para insertar archivos SWF en blogger o en cualquier otra Web..

Sintaxis simple..
Este es el código que se utiliza de una forma sencilla, solo debes agregar la ruta de enlace, el ancho y el alto del archivo y listo..

<embed src="enlacedelarchivo.swf" type="application/x-shockwave-flash" width="120" height="50"></embed>

Aquí podemos cambiar tres valores, en este caso el valor enlacedelarchivo.swf, lo cambiamos por la ruta o enlace del archivo y los valores width y height, que son el ancho y el alto de nuestro archivo..

Sintaxis básica..
Este es el código mas adecuado y el que se utiliza con frecuencia para abarcar todos los elementos disponibles, el tag esencial es el tag object..

También se pueden agregar parámetros utilizando el tag param. Por ejemplo podemos agregar el modo de transparencia (wmode), calidad (quality), color de fondo (bgcolor), variables (flashvras) entre otros.

<object type="application/x-shockwave-flash" id="movie" data="archivo.swf" width="200" height="100">
<param name="movie" value="archivo.swf">
<param name="wmode" value="transparent">
<param name="quality" value="high">
<embed src="enlacedelarchivo.swf" width="200" height="100" wmode="transparent" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash">
</embed>
</object> 

Dentro de este código podremos cambiar los valores width (ancho) y height (altura), también los valores de param, movie, puedes cambiarlo por el nombre de tu archivo, wmode en este caso puede ser o no transparente el fondo de tu archivo, quality es la calidad del video para cambiarla a baja, usa la orden low..

Dentro de embed agregamos la ruta o el enlace de nuestro archivo flash, cambiamos los valores width y height y agregamos valores como los descritos anteriormente..

Es así de sencillo, si alguien tiene algún otro código para agregar archivos flash será bienvenido :)..


Entradas relacionadas

Como subir y agregar un video a Blogger..
Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Dar estilo a las listas con CSS

Dar estilo a las listas con CSS

Esta es una forma muy original de dar estilo y forma a tus listas mediante css..

1. Estructurando con HTML..
Las listas numeradas se consiguen mediante las etiquetas <ol><li>, el truco es aplicar estilo al contenido y por defecto también se le agregara estilo a la numeración, para esto las auxialaremos con el elemento <p>. La estructura seria esta..

<ol>
<li><p>Primer elemento</p></li>
<li><p>Segundo elemento</p></li>
<li><p>Tercer elemento</p></li>
<li><p>Cuarto elemento</p></li>
</ol>

Por lo tanto tendremos..

1. Primer elemento


2. Segundo elemento


3. Tercer elemento


4. Cuarto elemento

2. Dando estilo a los elementos de la lista..
La etiqueta <ol> es la que contiene todos los elementos y por consecuente darles estilo, así como en el ejemplo siguiente..

ol {
font:bold 12px times;
font-weight:;
color:#6699CC;
}

Y así obtendremos lo siguiente..



3. Dando estilo solo al contenido deseado..
Para que no todas tus listas queden iguales puedes diferenciarlas dando estilos propios a cada etiqueta, por ejemplo a la etiqueta <p> ..

ol p {
font:normal 10px Arial;
color:#6699CC;
}

Este será el resultado..



Recordemos que, la etiqueta <ol> es la que da estilo a la numeración y <p> al contenido. El único problema que esto tiene al usar esto en tu blog es que no tengas un esquema de código, lo que puedes hacer es aplicar una clase a <ol> y no afectar a todas tus demás listas que hayas hecho con anterioridad en tu blog o web..

Por ultimo les diré que los códigos de arriba son solo de ejemplo, tu puedes modificarlos a tu gusto y si eres hábil con css seguro le sacaras mucho provecho :)..


Entradas relacionadas

Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Cambiar el color de texto seleccionado con CSS
Insertar archivos SWF en Blogger
Icono en la barra de navegación

Icono en la barra de navegación..

Antes de comenzar hay que tomar en cuenta lo siguiente:

1. El icono no debe exceder las siguientes dimensiones 16x16px..


2. Al parecer solo podra verse en algunos navegadores, les adelanto que en Internet Explorer no se podra ver..


3. El fichero deve estar alojado en algun servidor o directorio que soporte archivos ico y contar una direccion propia como: (http://servidor.com/favicon.ico)..

El proceso es muy sencillo, solo debemos agregar una pequeña linea de codigo en nuestra plantilla..El codigo es este:

<link rel="icon" href="favicon2.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon2.ico" type="image/x-icon">

Importante..

Este código tiene que ir dentro de la cabecera HEAD de la página web..

Te recomiendo utilizar el nombre de favicon.ico para el icono que agregar, ya que algunos navegadores lo descargan y ponen en la barra sin necesidad de agregar el codigo :)..


Entradas relacionadas

Live Messenger en tu Blog o Web
Television desde tu PC..
Insertar archivos SWF en Blogger
Las 25 mejores muertes en las peliculas de terror..
Botón Flash con Sonido..

Imagenes en Blogger (parte 1)

La mayoría de los usuarios de Blogger manejan las imágenes de una manera sencilla y concisa, ¿pero que pasa con los que van iniciando?..

Algunos no saben porque apareció tal código o para que usar tal parámetro, y la verdad siendo sincero si no conoces por lo menos un poco del lenguaje HTML te sientes perdido en la infinidad del cosmos xD..

La idea de este post no es enseñar a usar HTML a la perfección, es solo para dar una pequeña ayuda al momento de subir una imagen de nuestro ordenador a Blogger, y así poder manejar el código que ofrece Blogger como si fuera cosa de este mundo..

¿Pero como subo una imagen?

Esa es una pregunta muy sencilla, si lo que pretendemos es subir una imagen que esta alojada en nuestro ordenador lo único que tenemos que hacer como primer paso es crear una entrada en nuestro blog o entrar a una ya creada. Cuando estemos dentro haremos click sobre el pequeño icono llamado Añadir Imagen..

Nos saldrá una cuadro como el que se encuentra a continuación..


Click aqui para ampliar

Para empezar a subir la imagen damos click sobre Examinar, después solo buscamos la imagen que queramos subir, ya que la hayamos elegido tenemos que elegir un diseño y el tamaño de la imagen..

Analicemos la opción Diseño de la imagen..

Si elegimos Izquierda la imagen estará ocupando el lado izquierdo del texto que agreguemos si elegimos Derecha ocupara el lado derecho y Centrar simplemente pondrá la imagen en el centro..

Tamaño de la imagen..

Es una opción muy sencilla, si quieres una imagen pequeña elige esa opción si eliges grande la imagen quedara en su tamaño original...

Ya que hayamos elegido diseño y tamaño hacemos clik en Subir y esperamos a que nuestra imagen sea cargada correctamente..

El momento de espera es mínimo, damos click en Finalizado y en realidad eso es todo ya hemos subido una imagen a Blogger :)..


Pero espera..Me ha salido un código extraño, ayúdame a entenderlo¡

Es muy sencillo, el código que te ha aparecido es muy parecido al siguiente..

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URLDELAIMAGEN">
<img style="float:left; margin:0 10px 10px 0;
cursor:pointer; cursor:hand;"
src="URLDELAIMAGEN"border="0" alt=""></a>

En el código lo que esta de color rojo nos servirá para abrir la imagen en la misma ventana, esta parte del código muy pocas veces es utilizada, no habrá problema si la omitimos en esta ocasión..

Ahora lo que esta marcado de azul son las propiedades que de alguna manera podemos analizar, modificar o eliminar..

Comencemos con la primera:

MARGIN: Los valores 0 10px 10px 0 indican pos pixeles entre la distancia de la imagen y texto en el siguiente orden.. arriba, derecha, abajo. o izquierda. Estos valores también los podemos modificar o hacer algunas pequeñas pruebas con ellos antes de decidir..

CURSOR: En este caso el valor que se encuentra es hand, esto quiere decir que se mostrara una mano al pasar el puntero por la imagen..

BORDER: A esta propiedad podemos agregar el valor que queramos por ejemplo 1, 2, en fin el que nosotros queramos..

ALT: Dentro del código no tiene valor alguno, en todo caso servirá para agregar un texto alternativo a la imagen..(muy recomendado)

Y por ultimo no menos importante la propiedad STYLE a la cual no marcamos en el código, dentro de style se encuentra float que nos servirá para acomodar el texto, este cuenta con tres valores específicos que son: left. right o none estos a su vez se utilizan para alinear a la derecha o izquierda..

¿Podré agregar otros atributos a la imagen?

Existen muchos atributos compuestos en las imágenes pero eso lo veremos en la segunda parte de este pequeño tutorial :)..


Entradas relacionadas

Como subir y agregar un video a Blogger..
Insertar archivos SWF en Blogger..
El ultimo deseo de un Blogger..
Como agregar bordes directamente a las imagenes..
IE6, Un problema para los diseñadores y bloggers