Poner Musica (audio) en las entradas de Blogger

Haz que tus lectores puedan escuchar tus post publicadosen Blogger através de SonoWebs. Esta es una herramienta muy útil que te permite darle voz a todo lo que escribes. Y ni siquiera tienes que registrarte además de que puedes escoger de entre 10 diseños de reproductor o subir tu propia imagen.
Para usar esta poderosa herramienta sólo escoge tu diseño y pega el código en tu plantilla. Incluso ellos te dicen cómo hacerlo usando imágenes explicativas para que sea menos complicado.

¿Crees que eso es todo? Pues no, también puedes escribir un texto desde su sitio y generar un código HTML para que lo pegues en tu blog y tus lectores escuchen el texto que escribiste. En definitiva esta herramienta te quedará perfecta para darle más opciones de accesibilidad al público.

<-- adsense -->

Read More

Poner vaaloración de estrellas en las entradas del blog

Saber cómo califican los demás nuestras entradas es un modo muy útil para saber qué tan gratas son nuestras publicaciones y esto nos da una idea de cómo mejorar. Afortunadamente Blogger desde hace poco ha incorporado este widget a su sistema y ya está disponible para nosotros.

Para habilitarlo hacemos lo siguiente, entramos en Diseño y en la esquina inferior derecha deEntradas del blog hacemos click en Editar.

Ahí marcamos la casilla Mostrar la evaluación de estrellas. Si no vemos esta función repetimos los mismos pasos pero desde Blogger in Draft.

Algunas plantillas no tienen el código completo para que se muestren las estrellas de valoración, si ese es tu caso entonces entra en Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include name='feedLinks'/>

Justo debajo de ella agrega esto:

<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Ahora busca esta línea (es posible que la tengas dos veces, si así fuera prueba en ambas):

<div class='post-footer'>

Y debajo añade este código:

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor'
expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl'
g:height='42'
g:type='RatingPanel'
g:width='180'>
</div>
</b:if>
</span>

Con eso ya tendrás el sistema de valoración de estrellas de Blogger en tus entradas.

Read More

Poner encuestas en Blogger

Blogger nos permite poner encuestas en nuestro blog añadiendo un elemento, sólo debemos escoger Encuesta del menú de gadgets. Escribimos la pregunta de la encuesta, las posibles respuestas, marcamos Permitir a los visitantes seleccionar varias respuestas (esto en caso de que lo deseemos), cambiamos la fecha que se cerrará la encuesta y guardamos los cambios.

Read More

Poner un ícono en las etiquetas

Los íconos tienen dos funciones, que el usuario identifique visualmente un elemento y estética (en este caso estética en nuestro blog). Un ejemplo es el ícono de estrella que aparece en los Temas de la Ciudad. Para añadir un ícono a nuestras etiquetas (labels) hacemos lo siguiente:

1. Vamos a Diseño > Edición de HTML y marcamos Expandir artilugios.
2. Buscamos la etiqueta
   

   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

3. Justo después de ella pegamos lo siguiente:

   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdio5GvHA8GMfJgqZvUGiAiwDIOZm-IK_5DbPbqRdZ0hvpL7BEy7ocgOTtLHOReYPKXhSU4ExAdng8gOk2GZRsxp74XnbOkzTOMJnN4odr6_lZ4iYp3Fcqm0NDwKmxgHnQiqq1VBoVUx-R/'/>

4. Guardamos los cambios y listo.

Lo que está en verde lo pueden cambiar por la URL del ícono que ustedes quieran, yo les he dado este folder de ejemplo

Read More

Cientos de Gadgets para Blogger

El pronóstico del tiempo, conversor de divisas, Messenger, estaciones de radio, citas célebres, chistes, pacman, webcams on line y cientos de complementos puedes encontrar en Google Gadgets.
Desde hace algunos años Google le dio pase abierto a webmasters para crear sus gadgers y subirlos y de este modo acumular cientos de gadgets para usar libremente en tu sitio. Ya sea por categoría o simplemente poner en la barra de búsqueda el gadget que buscas y podrás escoger el que más te convenga.

Instalarlo es fácil, sólo da click en el gadget que quieres añadir, configura las opciones (si las tuviera) y click en Obtener el código. Ahora sólo copia el código, entra en Diseño | Añadir un gadget | HTML/Javascript y pega el código que copiaste.

Usa sólo los que creas realmente necesarios para tu blog, ya que el uso excesivo e innecesario de ellos alenta la carga del sitio y no se ve nada estético.

Publicidad

Texto a voz
	Gadgets powered by Google

Chiste de Hoy
	Gadgets powered by Google

