Campaña ¡Archivos en Blogger, ya!

Todos, o casi todos los que tenemos un blog, solemos hacer uso de ficheros javascript para dotarlo de ciertas funcionalidades que Blogger no ofrece y, como Blogger -valga la "rebuznancia"- no permite almacenarlos en el espacio que nos presta, hay quien se vale de la artimaña -legal por otra parte- de albergarlos en Google Pages.

Pero es que resulta que leyendo el blog de Gema, me entero de que de aquí a fin de año, los chicos de Google tienen pensado migrar todas las páginas de Google Pages al nuevo sistema que van a denominar Google Sites. Ahora, posiblemente, llegues a preguntarte "bueno, ¿y qué consecuencias tiene esto?". Pues una muy importante, que es que no admitirán los ficheros *.js que podamos tener almacenados, por lo que el pitote que nos pueden organizar, puede ser importante.

Ahora me preguntarás "¿y por qué no trasladas esos ficheros a otro lugar que te lo permita?" y yo te contestaré con otra pregunta: ¿y no es mejor dejar las cosas como están, o, incluso, por qué no pedimos a Blogger que nos deje almacenarlos en nuestro espacio?

Debido a esto, por parte de la comunidad de usuarios de Blogger se está lanzando la campaña ¡Archivos en Blogger, ya!, a la que es muy fácil sumarse, tan sólo hay que acceder la "Página de los deseos de Blogger", y votar "Upload other files to my blog" o, dicho en español, "Subir otros archivos a mi blog".

Por otro lado, el autor de Pizcos Blog, ha creado unas bonitas imágenes que podemos insertar en la barra lateral de nuestro blog. También deja a nuestra disposición el código para insertar un artilugio en una entrada en la que hablemos de este tema para que otros Blogueros puedan agregar en su blog la imagen que mencionaba arriba sin el menor esfuerzo. Quedaría tal que así y para comprobar su funcionamiento tan sólo debes hacer clic en el botón "¡Súmate a la campaña!":

<a href="http://help.blogger.com/bin/?page=wishlist"><img style="display:block; margin:10px 0 0 0; text-align:center" alt="¡Súmate a la campaña!" src="http://3.bp.blogspot.com/_soEirMkZv9g/SKBbL_SJsVI/AAAAAAAAAh0/pvdAXsK1e3E/s200/ABlogC.png" /></a>

Bueno, pues si tienes tu blog en Blogger, estás empezando a tardar en sumarte a la iniciativa. ¡Ah! Y en Vagabundia, el maestro JMiur te enseña una alternativa al alojamiento de ficheros que funcionará hasta que deje de funcionar, claro.

Seguir leyendo...

Contraer la entrada.

Emoticonos en los comentarios de Blogger.

Como habréis comprobado desde hace ya bastante tiempo, para poder dar un mayor énfasis en los comentarios, habilité la facilidad de incluir emoticonos en los mismos.

Si queréis hacer lo mismo en vuestro Blog, es algo realmente fácil.

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Lo primero que debes hacer es descargarte este fichero. Como podrás comprobar, contiene un fichero javascript y trece -bonito número- emoticonos. Después de descomprimir todos los ficheros, debes subir a tu espacio personal el fichero VEmoticones.js y, a continuación, "tocar" el código de la plantilla de la siguiente forma:

Desde Edición de HTML, incluir antes de ]]></b:skin> el siguiente código:

/* Emoticonos
----------------------------------------------- */
.comment-body p img {vertical-align: top; padding-right: .3em;}

