Codigo blogger: 2007

Crea tu favicon para Blogger

Vuelvo a postear el tutorial modificado, donde lo explico de una manera más sencilla. Espero que os sea de utilidad.

¿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:

<a target="blank" href="http://www.DIRECCIÓN DEL SITIO.com">PALABRA QUE ENLAZARÁ AL SITIO</a>

Quedaría así: CODIGO

- Para eliminar la barra de Blogger Beta añadimos en la plantilla antes de <head>:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

- Para que una palabra aparezca como tachada:
<S>PALABRA</S>

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 ; .

Ú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.
________________

PD: Definitivamente he vuelto a dejar sólo el TAGBOARD. Ya me direís si os sigue sin funcionar y probaría a ponerlo de otra manera.

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:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Y la sustituimos por esta:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

5. Luego buscamos:]]></b:skin> 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:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y la reemplazaremos por esta otra, teniendo en cuenta que cambiaremos tabsF por (en mi caso) menu14.

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>

<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>

</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

Espero que os haya servido de ayuda. Si teneis alguna duda o algo no os funciona sólo teneis que decirlo.
Saludos!

Blogger y las imágenes

Lo elemental es entender que las imágenes de los posts son archivos externos que podemos mostrar, vincular o ambas cosas a la vez. Una imagen "incrustada" es una imagen que incluimos con la etiqueta IMG:

<img src="URLimagen" />

y a la que podemos mostrar con un tamaño distinto al original agregando los atributos WIDTH y HEIGHT:

<img src="URLimagen" width="ancho" height="alto" />

Todas las imágenes son externas por lo tanto podemos crear vínculos a ellas:

<a href="URLimagen">Aquí está la imagen</a>

o vínculos que, en lugar de texto, contengan una miniatura de la imagen original:

<a href="URLimagen">
<img src="URLimagen" width="ancho" height="alto" />
</a>

Para que al hacer click se abran automáticamente en en una nueva ventana o una nueva pestaña, usamos el atributo TARGET:

<a href="URLimagen" target="_blank">Aquí está la imagen</a>

Si dentro de la etiqueta IMG agregamos algunas propiedades de estilo, logramos hacer que se muestren "flotando" al lado de un texto:

<img src="URLimagen" style="float: left;/>Aquí va el texto al lado
<br clear="left" />

Aquí va el texto abajo
Donde agregamos la etiqueta CLEAR para forzar a que el siguiente elemento aparezca debajo y no al lado. Lo mismo, puede hacerse utilizando right en lugar de left.

Si un imagen es un vínculo, por defecto tendrá un borde, para eliminarlo, usamos el atributo BORDER:

<img src="URLimagen" border="0"/>

Cuando subimos una etiqueta con Blogger, aparece un código por defecto que asusta:

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

Esto es así porque Blogger crea dos imágenes, una contiene la imagen original, la otra una miniatura que se redimensiona automáticamente para que entre en el área de posts y es la que se muestra con la etiqueta IMG. A la otra, sólo se accede a través del vínculo, haciendo click en la imagen.

Un ejemplo simple:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s1600/imagen.gif es la imagen completa
http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif es la miniatura

Por cierto, esto tiene algunos problemas. Si subimos una imagen grande y queremos usarla en la plantilla ¿cuál es la URL que debemos poner? La lógica nos dice que la primera, la que se encuentra dentro de la etiqueta A ya que es la que tiene el tamaño completo, sin embargo, muchas veces esto no funciona, la imagen no se muestra.

Incluso, si ponemos la URL de la imagen en el navegador, no se mostrará sino que nos preguntará si queremos descargar el archivo ¿Por qué? al parecer, Blogger no apunta a la imagen sino a una página intermedia a la que no tenemos acceso. Esto es bastante frecuente si la imagen es muy grande, por ejemplo, los fondos de las plantillas.

Explicaciones no tengo pero la solución práctica es simple. Si la URL de la imagen que subimos es de este tipo o similar:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif

basta fijarse en el nombre de la carpeta, es este caso s400 y modificarla para que apunte a s00, de tal forma, la URL a incluir en la plantilla sería:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s00/imagen.gif

Tal vez, alguna vez Blogger se digne explicar claramente qué hace con las imágenes y cómo podemos usarlas.

Cambiar el color de fondo del blog

Cambiar el color de fondo en Blogger:

1. Entramos en Plantilla-> edición de HTML.

2. Buscamos el siguiente código:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

3. Después de los dos puntos de la palabra "background", sustituimos lo que tengamos por el símbolo # precedido de el código HTML del color que querais. Aquí teneis algunos. Quedaría, por ejemplo, de esta manera:

backgroun:#7FFF00;

Cambiar el fondo del blog por una imagen:

1. Entramos en Plantilla-> edición de HTML.

2. Buscamos el siguiente código:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

3. Después de -en mi caso- $bgcolor (o después del código de color que tengamos), escribiremos lo siguiente: url(dirección url de la imagen que querais poner de fondo). Quedaría así:

background:$bgcolor url(imagendefondo);

-NO OLVIDEIS PONER AL FINAL EL PUNTO Y COMA EN AMBOS CASOS-

Escribo este post por petición de minyusito, aunque espero que os sirva a tod@s de ayuda. Por cierto, si lo que quieres es iniciarte en el código HTML, te invito a que te pases por esta web http://daleclick.blogspot.com/.