NOTA: Una gran parte del contenido del directorio de gadgets la ha desarrollado otras empresas o usuarios de Google, no Google mismo. Google no se hace responsable de su rendimiento, calidad ni contenido.

Enlace | Google Gadgets

Read More

Poner una imagen flotante en Blogger

Una imagen flotante o estática es una imagen que permanece visible aunque bajemos o subamos toda la barra de desplazamiento de una página y esta siga en el mismo lugar. Puedes ver un ejemplo en esta misma entrada, debajo del lado izquierdo verás la imagen que permanece ahí aunque bajes la página.
Puedes poner tu logo, un mensaje, una foto, o la imagen que más te guste. Colocarla es muy fácil, sólo entra en Plantilla | Edición de HTML y pega antes de </body> lo siguiente:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>

Sólo debes cambiar la URL de la foto; esta imagen quedará en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.
Este truco igual lo puedes usar para poner una flecha (ir arriba) y que los mande al inicio del blog, si ese es el caso entonces usa este código:

<a href='#'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0;left:0;'/></a>

Read More

Banner cambiante (rotador de banners)

Tener un banner con imágenes cambiantes nos es de mucha ayuda si tenemos muchos banners que mostrar pero queremos ahorrarnos espacio, ya que en el mismo lugar los banners irán cambiando cada tres segundos.

Para colocarlo entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega lo siguiente:

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>

Cambia los datos de la URL del enlace e imagen y listo.
En color azul se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.

Read More

Como crear un mini test en Blogger

Este script es para que puedan poner a prueba los conocimientos de sus lectores a través de unmini cuestionario, pueden personalizarlo como quieran y aumentar el número de preguntas o respuestas. No se guarda el registro de los resultados pues es más como un juego online para que se diviertan. Este es un ejemplo:

¿Qué significa W.W.W.?
What we want!
Baño en inglés
World wide web
No significa nada

¿Qué les pareció? Para usarlo sólo deben pegar el siguiente código en un post o en un elemento HTML/Javascript:

<center><font size=4>¿Qué significa W.W.W.?</font></center>
<input name="b" onclick="alert('Ni un poquito cerca');b.checked;" type="radio">What we want!
<input name="b" onclick="alert('¿En qué estás pensando?');b.checked;" type="radio">Baño en inglés
<input name="b" onclick="alert('¡Correcto!');b.checked;" type="radio">World wide web
<input name="b" onclick="alert('Hay que leer más');b.checked;" type="radio">No significa nada

Lo primero a modificar es la pregunta que está en azul, pueden cambiar el tamaño de la letra donde dice font size.
Lo que está en color rojo entre paréntesis es el texto que aparecerá en el mensaje de alerta.
Lo que está en verde son las posibles respuestas.
Pueden hacerlo tan largo o tan corto como ustedes quieran. Yo le he puesto un color de fondo para hacerlo más atractivo, si quieren hacer lo mismo sólo ponen antes del código esto: <div style="background-color: #c27ba0;"> y al final del cuestionario cierran con </div>

Read More

Mostrar la barra cargando pagina en Blogger

Puedes poner en Blogger la barra "cargando página" que indicará que los elementos del sitio se están cargando. Una vez que el sitio cargue todos los elementos la barra desaparecerá. Para colocarlo en nuestro blog nos ayudaremos con un script, los pasos son los siguientes:

Vamos a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

Guardamos los cambios y vamos a Diseño | Elementos de la página y en un elementoHTML/Javascript pegamos lo siguiente:

<div id="imgLOAD" style="text-align:center;">
<b>Cargando...</b>
<img src="URL de la imagen" />
</div>

Este elemento lo podemos arrastrar donde mejor nos guste, aunque generalmente va arriba de los posts. Donde dice URL de la imagen lo cambian por la dirección de la imagen que quieran. Les dejo unas cuantas imágenes para que usen.

Read More

Caja de Texto para que nos enlacen (Blogger)

Con este código en nuestra sidebar daremos la posibilidad a otros bloggers de que nos enlacen con un pequeño banner.
Vamos a Diseño | Añadir un gadget | HTML/Javascript y pegamos este código:

<center><textarea rows="3" cols="30" onclick="this.select();"><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></textarea></center>
<center><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></center>

El resultado es algo como este:

Este código está programado para que cuando se dé click sobre él se seleccione automáticamente todo el texto, si desean quitar esta función entonces eliminan donde dice: onclick="this.select();"
Cambian los datos en color rojo por los suyos y listo, tendrán un código para que los enlacen con una imagen. El área de texto donde aparecerá el código puede ser modificado, esto según el tamaño que lo quieran, sólo cambian el tamaño de rows (el alto) y el de cols (ancho).

