Efecto de sombras en los títulos de los post

Debo empezar aclarando que este efecto no se ve en Internet Explorer (qué raro ¿no?) así que sólo lo podrán disfrutar usuarios de Mozilla Firefox, Google Chrome y Safari.

Se trata de un efecto de sombras en los textos que bien podemos aplicar dentro de un post o para darle un toque original a los títulos de las entradas. Lo puedes usar donde quieras pero eso sí, con mucha prudencia, pues puede cansar mucho la vista del lector y terminar fastidiado.

El efecto es este:
(lo he puesto en imagen para que los que usan IE puedan verlo)

Para crear este efecto en los títulos de tus entradas es muy sencillo, sólo entra en Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

.post-title {
text-shadow: #6374AB 10px -10px 3px;
}

Para usar este mismo efecto dentro de un post o un elemento HTML/Javascript sólo encierra el texto que deseas que tenga sombra con este código:

<span style="text-shadow: #6374AB 10px -10px 3px;">Aquí va tu texto</span>

Puedes modificar el color de la sombra o la distancia:

• #6374AB es el color de la sombra.
• 10px es el margen derecho entre la sombra y donde inicia el texto.
• -10px es la distancia de arriba entre el texto y la sombra.
• 3px es el difuminado de la sombra, entre más alto sea el número más borroso se verá.

Si puedes ver la sombra de este texto es que tienes un navegador moderno

