¿Qué es un favicon?

El favicon de un blog o página web es un pequeño ícono que aparece en el navegador, al lado de la barra de dirección. En la siguiente imagen se muestra lo que estoy hablando:

El predeterminado favicon de todo blog de blogger, es el siguiente:
Este ícono que representa a Blogger, puede ser cambiado por otro que quieras. Seguramente esto ya lo sabías ya que hay miles de administradores de blogs que ya lo hicieron.
Por eso, te recomendamos ver el siguiente post y seguir los pasos que se muestran en el siguiente recuadro.

Cambiar favicon de mi blog

Entonces, sabemos que lo básico del favicon es una imagen pequeña o un ícono que represente a un blog que lo podemos ver en cualquiera de los principales navegadores.

¿Cómo debe ser el ícono?

El ícono puede tener las medidas que quieras. La desventaja de poner un favicon con una imagen muy extensa es que no se entenderá nada cuando se quiera ver en el navegador. Entonces, para que no ocurra esto, te recomendamos que tenga una medida mínima de 16x16, y una medida máxima de 128x128.
El formato puede se .gif (para íconos animados) .png o .jpg.
La imagen, debe ser algo sencillo, algo que sepas que se puede ver. Debe ser algo representativo del blog.

Vamos a los pasos

1. Crea tu ícono: Puedes hacerlo o descargarlo de una página y editarla. Procura de que sea desde 16x16 hasta128x128. Guárdalo en formato jpg, gif, o imágenes png.
2. Súbela a Blogger o a una página para subir imágenes
   
   
3. Copia la URL de la etiqueta a <a> en la solapa Edición de HTML. Ver el ejemplo de la imagen:
   
4. Pégalo en el siguiente código en donde dice URL de la imagen:
   

   <link href='URL de la imagen' rel='shortcut icon'/>

5. Ahora el código que nos quedó lo pegaremos en la plantilla. Así que iremos a Diseño → Edición de HTML → buscamos la etiqueta </head> (presionando ctrl+f). Arriba de </head> pegaremos el código (el del paso 4).
6. "Guardar cambios" y ver plantillas.

Para dudas: teoriablogger@hotmail.com | Contactar

Título del blog en navegador con efecto de tipeo

En esta ocasión vengo a presentarles un script que hará nuestro título en el navegador web, más interesante y divertido.
Se trata de un truco que al implementarlo y guardarlo, el título del blog en el navegador plasmará el título del blog pero con efecto de tipeo.
El truco se puede ver en el Laboratorio de T.B.

Agregar efectos de título al blog

El truco se debe agregar en un elemento de la página como un código entonces vamos a: Blogger → Diseño → Elementos de la página → Añadir gadget → Modo HTML/Javascript y pegamos el siguiente código:

<script type="text/javascript">

var message="Entra a Teoriablogger.blogspot.com" //especifica un título
var message=message+" "
var temptitle=""
var speed="150"

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)}

window.onload=titler
</script>

Lo que está escrito en rojo es el título que va a aparecer en el navegador.
Cuando lo hayas modificado, mira la pestaña de tu navegador y listo.

ColorZilla complemento de Mozilla, útil para un blogger

Hace unos días publiqué un post dedicado sólo a la explicación de qué es, para qué sirve la propiedad color. Para hacer un resúmen, explicamos que servía para imponer color a las letras de un elemento. También explicamos cómo obtener un color e indicamos los nombres de los colores y sus respectivos códigos. Pero no mostramos la forma de cómo obtener un determinado color, un color preciso, el uno quiere.
En este post mencionamos las formas de obtener los colores que vos querés, por medio de un complemento de Mozilla Firefox (navegador que recomendamos para los blogueros).

ColorZilla

¿Qué es ColorZilla?

ColorZilla es un complemento de firefox que se destaca por tener un cuentagotas que puede extraer colores precisos de la página en la que estés.

• Además de esta exelente función, posee una paleta de colores para seleccionar un color cualquiera y al hacerlo te muestra los valores RGB, HEX y su nombre (si tiene) para que puedas copiarlo y usarlo;
• enseña cuáles sonhttp://www.blogger.com/img/blank.gif los colores que se pueden nombrar y sus códigos;
• tiene un historial de todos los colores que seleccionaste.

¿Cómo se utiliza?

Para manejar ColorZilla debes hacer click en el cuentagotas que aparece en la parte inferior izquierda de la pantalla de mozilla, y desplazar el cursor por toda la página web para extraer un color.

Descarga