Read More

Links y banners en movimiento (Blogger)

Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.

Para los links de texto el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" >
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>

Para los links con imágenes el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" scrollamount="1" onMouseOver="this.stop()" onMouseOut="this.start()">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>

Personalización:
Debes cambiar los datos en color rojo por los tuyos.
<marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, leftizquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.

El resultado es este:

Obtén un review de tu blog GRATIS

Agrega tu favicon aquí

Read More

Personaliza la suscripcion de FeedBurner

Si tienes en tu blog una caja de suscripción por mail de FeedBurner o aún si no la tienes puedes obtenerla y personalizarla para hacerla mucho más atractiva y no sólo lograr más tentación para suscribirse al feed, sino hacerla que se adapte al diseño de tu blog.
Por defecto estas cajas de suscripción son así:

Lo que haremos será darle un toque personalizado añadiendo color de fondo, una imagen u otro color de texto.

1. Primero consigue tu código de esta herramienta en FeedBurner, ingresa a tu cuenta y luego en la pestaña Publicize elige Suscripciones por Email del menú de la izquierda.
2. Ahora escoge tu idioma y copia el código.

Ese es el código básico, ahora vamos a hacerle unas modificaciones usando como ejemplo el código de mi feed.
Si quieres cambiarle el color de fondo tanto de toda la caja como al área de texto entonces agrega estas líneas:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background-color:pink" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ingresa tu correo</p><p><input style="width:140px; background-color: #ffffff;" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><inputstyle="background-color:grey;" value="¡Suscríbete ya!" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

La primera parte en color rojo es la que dará un color de fondo, en este caso rosa, pero puedes cambiarlo por otro color; la segunda parte en rojo es lo que le da el color al botón, en este caso es un gris oscuro.
Se verá así:

En este ejemplo igual he cambiado el borde, por defecto dice: border:1px yo lo he cambiado porborder:6px
También he quitado el letrero que dice: Delivered by FeedBurner, si también quieres quitarlo entonces elimina la parte en color verde.

Igual puedes usar una imágen de fondo y cambiar el color de la letra para que se vea algo así:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background: url('http://dl.getdropbox.com/u/647003/bg-colors.JPG');" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><span style="color: rgb(255, 255, 255); font-weight: bold;">Ingresa tu correo</span></p><p><input style="width:140px; background-color: rgb(238, 194, 178)" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><inputstyle="background-color:yellow;" value="¡Suscríbete ya!" type="submit"/></form>

En este caso la primera parte en color rojo es la que agrega la imagen, tú puedes usar la imagen que quieras, sólo cambia la URL por otra.
La segunda parte en rojo le dará un color rosa a la caja de texto; y la última parte es el color del botón, en este caso amarillo.
Y por último la parte en azul es la que cambia el color del texto, yo he puesto en estilo negrita y color blanco para que resalte de la imagen. En cualquiera de los casos puedes modificar los colores por los que gustes.
Incluso puedes cambiar el "Ingresa tu correo" y el "Suscríbete" por lo que tú quieras.

Recuerda que este código es un extracto del mío, así que no lo copies tal como está, consigue el tuyo como expliqué en los primeros dos pasos y luego agrega las líneas de cambios que creas necesarios, de lo contrario tus lectores se suscribirían a mi feed...lo cual no me molestaría. 

Read More

Slideshow con fotos propias

Como muchos saben, Blogger dentro de los gadgets que ofrece tiene uno de presentación de fotos; estas fotos son recopiladas de Picasa,Flickr y Photobucket. El problema es que casi nadie lo usa debido a que sólo muestra fotos de una palabra clave. Por ejemplo, si seleccionasPicasa como fuente deberás escribir una palabra clave para que la presentación de fotos incluya todas las imágenes que encuentre con esa palabra clave.

¿Pero qué pasa si quiero usar fotos mías y no fotos que Picasa recopila de la web?
Entonces vamos a ver cómo crear una presentación de fotos usando sólo las fotos que quieras.
Hay dos formas de hacerlo, una es creando un álbum público y otra es creando un álbum (aunque no sea público) y mostrando las fotos a través de un feed.

A través de un feed

1. Primero entra a Picasaweb y crea un nuevo álbum de fotos, ahí debes subir todas las fotos que quieras que se muestren en el slideshow.
2. En el lado derecho verás los datos del álbum incluyendo un enlace que dice RSS, con el botón derecho del mouse selecciona Copiar la ruta del enlace.
   
   
3. Ahora entra a Diseño | Añadir un gadget y elige Presentación.
4. En la Fuente selecciona Otros y en la URL del feed pega el link que copiaste de Picasa.
5. Ya sólo escoge las opciones de velocidad y presentación aleatoria.