y antes de la etiqueta </body>, este otro:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://tu_espacio/VEmoticones.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Bueno, pues así de sencillamente, este truco debería funcionar. Ya sólo queda guardar los cambios que hemos hecho y probar. Los emoticonos que tendremos disponibles, son los siguientes:

	:)	:-)	:]	:-]
	:'-(	:((	:'(
	:(	:-(	:[	:-[
	:P	:-P
	:D	:-D	xD
	:$	:-$
	;)	;-)	;]	;-]
	:-I	:-|
	:-X
	:o	:-o
	:O	:-O
	|O	|-O
	:/	:-/	:S

Una última recomendación. La ubicación de los emoticonos está definida en el fichero VEmoticones.js de la siguiente forma:

<img src="http://img179.imageshack.us/img179/2107/com-smile.gif" />

Como podéis observar, todos ellos están albergados en ImageShack. Esto puede suponer un problema ya que, si el servidor está muy cargado o si son borrados, aunque el truco seguirá funcionando, no dará esa sensación pues los emoticonos no se mostrarán, por lo que es más recomendable subirlos a algún espacio que tengamos y modificar el javascript con la nueva ruta.

Referencias: Vagabundia (gracias, Maestro).

Seguir leyendo...

Contraer la entrada.

Redes Sociales.

Nunca había dado importancia a las Redes Sociales -"la ignorancia hace valientes a los hombres", Napoleón dixit- pero he estado leyendo acerca del tema y he de reconocer que estaba equivocado del todo, por lo que he decidido rectificar y dejar, para quien quiera hacer uso de ellos, accesos directos a las Redes Sociales más populares en el pie de cada entrada. Para conseguirlo he hecho lo siguiente:

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Nos vamos a la edición HTML de la plantilla, marcamos expandir plantillas de artilugios y buscamos el siguiente código:

]]></b:skin>

Antes de esa línea copiamos:

/* CSS para redes sociales
----------------------------------------------- */
.rsociales ul {
font-size: 100%;
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Ahora buscamos:

<p class='post-footer-line post-footer-line-3'/>

Justo antes de esa línea insertamos:

<div class='rsociales'>
<table cellspacing="5">
<tr>
<td>Enviar a:</td>
<td><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a></td>
<td><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://img45.imageshack.us/img45/5606/technoratiiy1.gif'/></a></td>
<td><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://img50.imageshack.us/img50/9913/deliciogl4.gif'/></a></td>
<td><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://img50.imageshack.us/img50/300/diggjf4.gif'/></a></td>
<td><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Yahoo!'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://img519.imageshack.us/img519/7119/yahooyb7.png'/></a></td>
<td><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' class='rsociales-sobre' src='http://img519.imageshack.us/img519/9755/googleoq9.png'/></a></td>
<td><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Furl'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://img519.imageshack.us/img519/6871/furlee5.png'/></a></td>
<td><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://img519.imageshack.us/img519/9558/redditse1.png'/></a></td>
<td><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Magnolia'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://img519.imageshack.us/img519/4033/magnoliaho5.png'/></a></td>
<td><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://img519.imageshack.us/img519/556/blinklistspk5.png'/></a></td>
<td><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blogmarks'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://img519.imageshack.us/img519/152/blogmarksus8.png'/></a></td>
<td><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Fresqui'><img alt='Agregar a Fresqui' class='rsociales-sobre' src='http://img45.imageshack.us/img45/5397/fresquisr8.gif'/></a></td>
<td><a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Promoting Blogs'><img alt='Agregar a Promoting Blogs' class='rsociales-sobre' src='http://img261.imageshack.us/img261/5318/pb16x16it8.png'/></a></td>
</tr>
</table>
</div>

Dadle al botón de "Vista previa" y comprobad que todo funciona. Si falla algo, dadle al botón "Borrar cambios" para que la plantilla quede tal y como cuando empezamos a trastear.

Como podéis ver, el resultado es la lista de iconos de acceso al pie de cada entrada a las principales Redes Sociales que comentaba.

Referencias: La Revolución Industrial.

Seguir leyendo...

Contraer la entrada.

Programar entradas en Blogger.

Como buen lector que eres de este blog habrás visto que redacto una entrada todos los días que normalmente publico un poco antes de la medianoche. Si te paras a pensarlo puedes llegar a decir: "¿Y este tío? ¿Es que siempre está enganchado?". Pues siempre, no, pero casi, y para esos "casis" -vacaciones, viajes...- me valgo de la posibilidad que ofrece Blogger de programar entradas, evitando así esa sensación de "abandono" del Blog que puede provocar nuestra ausencia.

Lo único que tienes que hacer es entrar en el Draft de Blogger, escribir tu entrada como haces habitualmente, indicar la fecha y hora en que quieres que se publique y pulsar el botón Publicar entrada. Voilà, la entrada está programada.




Como podrás observar, el estado que muestra es Programada. Ahora sólo tendrás que esperar que llegue esa fecha para que se publique sin tu intervención.

¡¡Noticias frescas!! Entrad en el Draft de Blogger y veréis la cantidad de artilugios nuevos que han puesto.

Seguir leyendo...

Contraer la entrada.

Blogger Help en YouTube.

Blogger Help es una herramienta para Bloggeros que de tan conocida llega a ser olvidada. Muchas veces nos surge una duda y en vez de ser el primer lugar en el que consultar, nos dedicamos a buscar en los 300.000 -o más- sitios de ayuda que existen en Internet perdiendo el tiempo en ocasiones porque no encontramos lo que buscamos o porque los trucos que indican no funcionan.

Pues para facilitarnos más las cosas han decidido abrir un canal en Youtube con unos pocos vídeos -por el momento- en el que nos enseñan a hacer las cosas más básicas que se nos pueden plantear en este mundillo.

Desde aquí mi felicitación por esta interesante iniciativa.

Seguir leyendo...

Contraer la entrada.

Zonas de la plantilla Blogger.

Una plantilla estándar de Blogger está dividida en distintas zonas que son identificadas con determinados nombres. Cuando cualquier novato en estas lides como yo quiere hacer cualquier modificación en la suya, lo normal es que acuda a uno de los muchos blogs de ayuda que existen, busque lo que quiere hacer y aplique la solución que le indican.

Pero hay algo que siempre he echado de menos en todos los blogs de este tipo que he visitado, y es precisamente lo que indica el título de la entrada: una forma de identificar las zonas de una plantilla estándar de Blogger para poder modificarla a mi antojo, así que me he propuesto ayudarme a mí mismo y a todos a los que les haga falta modificando una Plantilla Denim para identificar por colores las áreas que la componen. El resultado -un tanto psicodélico- es este:


Y el código de colores es este:

	#header
	#header-wrapper
	body
	#content-wrapper
	#main-wrapper (afecta también a la zona de comentarios)
	.post-title
	.post
	.post-footer
	#sidebar-wrapper
	.sidebar h2
	.sidebar .widget-content
	#footer

Pues lo dicho, espero que nos sirva a todos de ayuda para caminar un poco más por nuestra cuenta en el mundo de Blogger.

Seguir leyendo...

Contraer la entrada.

Eliminar "Suscribirse a Atom".

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Cuando creas un blog, observarás que al final aparece un texto que dice "Suscribirse a: Entradas (Atom)" el cual permite a nuestros visitantes suscribirse a nuestras entradas.

Si deseas que no se muestre, tendrás que buscar en la plantilla HTML feed-links { y sustituir lo que está entre las llaves { } por esto:

.feed-links {
display: none;
visibility: hiden;
}

Si feed-links { no está en tu plantilla, tendrás que insertar entre las etiquetas <head> y </head> el anterior código

Referencias: El Escaparate de Rosa.

Seguir leyendo...

Contraer la entrada.

Iconos para Blogger.

Glory in Life es un blog de contenido diverso en el que, de pura chiripa, he encontrado dos entradas que pueden ser muy interesantes para cualquier bloggero.

La primera es 51 iconos para RSS con diseños tan curiosos como estos:

La segunda es 51 iconos de correo, todos ellos igual de vistosos:

Seguir leyendo...

Contraer la entrada.

Mensaje de número de comentarios.

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

"Como habrás observado, cuando Blogger indica el número de comentarios que tiene una entrada lo hace de una forma un tanto chapucera, ya que dice que hay "0 comentarios", "1 comentarios" o "X comentarios". Particularmente, no me gustaba, y prefería que apareciera "No hay comentarios", "1 comentario" y "X comentarios" lo que me parece más adecuado a nuestro idioma. Si tú también quieres cambiarlo, tendras que hacer lo siguiente:

1. Entra en la edición del código HTML y busca esta parte de código:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>

2. Y sustitúyela por esta:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>No hay comentarios</b:if>
<b:if cond='data:post.numComments == 1'>1 comentario</b:if>
<b:if cond='data:post.numComments > 1'><data:post.numComments/> comentarios</b:if>
</a>
</b:if>
</b:if>

3. Busca esta otra pieza de código:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/><data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

4. Y sustitúyela por esta otra:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>No hay comentarios</b:if>
<b:if cond='data:post.numComments == 1'>1 comentario</b:if>
<b:if cond='data:post.numComments > 1'><data:post.numComments/> comentarios</b:if>
</h4>

Referencias: Blog and Web

Seguir leyendo...

Contraer la entrada.

Ocultar el mensaje de Búsqueda por Etiquetas.

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Cuando una plantilla como la de este blog tiene un menú horizontal, al entrar en las correspondientes opciones te puede aparecer una caja similar a esta:

Mostrando entradas con la etiqueta XXXXXXX.
Mostrar todas las entradas.

Si deseas ocultarla como he hecho yo, busca en el HTML de tu plantilla los caracteres ]]>e inserta el siguiente código en la línea anterior:

.status-msg-wrap {
display:none;
}

Referencias: El Escaparate de Rosa.

Seguir leyendo...

Contraer la entrada.

Enlaces externos.

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Todo autor de un blog se precia de tener un buen número de amigos blogueros y como amigos que son, te gusta favorecerlos en la medida de tus posibilidades por lo que es muy común poner un enlace en la sidebar de tu blog hacia el de ellos.

Uno de los defectos que en mi opinión tiene Blogger es que cuando creas un enlace de este tipo y alguien pica sobre él, se abre en la misma página, es decir, tu blog se evapora en favor del de tu amigo/a. ¿Qué quiere decir todo esto? Pues que una cosa es ser agradecido, y otra cosa es canibalizar tu blog.

Hay una forma de hacer que los enlaces de la sidebar se abran en una ventana aparte y es la siguiente:

Vete a la edición HTML de tu plantilla, expande los artilugios y busca la siguiente parte de código:

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

y agrega el código que puedes ver en negrita:

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y aunque este blog no sea un dechado en visitas, me gustaría hacer dos recomendaciones sobre poner enlaces hacia otros:

• Es de bien nacidos el ser agradecidos.
  
• Un grano no hace granero, pero ayuda al compañero.
  

Referencias: Puedo asegurar y aseguro que no me acuerdo de qué página adopté este truco, pero si hay alguien que se crea su dueño, que haga el favor de indicármelo para referenciarle a él.

Seguir leyendo...

Contraer la entrada.

Ocultar la barra de Blogger.

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Si no te hace mucha gracia que tu blog muestre la barra superior de Blogger, puedes ocultarla -no eliminarla- de una forma muy sencilla, tan solo tendrás que insertar el siguiente código entre las etiquetas <head> y </head>

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

Et voilà!, la barra desapareció.

Como para todas las cosas, hay quien está a favor de este truco y hay quien no. Los que están a favor aducen que, aparte cuestiones estéticas, nuestros visitantes no pueden pulsar por error el botón Marcar Blog. Los que están en contra argumentan entre otras razones que, puesto que te ofrecen un espacio gratuito donde expresarte, no es de ley quitarla.

En fin, allá cada cual.

Referencias: El Escaparate de Rosa

Seguir leyendo...

Contraer la entrada.