ColorZilla | http://www.colorzilla.com

Video explicativo

Ver este video en Teoría Blogger videos | Ir a Teoría Blogger videos

Cambiar color de un texto en estado de selección (sólo para Firefox)

Si eres detallista el color de un texto seleccionado, en cualquier página, es el mismo. Pero no siempre es así. En el navegador Mozilla Firefox (también en Safari), se puede observar que en algunas páginas no tienen un color en común al seleccionar un texto y que pueden ser diferentes.
Sin embargo, esto se debe a que sólo Mozilla y Safari permiten este cambio (por ahora).

Cambiar color común de selección de texto

Para cambiar esta preferencia, debemos hacer unos cambios en la plantilla. Iremos a Blogger → Diseño → Edición de HTML y buscamos (ctrl+f) la siguiente partícula de código: }]]>
Cuando hayamos encontrado este código, pegamos arriba del mismo, el siguiente código:

::-moz-selection {
background: #4F4F4F;
color:#FFFFFF;
}
::selection {
background: #4F4F4F;
color:#FFFFFF;
}

Lo escrito en verde, va el color de fondo que tendrá el texto al seleccionarlo.
Lo escrito en rojo, va el color de letra que tendrá el texto al seleccionarlo.
Lo escrito en amarillo es la propiedad que se utiliza para modificar la preferencia en Mozilla Firefox (::-moz-selection ).
Lo escrito en violeta es la propiedad que se utiliza para modificar la preferencia en Safari (::selection).

Hacer temblar la pantalla en el blog

Un truco simple muy curioso que asustará a más de un lector. Se trata de un script que funciona haciendo achicar la pantalla y haciéndolo temblar, pareciendo que es un virus o algo así.
Para ver funcionar el truco, haz click aquí: Laboratorio de T.B.

Temblor en blog

Para esto debemos modificar la plantilla yendo a Blogger → Diseño → Edición de HTML → Busca la etiqueta body (presiona ctrl+f y busca <body>). Cuando lo hayas encontrado, pega el siguiente códgio debajo de la etiqueta body:

<script language='JavaScript1.2'>
function tremer(n) {
if (self.moveBy) {
for (i = 20; i &gt; 0; i--) {for (j = n; j &gt; 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);}
}}}tremer(6)</script>

Guarda los cambios y mira el blog!

IMPORTANTE:
Al agregar este código en la plantilla harás que el código se active cada vez que entres a una entrada o a una página del mismo blog. Esto puede llegar a ser molesto para el lector.

Crear link de "Añadir a favoritos"

Una forma de tener visitas en tu blog es que tengan tu blog incluida a la lista de favoritos o marcadores.
En este post enseño a crear un enlace en el que al hacer click abra una pequeña ventana del navegador (ya sea IE o Mozilla, sólo compatible con ambos navegadores).
El truco puede significar más popularidad y por esta razón, este puede ser un truco muy valioso y buscado por bloggers.

Obtener enlace para que marquen tu blog como favorito

Para lograrlo, la única manera es plasmarlo en un gadget entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos la opción HTML/Javascript y pegamos este código (Siempre de modo Edición de HTML):

<script type="text/javascript">
function agregar(){
//IE
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";
var titulo="Tu blog";
window.external.AddFavorite(url,titulo);
}

else {if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}
}
</script>
<a title="Teoría Blogger" href="javascript:agregar()">Agregar a mis favoritos</a>

Para personalizar el script a modo de tu blog, reemplaza los datos coloreados por los de tu blog según corresponda:

Rojo = URL del blog
Verde = Nombre del blog

Obtener botón para que marquen tu blog como favorito

ACTUALIZACIÓN EXCLUSIVA:
Hemos encontrado la forma de hacer que el enlace para añadir a favoritos, sea un botón. Así es más original y tienes más opciones de modificar el estilo a tu gusto.
Este truco hay que añadirlo como gadget entonces vamos a Blogger → Diseño → Elementos de la página → Elegimos el modo HTML/Javascript y pegamos el siguiente código:

<script type="text/javascript">
//Este truco en teoriablogger.blogspot.com
function agr(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";var titulo="Tu blog";window.external.AddFavorite(url,titulo);}
else {
if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}}
</script><input onclick="agr(this)" title="teoriablogger.blogspot.com" type="button" value="Añadir a favoritos" />

Post actualizado el 26 de septiembre de 2010. Este truco, en particular, fue creado por Teoría Blogger, si encuentran otro blog explicativo con este mismo truco, es coincidencia.