Con un álbum de fotos público

1. Entra a Picasaweb y crea un álbum nuevo.
2. En Editar selecciona Propiedades del álbum y marca la casilla Público.
3. Ahí agrega todas las fotos que quieras para tu slideshow.
4. Ahora entra a Diseño | Añadir un gadget y elige Presentación.
5. En la Fuente selecciona Álbumes de Picasa y marca la casilla Álbum.
6. En Nombre de usuario pon tu dirección de correo electronico con la que te registras en Picasa o Blogger, y selecciona el álbum público que creaste.
7. Escoge las opciones que quieras y guarda los cambios.

De este modo tendrás una presentación de fotos (slideshow) con las imágenes que tú has elegido mostrar.
Cuando quieras agregar o eliminar más fotos sólo entra a Picasaweb y realiza los cambios. Blogger actualizará las fotos automáticamente.

Read More

Rotador de banners al azar

Anteriormente vimos cómo poner un rotador de banners en el blog. Ahora vamos a hacer uno pero que el banner muestre las imágenes al azar cada vez que un usuario entra a la página. Sólo necesitamos un script y las imágenes de los banners, todas deben tener el mismo tamaño.

Abre un elemento HTML/Javascript y pega ahí esto:

<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);

images = new Array;
images[0] = "URL del banner 1";
images[1] = "URL del banner 2";
images[2] = "URL del banner 3";
images[3] = "URL del banner 4";


links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";

var image = images[rand1];
var link = links[rand1];
</script>

<script>document.write('<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>')</script>

Agrega las URL de las imágenes donde se indica y si quieres que las imágenes tengan un enlace entonces agrégalo sustituyendo el signo de gato (#) por el link que le corresponde.
Incluso puedes agregar o eliminar más imágenes, sólo añade la línea que le corresponde.
Puedes ver un ejemplo en este blog de pruebas. Al cargar la página se verá un banner, si presionas F5 cargará otra imagen.

NOTA: Las imágenes cargan al azar y es posible que más de una vez cargue la misma imagen.

Read More

Crea tu propia barra de herramientas

El poder ofrecerles a tus usuarios una barra de herramientas para su navegador de Internet no sólo le da un toque de profesionalismo a tu blog, sino que genera un gran tráfico de visitas hacia tu sitio.

Conduit te permite crear y personalizar tu propia barra de herramientas en la cual puedes incluir el logotipo de tu blog, un lector de feed, búsqueda web, notificador de correos, avisos en tiempo real, juegos, chats y muchas cosas más.
Para crear la tuya hay que seguir estos pasos:

1. Entra a Conduit y regístrate.
2. Una vez registrado, haz click en Edit It Now.

3. Agrega los gadgets que quieras, tu logotipo, etc. y edítalos a tu gusto.
4. Una vez que hayas terminado de personalizarla, copia la dirección que aparece en Your toolbar's download page.

5. Comparte esa dirección con tus lectores para que descarguen tu barra de herramientas, o entra en la pestaña llamada Banners y selecciona un banner de descarga y ponlo en tu blog.

Así de sencillo puedes ofrecerle a tus seguidores una innovadora forma de estar al día con tu blog. Este complemento puede desinstalarse en cualquier momento y es compatible con Mozilla Firefox e Internet Explorer. Además, el usuario puede añadir más gadgets a la barra, por lo que podrán personalizarla de acuerdo a sus necesidades.

Y por si fuera poco puedes unirte al programa de afiliados en el cual te pagan una comisión por cada barra de herramientas que se descargue e instale.

Enlace: Conduit

Read More

Mostrar gadgets solo en la portada (Pagina principal) de blogger

Uno de los mayores problemas que presentan todos los blogs es el tiempo que tarda en cargar la página. Si bien hay gadgets que podemos eliminar para hacer la carga más ligera, hay otros gadgets que son muy necesarios para el blog y no queremos eliminarlos, así que lo que haremos serámostrarlos sólo en la página principal, o sea en la portada, y cuando el lector entre a una entrada estos desaparecerán.

Para lograr esto modificaremos el código del gadget que queramos ocultar en las entradas. En ese ejemplo usaremos el código de un gadget HTML/Javascript. Sólo hay que localizar el gadget con losartilugios expandidos y agregar lo que está en rojo.

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Como ven, la primera parte que agregamos va justo después de
<b:includable id='main'> y la segunda parte justo antes de </b:includable>

Esto lo hacemos con cada uno de los gadgets que queremos esconder, aunque todos tienen un código distinto, sólo hay que guiarnos por lo que mencionamos anteriormente.

De esta forma todos los gadgets se mostrarán en la portada, pero en las entradas se ocultarán aquellos que hayamos modificado.

Read More

Mostrar gadgets solo en las entradas (Blogger)

En el post anterior vimos cómo mostrar los gadgets sólo en la página principal, o sea en la portada del blog, de modo que cuando el usuario haga click en una entrada los gadgets editados desaparezcan.

Ahora haremos lo contrario, es decir, hacer que algunos gadgets estén ocultos en la portada, pero al entrar a un post éstos aparezcan.

Haremos el mismo procedimiento, hay que entrar a la edición HTML del blog con los artilugios expandidos y localizar el gadget. Luego agregar lo que está en color rojo:

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Como ven, el procedimiento fue exactamente el mismo, sólo cambia la primera línea en rojo que agregamos, que es la condicional que le ordena al gadget aparecer sólo cuando se está en las páginas individuales.

De igual forma este truco se aplica para cualquier gadgtet, sólo hay que localizar la línea<b:includable id='main'> para pegar después de ella la condicional, y la línea </b:includable> que es antes de ella donde se cierra la condicional.

Read More

Scroll de bienvenida en el blog

Este scroll de bienvenida está hecho a base de un script que hará que se muestren líneas de mensajes con las letras apareciendo como si se estuvieran redactando con una máquina de escribir.

Sólo entra a Diseño | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<script>
//Secify scroller contents
var line=new Array()
line[1]="Este es un scroll muy útil para dar la bienvenida..."
line[2]="Y motrar noticias relevantes a tus lectores..."
line[3]="Puedes configurarlo para poner el mensaje que quieras..."
line[4]="Quieres uno...?"
line[5]="CiudadBlogger.com"
line[6]="..."

//Specify font size for scoller
var ts_fontsize="12px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color:#000000; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="]"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",3000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
</script>

Cambia lo que está en color rojo por el mensaje que quieras. Si necesitas más líneas de mensaje sólo agrega una igual usando un número consecutivo (7,8,9,etc.)
Para modificar el tiempo que tarda cada mensaje cambia el número 3000 que está en verde, en este caso 3000 representa 3 segundos, si deseas más tiempo sólo modifica en milisegundos el tiempo que deseas.
Lo que está en color azul es el color del texto, puedes cambiarlo por el que quieras.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Read More

Caja de avisos con efecto de desvanecimiento (Blogger)

El siguiente script nos dará una caja de mensajes con un efecto de fade, es decir, con desvanecimiento entre cada mensaje.

Aunque no tienen links los mensajes, este truquito pueden servirte para dar la bienvenida, dejar un aviso, o poner un recordatorio en el blog.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget, y en un elementoHTML/Javascrip pega lo siguiente:

<script>

var delay=3000 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size="2">' //tag que abre los mensajes
fcontent[0]="Esta es una caja de avisos y mensajes..."
fcontent[1]="Con un efecto de desvanecimiento..."
fcontent[2]="Aprende cómo tener uno aquí..."
fcontent[3]="<b>CiudadBlogger.com</b>"
closetag='</font>'

var fwidth=160 //anchovar fheight=150 //alto

///No editar/////////////////

var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0

if (DOM2)
faderdelay=2000

//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}

index++
setTimeout("changecontent()",delay+faderdelay)
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////

frame=20;
hex=255 // Initial color value.

function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=12; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller").style.color="rgb(0,0,0)";
frame=20;
hex=255
}
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')

window.onload=changecontent
</script>


<ilayer id="fscrollerns" width="&{fwidth};" height="&{fheight};"><layer id="fscrollerns_sub" left="0" width="&{fwidth};" top="0" height="&{fheight};"></layer></ilayer>

Cambia lo que está en color rojo por tu mensaje, puedes agregar o quitar más líneas.

Puedes modificar el ancho y alto de la caja cambiando los valores que están en color azul al inicio del código.

Para quitar el borde de la caja busca donde dice border en color verde y cambia 1px por 0px.

Si quieres cambiar el color del texto busca lo que está en negrita style.color="rgb(0,0,0)" y pon ahí el código hexadecimal del color, por ejemplo si lo quieres rojo sería rgb(255,0,0), si lo quieres color verde sería rgb(00,80,00), amarillo sería rgb(255,255,0), etc.

IMPORTANTE: Es posible que si tienes muchos script en tu blog, la caja de avisos no funcione.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Read More