Crea tu favicon para Blogger
¿Qué es un Favicon? Según la Wikipedia es el "término reducido de la palabra inglesa "Favorites Icon". También conocido como icono de página, es un icono asociado a una página web concreta. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden usarlos. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre de la página web en la lista de favoritos y en los títulos de las páginas."
Para crear el tuyo sólo tienes que seguir estos pasos:
1.Entra en http://www.html-kit.com/favicon/ y sube la imagen que quieras que aparezca cuando la gente visite tu blog. Se generará un favicon que tendrás que descargar. Te creará una carpeta con una imagen .ico y una carpeta llamada extra. Ya que blogger no reconoce la extensión .ico usaremos la imagen que hay dentro de esa carpeta "extra" que es .png.
2. Debemos subir el archivo "favicon.png" a un hosting de imagenes, por ejemplo en http://img1.imageshack.us/. Una vez que subamos el archivo tendremos como resultado la direccion URL del icono.
3. Agregaremos a nuestra plantilla (entre head y /head) lo siguiente:
< rel="icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">< rel="shortcut icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">
4. Sólo queda guardar los cambios y listo. La próxima vez que alguien acceda a vuestro blog verá vuestro favicon junto a la dirección.
Por último decir que este tutorial es sólo para usuarios de Firefox y Blogger. Si aún usas Internet Explorer, ya sabes:
CÓDIGOS HTML BÁSICOS ( I )
Aquí os dejo algunos códigos HTML que os pueden servir en algún momento dado a la hora de redactar un post o modificar vuestro blog de alguna manera:
- Para que un enlace se abra en una venta nueva:
PALABRA QUE ENLAZARÁ AL SITIO
Quedaría así: CODIGO
- Para eliminar la barra de Blogger Beta añadimos en la plantilla antes de :
- Para que una palabra aparezca como tachada:
Quedaría así: TACHADO
-Para poner códigos HTML en un post sustituiremos: < por & l t ; (los 4 símbolos juntos, sin espacios) y > por & g t ; .
Publicado por Freedom for Cachuli en 12:05 1 comentarios
Últimos comentarios en la barra lateral de Blogger
Si quieres que en tu barra lateral aparezcan los últimos comentarios de los lectores de tu blog sólo has de seguir estos pasos, es muy sencillo:
1. Ve a Plantilla -> Añadir elemento de página -> Feed
2. Te pedirá una URL, has de introducir ésta:
http://NOMBRE DE TUBLOG.blogspot.com/feeds/comments/default
3. Ahora puedes elegir el número de comentarios que quieres que se vean, y si quieres que se muestre la fecha y/o el autor. Ponle un título al bloque, por ejemplo "Últimos comentarios" y publícalo.
4. Ponlo en el lugar de la barra lateral que desees.
________________
Pestañas para blogger
Hace un tiempo, en el post "Pestañas para blogger beta" expliqué cómo hacer para que las etiquetas de nuestro blog aparecieran en forma de pestañas. Pues bien, esta vez, y a petición de Bexza lo que haremos será convertir nuestras etiquetas en botones, como las que tengo en mi barra lateral. El procedimiento es el mismo pero cambiando algunas cosas, así que repetiré los pasos que son iguales e introduciré los cambios (en color verde) que teneis que hacer para que os aparezcan en forma de botones.
1. Etiquetamos todos los posts en categorías.
2. Nos dirigimos a Plantilla /Elementos de la página. Añadimos el elemento de página "Etiquetas", y lo colocamos donde queramos; o bien debajo del título como yo he hecho o bien en la barra lateral.
3. A continuación entramos en Plantilla /Edición de HTML y marcamos la opción "Expandir plantillas de artilugios".
4. Buscamos esta línea de código:
Y la sustituimos por esta:
5. Luego buscamos:]]> y justo antes añadiremos uno de los códigos que podemos encontrar en csspicstock.blogspot.com. Hay 14 diseños donde elegir. Yo elegí el 14, con lo cual añadí el siguiente código:
/*- Menu 14--------------------------- */
#menu14 {
width: 200px;
margin: 10px;
}
#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/
blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px;
}
#menu14 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/
blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}
6. Por último nos situaremos en esta parte de código:
0 comentarios:
Publicar un comentario
Agradezco a cada uno de ustedes que se han tomado el tiempo de leer esta revista electrónica.