NOTA: Si no aperece el efecto en los títulos, prueba poner el código debajo de .post h3 {

Gadget de estadísticas del blog

Este gadget al igual que el anterior ya ha circulado desde hace tiempo, se trata de mostrar el número de entradas y de comentarios que tiene el blog, sólo que yo le he agregado el tiempo de vida del blog, o sea los días que tiene online desde que se creó.

Para agregarlo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pegar esto:

<div style="float: left;"><img style="width: 53px; height:48px;" src="http://i38.tinypic.com/2i9jls6.png"/></div>
<div style=" float: left; text-align: left; font-size:12px;">
<script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(22, 1, 2009, "" );</script> días online<br/>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://tublog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> entradas
<br/>
<script src="http://tublog.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> comentarios</div><div style="clear: both;"></div>

Ahora sólo cambia lo que está en negrita por la fecha que abriste tu blog, puedes saberlo viendo la fecha de tu primer post; primero va el día, luego el mes y por último el año. Igual cambia lo que está en color rojo por la dirección de tu blog y listo. Si quisieras cambiar la imagen sustituye lo que está en verde por la URL de tu imagen.

El resultado es este:

días online
entradas
comentarios

Gadget de entradas más comentadas

Este gadget ya tiene algo de tiempo pero me lo han solicitado últimamente así que les diré cómo poner un widget de los artículos más comentados, o sea las entradas más populares.

Es un gadget que funciona con las Pipes de Yahoo y lo que hace es identificar las entradas que tienen más comentarios para mostrarlas en la sidebar.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega esto:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Ftublog.blogspot.com&num=5" type="text/javascript"></script>

Sólo cambia lo que está en rojo por la dirección de tu blog y el número de entradas que quieres que se muestren en el gadget.

Tu blog en versión para celular

Cada día son más las personas que se interesan por tener lo último en telefonía celular, por lo que este sector en crecimiento tiene a su alcance el acceso a Internet desde un dispositivo móvil.

Entonces si cada vez más personas navegan por Internet desde su celular habrá que preocuparse por tener el blog en versión para móviles.

¿Por qué? Bueno, aunque casi todos los teléfonos tienen acceso a Internet no todos usan la misma tecnología así que una página normal aparece con las imágenes descuadradas, sin estilos de color, tamaño, forma, etc. Y esto es entendible pues las páginas web son diseñadas para verse desde un monitor de computadora por lo que los tamaños y los estilos difieren por completo de un dispositivo móvil.

Además, cuando un usuario se conecta a Internet desde su celular lo que quiere es tener acceso rápido al contenido ya que los costos de este servicio son altos y la accesibilidad es limitada, así que no se detienen a ver banners, gadgets y ese tipo de adornos que tiene una página web.

Así que vamos a crear una versión móvil del blog de modo que pueda verse desde un dispositivo móvil de forma clara, rápida y accesible.

Para ello usaremos un servicio gratuito que se llama MoFuse, quien es el que nos hará una versión móvil del blog y además nos dará una URL para tener acceso a esta versión del blog.

1. Primero habrá que entrar a la página de MoFuse.
2. En la parte de en medio donde dice Mobilize your blog now escribe la URL de tu blog y haz click en Mobilize.
3. Ahora llena los datos del nombre de la página, la dirección que quieres para tu versión móvil, datos de usuario para el registro y haz click en Launch Mobile Site.
4. Ahora verás en el menú un apartado que dice Your Mobile Sites, ahí haz click sobre el nombre de tu blog.
5. En el lado derecho encontrarás un menú de opciones, ahí puedes empezar a personalizar tu blog móvil.

Verás que en el menú para personalizar puedes agregar color de fondo, un logotipo, links, un feed y hasta publicidad por si quieres poner tus anuncios de Adsense.

Este servicio es gratuito y muy completo ya que también tienes acceso a estadísticas para saber cuánta gente entra a tu blog desde la versión móvil.

Tu dirección será algo como http://tublog.mofuse.mobi y esa es la dirección que les darás a tus lectores para que entren a tu blog desde un celular.

Como puedes ver es fácil y rápido, y tus seguidores podrán estar siempre al tanto de lo que sucede en tu blog desde su celular.

Por cierto, si quieres tener los últimos trucos para el blog en tu celular sólo entra a ciudadblogger.mofuse.mobi desde tu teléfono móvil.

Nota: Si entras a la versión móvil de tu blog desde tu computadora verás un teléfono con tu blog en la pantalla, esa es la vista previa de tu blog, desde un celular sólo se verá el contenido.

Enlace | MoFuse

Cómo dejar una entrada siempre arriba del blog

A veces queremos darle al blog una apariencia de página web por lo que muchos desean tener un post inicial de bienvenida o explicativo el cual quieren que siempre esté arriba de todos los posts.

Como sabemos, Blogger ordena los posts por orden de fecha, del más reciente al más antiguo, por lo que siempre que escribamos un nuevo post éste ocupará la primera posición, es decir, estará hasta arriba de todos los posts, así que cada vez que escribamos un post nuevo se va hasta arriba de todas las entradas.

¿Entonces cómo hacer para dejar un post específico siempre hasta arriba?

Simple, usaremos la misma técnica que usamos para cambiar el orden de entradas, sólo que nos adelantaremos en el tiempo.

1. Primero redacta tu entrada que quieres dejar hasta arriba del blog.
2. Cuando hayas terminado publícala como lo harías normalmente.
3. Ahora haz click en Editar entrada y abajo del editor de entradas, junto al espacio para agregar las etiquetas haz click en Opciones de entrada.
4. Ahora en Fecha y hora de la entrada cambia el año de la fecha por el año 2025, por ejemplo, si la entrada la publicaste el día 24/09/09 cámbiala por 24/09/25

Listo, de estar forma esa entrada estará siempre hasta arriba de las demás entradas (hasta el año 2025), así aunque publiques una nueva entrada ese post estará siempre arriba, no se moverá, a menos claro, que publiques un post con una fecha más adelantada. Cuando llegue el año 2025 sólo cámbiala de nuevo por el año 2050.

Ojo, recuerda que primero debes publicar la entrada con la fecha normal, de lo contrario la estarías programando para que se publique el año 2025.

Ver también | Mostrar el primer post de forma diferente

Cambiar imagen al pasar el mouse

Anteriormente vimos cómo cambiar una imagen por otra al pasar el mouse utilizando un script. Pero para quienes al igual que yo les gustan las cosas sin tantas complicaciones, veremos una forma simplificada de tener el mismo efecto, sin scripts, usando un sólo código.

Este es un ejemplo, pasa el cursor sobre la imagen para que cambie.

Sólo basta que pongas este código en una entrada o un elemento HTML/Javascript:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.

Puedes usarlo para hacer algún menú o para mostrar fotos de "antes y después".

Mensaje de bienvenida ondulante

El siguiente script es para crear un mensaje de bienvenida en el blog con un efecto ondulante (wave) bastante llamativo. Pero ojo, sólo funciona SI NO tienes otro script para un scroll de bienvenida o algo parecido, pues si ya tienes un scroll no funcionará este.
Puedes ver un ejemplo en este blog de pruebas.

(23/09/2009) ACTUALIZACIÓN: Sólo funciona para Google Chrome, Safari e Internet Explorer 8, versiones anteriores a Internet Explorer funciona pero tarda en aparecer.

Para ponerlo en tu blog entra a Diseño > Edición de HTML, busca la etiqueta <body> y remplázala por esto:

<body onload="doWave(0)">

Ahora antes de </head> pega esto:

<script language='JavaScript'>
//<![CDATA[
var theText = "Bienvenidos"; //Aquí va tu texto

function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (50*Math.abs( Math.sin(i/(textLength/3.14))) ); //Tamaño del texto
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(nextSize(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theWave.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50); //Velocidad
}
//]]>
</script>

Cambia lo que está en rojo por el texto que quieras, el tamaño de la letra y la velocidad.
Por último entra a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pega esto:

<span style="color:red">
<div id="theWave">
</div></span>

Arrastra ese elemento hasta abajo de la cabecera de tu blog y cambia donde dice color:red por el color de letra que quieras.

Menú horizontal con descripción del link

Este es un menú de lo más sencillo, es simple pero tiene una característica muy peculiar, que al pasar el mouse sobre el link se muestra arriba de él una descripción del enlace. Puedes ver un ejemplo en este blog de pruebas, busca el menú que dice 'MENÚ CON LINKS DESCRIPTIVOS', pasa el mouse por encima de algún enlace y verás arriba de él una breve descripción.

Para ponerlo en tu blog sólo entra a Diseño > Elementos de la página > Añadir gadget, selecciona HTML/Javascript y ahí pega esto:

<p align="center"><b>
<span id="link_msg_show"></span>
<br/>
<br/>
<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 1</span></a> |

<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 2</span></a> |

<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 3</span></a>

Cambia los datos que están en color rojo y listo. Si quieres agregar más enlaces añade esto después de <br/>

<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto</span></a> |

Arrastra ese elemento abajo de la cabecera del blog y podrás tener un sencillo pero peculiar menú con enlaces descriptivos.

Agrandar imagen al pasar el mouse II

Anteriormente vimos cómo agrandar una imagen al pasar el mouse sobre ella, para ello agregamos unos estilos a la plantilla y un pequeño código en la entrada. Esta vez haremos el mismo efecto de ampliar la imagen pero con un código mucho más sencillo y corto.
Este es el ejemplo:

Tan sólo debes usar el siguiente código dentro de tus entradas:

<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />

• Sólo debes cambiar la URL de la imagen (en su tamaño normal)
• El primer width y height son las medidas a las que se va agrandar la imagen al pasar el cursor, width es el ancho y height es el alto.
• Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, es decir, el thmbnail.

Menú horizontal con efecto deslizante

Este es un menú horizontal desplegable para el blog con efecto deslizante. El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante al que le puedes agregar sub menús y estos aparecen con un efecto deslizante hacia abajo. Puedes verlo funcionando en este blog de pruebas.

Para poner este menú horizontal en Blogger sólo hay que seguir estos sencillos pasos:

Entra a Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<link href='http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css' rel='stylesheet' type='text/css'/>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.js' type='text/javascript'/>

Ahora entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega ahí esto:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a>
<ul>
<li><a href="#">Sub 3.2.1</a></li>
<li><a href="#">Sub 3.2.2</a></li>
<li><a href="#">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="#">Sub 5.1</a></li>
<li><a href="#">Sub 5.2</a></li>
<li><a href="#">Sub 5.3</a></li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 6</a></li>
</ul>


<br style="clear: left"/>
</div>

Ahora cambia los sígnos de número ( # ) por la URL del enlace del botón y arrastra ese elemento abajo de la cabecera.

Si quieres poner otra pestaña sólo debes agregar una línea como esta:

<li><a href="#">Otra pestaña</a></li>

Y si quieres agregar un sub menú entonces abajo de esa línea agrega esto:

<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
</ul>

Si quieres cambiar los colores del menú tendrás que editar el archivo .css y luego subirlo a tu propio servidor.
Aquí les dejo el script y el archivo CSS por si lo quieren editar o por si lo quieren subir a su propio hosting. Sólo recuerda que si lo subes a tu propio hosting deberás cambiar las URL que se encuentran en el código que pegaste antes de </head>

Descargar script y hoja de estilos

Cómo poner Messenger en el blog

Es una realidad que Messenger es el cliente líder en mensajería instantánea, por lo que su uso es sumamente importante a la hora de querer estar comunicados.

Es por ello que muchos bloggers desean tener comunicación con sus lectores vía Messenger, ya sea para dar asesorías, responder preguntas o simplemente conversar.

Así que vamos a poner el Messenger en el blog para que puedas estar siempre en contacto con tus lectores.

1. Primero inicia sesión en Windows Live Messenger e ingresa a la Configuración web.
2. Marca la casilla:
   Permitir que los usuarios de sitios web vean mi estado y me envíen mensajes.
3. Guarda los cambios y selecciona la pestaña Crear HTML.
4. A continuación selecciona una opción, puedes elegir tener la ventana del Messenger incrustada o un botón que permita abrir una ventana emergente con el Messenger. La opción tres no la selecciones ya que falla mucho para actualizar el estado.
5. Ya que has elegido la opción que más te guste copia el código HTML que se encuentra abajo.
6. Ahora entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega el código anterior.

Listo, podrás tener tu Messenger en tu blog; tus lectores podrán platicar contigo desde tu blog y tú podrás hacerlo desde el Messenger de tu computadora. Siempre que estés conectado tus lectores podrán ver en tu página que te encuentras en línea y podrán charlar contigo. No es necesario que ellos estén en tu lista de contactos, aun así podrán comunicarse contigo, incluso podrán conversar contigo de forma anónima si lo desean.
Por otra parte, los datos del usuario no se quedan registrados por lo que es una forma segura de iniciar sesión, además de que ningún otro lector que se encuentre en el blog podrá leer la conversación de los demás, excepto la que él mantenga contigo.

(17/09/2009) ACTUALIZACIÓN: Si eliges la ventana de mensajería instantánea, verás que abajo puedes elegir el color del gadget y las medidas de la ventana, sólo ingresa los valores correspondientes. Por defecto está en 300 x 300 px, pero esta medida generalmente es muy grande para la sidebar.

Cómo activar el editor actualizado en Blogger

Como muchos ya saben Blogger acaba de lanzar la nueva función de Leer más; esta función así como muchas otras sólo están disponibles en Blogger in Draft, para quienes no saben, Blogger in Draft es un laboratorio de pruebas de nuevas funciones de Blogger y que puedes usar entrando a Blogger in Draft para probar dichas funciones.

Pero aun así, hay muchos a quienes no les gusta la interfaz de Blogger in Draft y lo único que les gusta es el editor de entradas que usa. Bueno, para quienes sólo desean tener el editor de entradas avanzado de Blogger in Draft pero quieren seguir usando el Blogger normal, entonces vamos a activarlo de modo que ese editor avanzado pueda usarse desde Blogger común y aprovechar todas las ventajas de este editor.

Para activarlo entra a tu Blogger normal y luego ve a Configuración > Básico y abajo donde dice Seleccionar editor de entradas marca la casilla Editor actualizado.

Seleccionar editor de entradas	Editor actualizado - Descubre las funciones más recientes. Editor anterior Ocultar modo de redacción

Y listo, podrás tener acceso a todas estas funciones nuevas como:

• Botón de rehacer
• Botón de deshacer
• Fuente
• Tamaño de fuente
• Negrita
• Cursiva
• Tachado
• Color de texto
• Color de fondo del texto
• Enlace
• Añadir imagen
• Manipular tamaño de imagen
• Alineación de texto
• Lista enumerada y viñetas
• Cita
• Eliminar formato
• Leer más
• Convertir/ignorar saltos de línea
• Interpretar HTML escrito
• Mostrar HTML literalmente

Podrás regresar al editor de entradas normal cuando quieras, sólo ten en cuenta que cambiar de editor afecta a todos tus blogs, es decir que en todos tus blogs tendrás el mismo editor que hayas elegido.

Crear sitemap o tabla de contenido para Blogger

Una de las limitaciones de un blog es no poder tener un índice o sitemap del sitio que pueda facilitarle a los lectores poder encontrar el contenido que buscan.

Si bien el gadget de etiquetas y archivos de blog tienen la información de todos los post publicados, estos no se presentan en una sola página de forma completa, por lo que buscar los posts no siempre es cosa fácil.

Por suerte Amanda creó un gadget que permite mostrar una tabla de contenido del blog con la cual todos los post se muestran separados por las etiquetas. Éste gadget que es bastante bueno ha sido optimizado y simplificado por Abu Farhan por lo que no tendremos que hacer otra cosa que copiar un código y pegarlo.

Como dije antes, se trata de un sitemap o tabla de contenido que muestra el índice de todos los posts que se han publicado separados por categorías, además de que los posts más recientes aparecen con un texto que dice Nuevo!

Para que vean de qué les hablo pueden verlo funcionando haciendo click aquí.

Para implementarlo en tu blog sólo crea una nueva entrada y ahí pega esto:

<script style="text/javascript" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/tableindex.js"></script>
<script src="http://tublog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Sólo cambia la URL de tu blog y edita la fecha del post para que aparezca como el primer post publicado.

Así de fácil podrás tener un sitemap en tu blog. El índice de los post se ordena alfabéticamente y se actualiza de modo automático cada vez que publicas una nueva entrada.

Descargar script

Opción de guardar el post en PDF

Ya antes vimos cómo poner la opción de imprimir el post para aquellos lectores que necesiten tener el post impreso puedan hacerlo sin problemas, ahora les daremos a nuestros lectores una opción más, guardar el post en formato PDF.

Esto hará que su blog sea más dinámico, pues podrá guardarse en un documento que estará listo para ser enviado por email o para subirlo a cualquier página y pueda compartirse en otros medios.

Para ello usaremos un código desde el cual Web2pdfconvert nos permitirá guardar los post del blog en formato PDF.

Lo único que necesitas hacer es entrar a Diseño > Edición de HTML, marcar la casilla de Expandir artilugios y buscar esta línea:

<div class='post-footer-line post-footer-line-3'>

Si no aparece esa línea en tu plantilla busca esta otra:

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

Ahora debajo de esa línea pega lo siguiente:

<script type='text/javascript'>
var
pdfbuttonlabel=&quot;Guardalo en PDF&quot;
</script>
<script src='http://www.web2pdfconvert.com/pdfbutton.js' type='text/javascript'/>

Guarda los cambios y listo, verás abajo de cada post la opción de guardar la entrada en PDF. Puedes verlo funcionando en este blog de pruebas, haz click en Guardar como PDF y se abrirá una página que hará la conversión de formato, cuando esté listo da click en Click to download PDF file y el archivo se descargará en tu equipo.

Mostrar archivos Powerpoint y PDF en el blog

A veces es necesario mostrar ciertos documentos en el blog como presentaciones, ebooks, presentación de fotos, etc.

Blogger por defecto no tiene la opción de subir estos archivos para mostrarlos tal cual, así que tendremos que apoyarnos en un servicio externo que nos permita mostrar este tipo de archivos.

Se trata de SlideShare, un servicio gratuito online que nos permite subir archivos PPS y PDF para luego poder compartirlos en la web.

1. Primero deberás abrir una cuenta en SlideShare, y luego hacer el click en Upload localizado en el menú de arriba.
2. A continuación haz click en el botón Browse and select files... y elige el archivo de Powerpoint (PPS) o de Acrobar Reader (PDF) que vas a subir (no más de 100 MB por archivo).
3. Una vez que haya cargado el archivo podrás editar el título, tags, descripción y elegir si se permite la descarga del archivo.
4. Cuando termines presiona el botón Publish y dirígete a My Slidespace localizado también en el menú de arriba.
5. Estando ahí, haz click sobre el archivo que deseas compartir y del lado derecho verás que dice Embed, haz click ahí y copia el código.

Ese código lo pegas en un post y listo, tus presentaciones o PDFs estarás visibles y al alcance de tus lectores.

Enlace: SlideShare

¿Dejar o no la palabra de verificación en los comentarios?

La palabra de verificación o captcha se utiliza en los envíos de formularios, solicitudes, comentarios, encuestas, registros, etc. a modo de evitar que spambots (robots) utilicen estos servicios para distribuir spam.

Este sistema de protección también está disponible para Blogger y puedes verlo en muchos blogs, al momento de dejar un comentario te pide que ingreses los caracteres que se encuentran en una imagen.

Pero... ¿la palabra de verificación nos beneficia o nos perjudica?

Lo sé, a nadie nos gusta el spam y mucho menos ser víctima de él y la intención noble de los captcha sólo pretende protegernos de esa gente que programa los robots para dejarnos su mensajito de publicidad desleal.

Sin embargo hay que tomar en cuenta algo:

• Si tu blog es poco conocido o muy nuevo será casi imposible que uno de estos robots te encuentre y te deje spam.
• La mayoría de estos spambots están programados para encontrar blogs escritos en idioma inglés.
• Blogger tiene identificado a la mayoría de estos spammers por lo que aun cuando no tengas habilitado el captcha, Blogger identifica estos mensajes de spam y los elimina automáticamente.

¿Entonces para qué sirve en Blogger la palabra de verificación?

• Para hacerle perder tiempo a lo usuarios.
• Para desanimar a los lectores a dejar comentarios
• Ah sí, y para evitar spam...

A muchos nos ha pasado que leemos un post y nos gusta tanto o lo odiamos tanto que queremos dejar nuestra opinión, así que con la emoción sujetada al teclado redactamos el comentario, revisamos ortografía, añadimos detalles, eliminamos frases y cuando ya estamos listos para plasmar nuestro sentir... oh oh, hemos fallado con la palabra de verificación...una...y otra...y otra vez...así que mejor nos guardamos nuestro comentario para nosotros mismos y dejamos de lidiar con la tecnología.

Y mientras, el dueño del blog está feliz porque su blog está libre de spam y no se da cuenta que ha perdido uno o varios comentarios por tan útil sistema de protección.

¿Entonces debo o no dejar la palabra de verificación?

Eso queda a elección tuya, como mencioné antes, para que seas víctima de un spambot está muy difícil, y aunque fueras muy famoso como para que un spambot encuentre tu blog y deje un comentario de spam pueden pasar dos cosas, una, que Blogger identifique el comentario de spam y lo elimine, y otra, que tú desde la comodidad de tu escritorio elimines el comentario y asunto arreglado.

Para habilitar o inhabilitar el captcha, entra a Configuración > Comentarios y en donde dice ¿Mostrar verificación de la palabra para comentarios? selecciona Sí o No según sea el caso.

¿Y tú, crees que deba usarse o no?

Generador de mini botones

Mini botones, badges, antipixeles, placas, cualquier nombre que conozcas para estos botones que son muy populares generalmente para los directorios web. Son botones de 80x15 los cuales generalmente están divididos en dos secciones y tienen tanto una tipografía como un diseño muy simple. Estos son bastante populares en las grandes páginas web debido a que el tamaño del botón permite que en poco espacio se puedan mostrar varios de estos mini botones, además de que la simpleza del diseño no desvía la atención del usuario en otros elementos sino en el nombre de la página web.

Pues bien, Brilliant Button Maker es un generador de estos mini botones que te permite de una manera muy fácil crear tu propio mini botón usando no sólo la combinación de colores que quieras, sino que además te permite agregar imágenes.

Sólo debes elegir el color del borde, el color que estará dentro, el color de fondo de ambas secciones, el texto y listo. Para guardarlo haz click en Save it y podrás subirlo a cualquier servidor para que empieces a compartirlo.

Este mini botón podrás usarlo para que los demás te enlacen usando un simple código.

NOTA: Para ajustar el tamaño de cada sección del botón modifica el valor de Pixels from the left of bar position (from 0 to 80) a la medida que desees.

Brilliant Button Maker

Mostrar todas las entradas con un link

Como sabemos, el gadget de etiquetas nos facilita la vida cuando queremos buscar algún post o algún tema en particular dentro del blog. Pero ¿qué si quiero que me muestre todas las entradas del blog y no sólo una categoría específica?

Como el gadget de etiquetas no trae consigo esa opción lo que haremos será crear un link para mostrar todas las entradas del blog.

Sólo debes elegir dónde poner ese link, puede ser en un menú o debajo de las etiquetas dentro de un elemento HTML/Javascript.
El código para cualquiera de los casos es el siguiente:

<a href="http://tublog.blogspot.com/search?max-results=1000">Mostrar todas las entradas</a>

O si lo prefieres puedes usar una imagen como enlace:

<a href="http://tublog.blogspot.com/search?max-results=1000"><img src="URL de la imagen"/></a>

Así de sencillo podrás darle a tus lectores la opción de poder tener a la mano todas las entradas que has publicado.

Eso sí, te recomiendo que sólo lo apliques si tienes instalado el truco para mostrar sólo los títulos de los post, de lo contrario cuando alguien quiera ver todas tus entradas tardará muchísimo en cargar la página pues cargará todo el contenido de cada uno de los post.

Para verlo en funcionamiento haz click en el siguiente enlace:

Mostrar todas las entradas

Mensaje tipo Post-it para el blog

Ahora que estuve ausente se habrán dado cuenta que al entrar al blog aparecía un mensaje indicando que me encontraba fuera de la ciudad. Este mensaje tiene la opción de cerrarse para no molestar al visitante y se puede usar para poner cualquier tipo de aviso importante en el blog.

Para colocar un mensaje tipo Post-it en tu blog sólo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega ahí lo siguiente:

<style>
<!--
#postit{width:300px; height:100px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
-->
</style>

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon-small.png"/></a></b></div>

<!--AQUI VA EL MENSAJE-->
<br/>
Aquí va el mensaje que se mostrará cuando alguien ingrese al blog.
Para más trucos y tutoriales visita <a href="http://ciudadblogger.com">Ciudad Blogger</a>

<!--FIN DEL MENSAJE-->


<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()


</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>

En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el color de la letra, el tamaño del cuadro, etc.
Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva, links, etc.
Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:

var once_per_browser=0

Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se abra otra página dentro del mismo blog.

Así de sencillo puedes avisar a tus lectores de lo que creas importante.

Mensajes en la barra de titulo

Hemos visto dos formas de poner en movimiento la barra de título del navegador, una es como una marquesina y otra es como máquina de escribir. Esta vez jugaremos también con el área de la barra de título, pero más que poner en movimiento el título de blog mostraremos mensajes para dar la bienvenida a tus lectores o dar alguna información. Para que sepas de lo que hablo mira en la barra de título de este blog de pruebas.

Para mostrar mensajes en la barra de título de tu blog pega antes de </head> lo siguiente:

<script language='JavaScript'>
var default1 = "::Bienvenidos::"; // Este mensaje sólo se muestra cuando se carga la página
var text1 = "Muestra mensajes en el título del blog";
var text2 = "Quieres saber cómo?";
var text3 = "CiudadBlogger.com";
var changeRate = 3000;
var messageNumber = 0;

function changeStatus() {
if (messageNumber == 0) {
window.status=default1;
document.title=default1;
}
else if (messageNumber == 1) {
window.status=text1;
document.title=text1;
}
else if (messageNumber == 2) {
window.status=text2;
document.title=text2;
}
else if (messageNumber == 3) {
window.status=text3;
document.title=text3;
messageNumber = 0;
}

messageNumber++;
setTimeout("changeStatus();",changeRate);

}

changeStatus(); // leave here to run right away

// -->
</script>

Ahora sólo cambia lo que está en rojo por tus mensajes que vas a mostrar. El primero sólo se mostrará una vez cuando se cargue la página.
Si deseas agregar más mensajes agrega una línea en el área de los mensajes como esto:

var text4 = "Otro mensaje";

Y luego más abajo agrega también esto:

else if (messageNumber == 4) {
window.status=text4;
document.title=text4;
messageNumber = 0;
}

En ambos casos deberás modificar el número del mensaje, 4, 5, 6, etc. De igual forma si agregas más mensajes elimina la última línea que está en el mensaje #3

messageNumber = 0;

De modo que sólo aparezca esa línea en el último mensaje.

Los mensajes cambiarán cada 3 segundo, si deseas modificar el tiempo localiza esta línea:

var changeRate = 3000;

Ahí cambia 3000 por el número de milisegundos, por ejemplo 5000 para 5 segundos.