Ciudad Blogger: febrero 2009

Hace unos días estuve leyendo acerca de cómo poner la opción de leer más en un blog, y bueno, hice como veinte cambios y simplemente no quedaba. Luego me fijé que aunque se mostraba la opción, había posts que estaban tan cortos que no era necesario tener esa utilidad; hasta que me topé con un artículo de Deathly en el que nos daba una alternativa, expandir post. Esta me pareció perfecta, pues además de que me quedó a la primera resuelve el problema de que eliges en cada post si quieres que aparezca expandir el post o no.

Para hacerlo vamos a Diseño > Edición de HTML y marcamos Expandir artilugios. Pegamos el siguiente código antes de la etiqueta </head>

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/functiontoggleIt.js' type='text/javascript'></script>

Ahora buscamos este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Y lo remplazamos por este:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Seguir leyendo [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> 
</div>

Cuando quieras que esta opción aparezca en un post sólo escribimos lo que quieras que aparezca, y antes del texto que quieres que se oculte escribimos esta etiqueta

<span id="fullpost">y al final de su texto terminan con la etiqueta</span>

Ver ejemplo aquí

[+/-]

Solución del error bX-bliced

[+/-]

Juegos Google

[+/-]

Poner un buscador en Blogger

Algunos se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.
Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Elementos de la página | Añadir un gadget | HTML/Javascript. Y pega este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

El resultado será este:

Para el segundo buscador entra en Diseño | Elementos de la página | Añadir un gadget y elige Cuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Sólo debes cambiar los datos que están en color rojo por los tuyos y el resultado será este:

[+/-]

Crea imágenes divertidas para tu blog

[+/-]

Cómo subir un video en Blogger

[+/-]

Cambiar color de fondo por una imagen

[+/-]

Ver número de usuarios en línea

[+/-]

Cómo poner un favicon en Blogger

Es normal que muchos no sepan qué es un favicon, pues es relativamente corto el tiempo que ha pasado desde su creación. Bueno, pues un favicon es el ícono de un sitio web que aparece en la barra de direcciones; en la lista de favoritos (o marcadores); en el historial web; y en la pestaña del navegador. O sea en estos lugares:

¿Que para qué sirve? Basicamente para que los usuarios tengan más fácil acceso a los sitios que visita mediante el reconocimiento de íconos, o sea por mejor accesibilidad.

Bueno, ahora vamos a poner el favicon a nuestro sitio.

Primero debes tener la imagen que quieres usar como favicon (generalmente el logo de tu página) en formato jpg, bmp, gif o png en medidas de 16 x 16px o 32 x 32px.
Ahora hay que convertir esa imagen en formato .ico y para ello puedes hacer uso de cualquier página web que nos dé este servicio, como por ejemplo Dynamic Drive. Puedes usar tu favicon en formatos png o gif pero si quieres que se vea en Internet Explorer entonces deberá estar en formato ico.

Examinar

Create Icon

.ico

Ahora necesitas subir el ícono en un servidor gratuito, aquí puedes elegir el que quieras, siempre y cuando hagas público el archivo. Yo les recomiendo Dropbox pues acepta toda clase de archivos.
Ya que has subido el ícono al servidor entra en Blogger > Diseño > Edición de HTML, busca al inicio de la plantilla esta etiqueta:
<b:skin><![CDATA[/*

Justo arriba de ella pega este código:

<link href='http://URL del favicon/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://URL del favicon/favicon.ico' rel='icon' type='image/x-icon'/>

El código debe verse así:

Obviamente tú debes sustituir donde dice URL del favicon/favicon.ico por la dirección donde tienes alojado el ícono. Si deseas que el favicon sea animado entonces lo haces en formato .gif
Algunos dicen que sólo basta poner la primera línea del código, pero yo les recomiendo que usen los dos, ya que algunos exploradores como el Internet Explorer no siempre muestran los favicones.

ACTUALIZACIÓN 1: Si el favicon no se ve, entonces pega el código después de esta etiqueta: