Cómo alojar scripts en la plantilla

El tema del alojamiento de los scripts es un tema recurrente debido a que no todos los servicios gratuitos de hosting admiten este tipo de archivos, o bien, porque pueden tardar mucho en cargar si el ancho de banda del hosting es reducido, lo que trae consigo que el blog tarde en cargar.

Si bien podemos alojarlos en Google Sites o Dropbox también podemos alojar los scripts en la propia plantilla, de este modo el tiempo de carga de la página será menor y dejaremos de estar dependiendo de un servicio externo a Blogger.

Alojar los scripts directo en la plantilla funciona para casi todos los casos, aunque es posible que haya uno u otro script que se resista y ese sí tendremos que alojarlo en un servicio independiente.

Para alojar los scripts en la plantilla hay dos formas, una es entrando a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
...contenido del script...
//]]>
</script>

Habremos de agregar donde se indica el contenido del script.
¿Cómo sacar el contenido del script?
Pega la URL del script en la barra de direcciones de tu navegador, si abre una página llena de códigos ese es el contenido del script; si en su lugar descarga un archivo con extensión .js entonces abre el archivo con WordPad y copia y contenido del script.

La otra opción es entrar en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pegar en un sólo elemento el contenido de todos los scripts que quieras. Se haría casi de la misma forma:

<script type='text/javascript'>
...contenido del script...
</script>

Con cualquiera de estas dos formas tendremos los scripts alojados en nuestra propia plantilla con lo que dejaremos de depender de otros servicios y nos ahorraremos algo de tiempo en la carga de la página al no depender del ancho de banda de los demás.

Carrusel de imágenes con JQuery y ThickBox

Quizá este el es carrusel de imágenes más popular hecho con JQuery, aunque en la mayoría de sus versiones las imágenes del carrusel no se abren, sólo se usan como un muestrario de thumbnails.

Pero eso no significa que no se pueda arreglar, pues se puede añadir una ventana modal con ThickBox para poder visualizar las imágenes.

Puedes ver un ejemplo en este blog de pruebas.

Ponerlo en tu blog no requiere muchos pasos pero sí son varios scripts y hojas de estilos que podrían alentar la carga de la página, es por eso que se recomienda que se alojen todos los archivos en tu propio servidor para evitar problemas.

Primero entramos en Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>


<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.css' rel='stylesheet' type='text/css'/>

Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript pegamos este código:

<center><ul id="mycarousel" class="jcarousel-skin-tango">

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

</ul></center>

Cambia la URL de la imagen donde se indica, va dos veces en cada pedazo de código, pues una es la miniatura y otra es la imagen en tamaño grande cuando se abre.

Si quisieras agregar más imágenes sólo pega antes de </ul></center> un pedazo de código como este:

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

Lo que está marcado en verde son los scripts y hojas de estilos que recomiendo que subas a tu hosting.
Descargar archivos

Descripción del blog con frases al azar

Al igual que hicimos para poner frases aleatorias en el blog podemos hacer que la descripción del blog muestre distintas descripciones o frases cada vez que alguien entra a la página. El único requisito es que no tengas una imagen en lugar del título y descripción del blog.

El procedimiento es muy corto, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:description/>

Elimínala y en su lugar pon esto:

<script language='Javascript'>
//<![CDATA[
<!--

function text() {
};
text = new text();
number = 0;
// textArray
text[number++] = "Descripción #1"
text[number++] = "Descripción #2"
text[number++] = "Descripción #3"
text[number++] = "Descripción #4"

increment = Math.floor(Math.random() * number);
document.write(text[increment]);
//-->
//]]>
</script>

Cambia donde se indica las distintas descripciones que quieres para el blog, puedes agregar más si gustas, sólo añade una línea como esta debajo de //textArray:

text[number++] = "Descripción"

Puedes ver un ejemplo en este blog de pruebas. Presiona F5 para recargar la página y ver la siguiente descripción.

Cambiar imagen de fondo del blog a elección del lector

En la entrada anterior vimos cómo cambiar el color de fondo del blog a elección del lector, esto es que haciendo click sobre un color, el color de fondo cambia.
Haciendo unas pequeñas modificaciones al código podemos utilizarlo también para que el fondo del blog sea cambiado por una imagen u otra.
Este es un ejemplo:

Como ves ayuda a la interacción del lector con el blog, pero sobre todo es útil para blogs de diseño los cuales tienen descargas de patterns, de esta forma el lector puede probar el pattern antes de descargarlo.
Puede ponerse directo en una entrada (en el caso de los blogs de diseño) o bien en un elemento HTML/Javascript, sólo hay que pegar lo siguiente:

<div style="text-align:center;">¿No te gusta el fondo del blog?
¡Cámbialo por otro!</div><br />

<center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1JuFysnI/AAAAAAAAAKM/AJ1kNfl4Q44/s400/orange.png)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://4.bp.blogspot.com/_dsEG33PDaHw/S4A2tyL2oXI/AAAAAAAAAK0/9NsvM2bvs-Y/s200/body-orange.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_dsEG33PDaHw/S4A1JXwtxKI/AAAAAAAAAKE/q7F2plFK8x0/s400/luxury-lining.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://2.bp.blogspot.com/_dsEG33PDaHw/S4A2ttOlZCI/AAAAAAAAAKs/UVjrJY9cDC0/s200/body-luxury.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1I3gppfI/AAAAAAAAAJ8/KYfkRAls_uY/s400/intertwined.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://2.bp.blogspot.com/_dsEG33PDaHw/S4A2tQlatBI/AAAAAAAAAKk/-hYbABUFnEY/s200/body-intertwined.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_dsEG33PDaHw/S4A1H6Sf-7I/AAAAAAAAAJs/XjvJh0mpU5o/s1600/dead-revolutionaries.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/S4A2s33LNFI/AAAAAAAAAKU/zy1HfovQTDQ/s200/body-deadrevo.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1ImdyDNI/AAAAAAAAAJ0/6JX_-bspT98/s400/horton.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/S4A2tLdeyTI/AAAAAAAAAKc/A73MVxDHcUo/s200/body-horton.jpg" /></a>
</center>

Puedes agregar más imágenes de fondo o cambiar los de este ejemplo, sólo remplaza la URL de la imagen (está dos veces) por la tuya.
En caso de querer agregar más imágenes agrega al código esta parte:

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL de la imagen)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL de la imagen" /></a>

La URL de la imagen se pone dos veces donde se indica, la primera es la que se aplicará como fondo y la segunda es la de ejemplo para que el lector haga click.

Cambiar color de fondo del blog a opción del lector

Al igual que hemos visto cómo cambiar el tamaño de la letra del blog a elección del lector también podemos darle la opción de cambiar el color de fondo por el que él quiera.

Esto no es por otra cosa más que por hacer más interactivo el blog y que el lector no sólo pueda leer el contenido sino que pueda jugar con la apariencia del blog.

La forma de hacerlo es a través de una función Javascript que hará que con un click el color de fondo del blog (body) cambie, y funciona aun si tienes de fondo una imagen.

Puedes verlo funcionando haciendo click en cualquiera de los colores.

Para poner esta opción en tu blog entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript, y ahí pega esto:

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>

Si no te gusta con las imágenes de colores también puedes ponerlo como simple texto:

Rojo | Amarillo | Verde | Azul | Morado | Rosa | Negro | Blanco

En ese caso el código a pegar es este:

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Rojo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarillo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Morado</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Negro</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Blanco</a>
</center>

Puedes cambiar los colores por los que gustes, o agregar más colores, sólo debes agregar otra línea como esta por cada color que quieres agregar:

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Color</a>

Sólo cambia lo que está en color rojo por el código del color que quieres y pon el nombre del color donde se indica.

Lo mismo puedes hacer para cambiar los colores de los anteriores, sólo localiza el código del color, cámbialo y listo.

Yahoo! Media Player: Reproductor de MP3

Hay muchos reproductores en flash para MP3 pero pocos suelen ser tan llamativos y originales como el reproductor de MP3 de Yahoo! Media Player.

Es un reproductor el cual permanece "escondido" y al hacer click sobre el enlace de una canción aparece en la parte de abajo con los controles del reproductor.

Pueden ver un ejemplo haciendo click en cualquier a de estas canciones:

Peroxide swing
Fever
That's how it goes

Instalarlo en tu blog es una de las grandes ventajas ya que es de lo más sencillo en cuanto a reproductores de música.
Sólo tienes que entrar en Diseño > Edición de HTML y antes de </head> pegar lo siguiente:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Ahora en una entrada o en un elemento HTML/Javascript pega esta línea por cada canción que quieras agregar al reproductor:

<a href="URL_de_la_cancion.mp3">Nombre de la canción</a>

Cambia la URL de tu archivo MP3 donde se indica al igual que el nombre de la canción. ¡Y listo! Automáticamente aparecerá junto al nombre de la canción un ícono de Play que indicará que es una canción.

Personalzación

Caratula del álbum

Si deseas que tus canciones también muestren la caratula del álbum entonces el código que deberás usar será este:

<a href="URL_de_la_cancion.mp3"><img src="URL de la imagen" style="display:none" />Nombre de la canción</a>

La imagen deberá ser cuadrada y no rectangular.

Eliminar logotipo de Yahoo! y leyenda learn more about this player
Por defecto el reproductor tiene el logotipo de Yahoo! y una leyenda con un enlace que dice: learn more about this player

Para eliminarlo entra en Diseño > Edición de HTML y antes de ]]></b:skin> lo siguiente:

#ymp-yahoo-logo, #ymp-relevance {visibility: hidden;}
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base { width:560px !important; }

Cambiar el color del reproductor


El color original del reproductor es gris pero también puedes cambiarlo por el color que quieras, sólo agrega antes de ]]></b:skin> lo siguiente:

#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
background-color:#2F437C !important;}

Cambia donde se indica el código del color que más te guste.

Cambiar el color de las letras del reproductor

Las letras del reproductor son un gris oscuro, pero si cambias el color del reproductor seguro podrás tener problemas para leer las letras, así que también puedes cambiarlo, sólo pega antes de ]]></b:skin> lo siguiente:

#ymp-player .ymp-color-text-main {
color:#000000 !important;}

Igualmente puedes elegir el color que prefieras.

Cambiar el color de la lista de reproducción
Igual que en el anterior quizá necesites cambiar el color de la lista de reproducción, para ello pega antes de ]]></b:skin> lo siguiente:

#ymp-tray .ymp-tray-track {
color:#FFCE0C !important; /* Color para los títulos */
}
#ymp-tray .ymp-tray-track:hover {
color:#FFFFFF !important; /* Color del título al pasar el cursor */
background-color:transparent !important;
}
#ymp-tray .ymp-tray-track.playing,
#ymp-tray .ymp-tray-track.playing:hover {
color:#FFFFFF !important; /* Color del título de la canción en reproducción */
background-color:#777777 !important;
}

Actualización: 19/02/2010
Eliminar la información sobre el hosting donde están alojados los archivos

Gracias a Vku que me pasó este dato acerca de cómo eliminar la dirección donde están alojados los archivos.
De igual modo hay que agregar antes de ]]></b:skin> lo siguiente:

#ymp-meta-album-title{display:none!important;}

Eliminar enlace de Yahoo! Search que aparece sobre el título de la canción

Cuando pasamos el cursor sobre el título de la canción vemos que aparece un enlace, este enlace nos lleva a la búsqueda de Yahoo! para encontrar la canción en cuestión.
Para eliminar este enlace buscamos antes de </head> el script que habíamos pegado anteriormente, o sea, este:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Justo debajo de él pegamos lo siguiente:

<script type="text/javascript">
//<![CDATA[
// Disable Yahoo! search links
var apiReadyHandler = function (){
/* Once API ready handler is invoked, YAHOO.MediaPlayer class can be accessed safely */
/* For example: Add other event listeners **/
YAHOO.MediaPlayer.onMediaUpdate.subscribe(DisableTitleSearch);
YAHOO.MediaPlayer.onTrackStart.subscribe(DisableTitleSearch);
};

var DisableTitleSearch = function() {
var track_title = document.getElementById('ymp-meta-track-title');
var artist_title = document.getElementById('ymp-meta-artist-title');
if(track_title && artist_title){
track_title.href = artist_title.href = 'javascript:void(0)';
track_title.onclick = artist_title.onclick = function(){ return false; };
}
};

YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
//]]>
</script>

Eliminar la caratula del álbum
Para que la caratula del álbum no se vea pega antes de ]]></b:skin> lo siguiente:

#ymp-meta-image { display:none !important; }
#ymp-body #ymp-meta-top,
#ymp-body #ymp-meta-bottom {
left:8px !important;
width:330px !important;
}

Cambiar la caratula del álbum por default
Cuando no ponemos una caratula a una canción aparecerá una imagen de una bocina. Podemos cambiar esta imagen de la bocina por cualquier otra, sólo pega debajo de la línea del script, es decir, debajo de esta línea:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Lo siguiente:

<script type="text/javascript">
var YMPParams =
{
defaultalbumart:'URL de la imagen'
}
</script>

Ahí agrega la URL de la imagen de la caratula donde se indica.

Como ves las ventajas de este reproductor son muchas, sobre todo por la forma tan simple de agregar canciones al reproductor.

La desventaja es que para crear distintas listas de reproducción es necesario saber crear archivos .XSPF que son listas de reproducción para reproductores en flash.

Enlace | Yahoo! Media Player

Ocultar la Sidebar en las Páginas estáticas

Ya hemos visto cómo personalizar el gadget de las Páginas y cómo mostrar las Páginas de forma diferente, pero me preguntan si se puede ocultar la sidebar cuando se está en las Páginas.

Sí se puede, y se realiza usando la misma condicional que usamos para mostrar las Páginas de forma distinta.

Puedes ver un ejemplo en este blog de pruebas, verás que al hacer click sobre una Página la sidebar desaparece y el contenido de la Página ocupa todo el ancho del blog.

ACLARACIÓN: Los elementos mencionados a continuación son los que usan la mayoría de las plantillas originales de Blogger, en otras plantillas posiblemente encontrarás los elementos con el mismo nombre, de lo contrario deberás localizar en tu plantilla cuál es el nombre que corresponde.

Lo único que necesitamos es saber cuánto mide el outer-wrapper de tu blog; en la plantilla Mínima dice esto:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

En este caso el outer-wrapper mide 660px.
Entonces lo que haremos será entrar en Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

Como ven sólo hemos usado una condicional la cual indica que cuando se trate de una Página entonces el contenedor de la sidebar medirá 0px de ancho, o sea nada, y además el contenedor del área de las entradas medirá el total del ancho del blog, en este caso 660px.

Como mencioné antes, los nombres de los contenedores pueden variar según la plantilla, sólo deberán localizar cuál es el nombre del contendor de la sidebar (sidebar-wrapper), el área de las entradas (main-wrapper) y el ancho total del blog (outer-wrapper).

Por supuesto este hack también se puede combinar con el de

mostrar las Páginas de forma diferente, sólo habría que agregar los estilos correspondientes dentro de este código, con lo cual quedaría así de forma completa:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
}
#main-wrapper {
width: 660px;
}
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Como ven, la primera parte contiene la indicación sobre ocultar la sidebar dentro de las Páginas y la segunda parte contiene los estilos para las Páginas.

De esta forma sencilla hemos podido ocultar la sidebar en las Páginas estáticas con la posibilidad de mostrar las Páginas de forma diferente.

Imágenes en tamaño real

A veces cuando subimos una imagen desde Blogger batallamos porque queremos la imagen más grande, en tamaño real, pero resulta que la medida más grande que nos aparece es de 400px de ancho.

Lo mismo sucede cuando queremos usar imágenes para la plantilla, si pegamos la URL de la imagen que nos da Blogger simplemente no se ve.

Primero veamos que cuando subimos una imagen Blogger nos da tres opciones de tamaño: Pequeñas, Medio y Grandes.

Las pequeñas tienen un ancho máximo de 200px; las medianas 320px; y las grandes 400px de ancho.

Tamaño chico (200px)

Tamaño mediano (320px)

Tamaño grande (400px)

Cualquiera que sea el caso Blogger nos arrojará un código dividido en dos partes, el primero es el que contiene la URL de la imagen en su tamaño original (cualquiera que sea la medida), y la segunda es el código de cómo se muestra la imagen dentro de la entrada.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 193px;" src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s320/Desierto.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5437914528676382722" /></a>

Si nos fijamos veremos que en el segundo código vienen las especificaciones del tamaño, estas se encuentran en width y height.
Ambos códigos contienen dos URLs, una tiene la URL de la imagen en tamaño original y la otra es una URL del tamaño pequeño.
Pero lo que nos interesa es tener la imagen en tamaño real, o sea la URL que se encuentra en el primer código:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png

El problema es que si usamos esta URL tal como está no funciona, ya que está habilitada para que sólo funcione para abrirse en una ventana nueva. Pero aquí viene el truco; sólo basta eliminar el guión y la letra H que se encuentra después de s1600, con lo cual quedaría así:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png

De esta forma la imagen se mostrará en su tamaño original.

Tamaño real

Por lo tanto el código de una imagen en tamaño real sería así:

<img src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png" />

Así que tomamos la primera URL y eliminamos el -h que se encuentra después de /s1600 y tendremos la imagen en tamaño real dentro de las entradas o en la plantilla.

Ten en cuenta que la imagen que vaya dentro de tus entradas deben medir menos del ancho asignado para tus entradas (main-wrapper) de lo contrario la imagen se cortará y no se mostrará por completo.

Mostrar las Páginas estáticas de forma diferente

Revisando el código de las páginas estáticas de Blogger vi que éstas usan una nueva condicional:

<b:if cond='data:blog.pageType == "static_page"'>

Esto es que, permite condicionar acciones determinadas cuando se trata de páginas estáticas (ya debería empezarle a llamar sólo Páginas y no "páginas estáticas") que apliquen sólo a ellas y no al resto de las entradas.

Si bien hemos visto como mostrar el primer post de forma distinta, también podemos hacer algo similar para las páginas estáticas (¿lo ven? no puedo). Es decir, que todas las entradas se vean como normalmente se ven, pero cuando se trate de una Página (¡ahora sí pude!) se muestre de forma diferente, puede ser un color de fondo diferente, otro tipo de letra, bordes, etc.

Puedes ver un ejemplo en este blog de pruebas, verás que la entrada se muestra "normal", haz click sobre el enlace hacia una Página y verás que se muestra diferente.

Implementarlo es muy simple, sólo es cuestión de usar la condicional de las Páginas y agregar los estilos que se aplicarán sólo a ellas.

Para hacerlo entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Para personalizarlo sólo cambia los estilos donde se indica, puedes agregar o quitar los estilos que quieras.
De esta forma tus Páginas tendrán un aspecto diferente que harán que resalten y se diferencien de las entradas comunes.

Abrir todos los enlaces en otra ventana

Ya hemos visto cómo abrir los enlaces en otra ventana usando el atributo target='_blank' que se aplica directo en el enlace que se desea que se abra aparte.

Pero muchos preguntan si se puede usar un código que abra TODOS los enlaces en otra ventana, sobre todo quienes tienen muchas entradas y es un poco cansado editar enlace por enlace.

Podemos hacer que de forma automática los vínculos se abran en otra pestaña y para ello vamos a ver dos formas, una es forzar todos los enlaces a que se abran aparte y otra es dando la opción al usuario que él decida si se abren en otra ventana o en la misma.

Forzar todos los enlaces
El primero es de lo más sencillo, sólo hay que entrar a Diseño > Edición de HTML y pegar después de <head> lo siguiente:

<base target='_blank'/>

Con ese simple atributo todos los enlaces sin excepción, se abrirán aparte.

A opción del usuario

Esta otra opción es un script de Joen que permite dos cosas; una es que el usuario decida a través de una casilla (checkbox) si todos los enlaces se abren en una ventana nueva y otra que tú puedes elegir poner dos excepciones dentro del script, es decir, puedes elegir que todos los enlaces que no pertenezcan a tu blog se abran aparte o bien, que todos los enlaces incluyendo el tuyo se abran aparte.

Sólo hay que entrar en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pegar lo siguiente:

<div class="linkprefs">
<p style="display: block;"><input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById(&#39;linkprefs&#39;).checked);" type="checkbox" />
<label for="linkprefs">Abrir los enlaces en otra ventana</label></p><span></span>
<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>
</div>


<script type='text/javascript'>
<!--
/*
Link Target Preferences v.1.1
http://www.noscope.com/journal/2004/10/link-target-preferences
*/

// Estas URLs seran consideradas internas y se ignoraran
var url_1 = "http://tublog.blogspot.com";
var url_2 = "http://tuotroblog.blogspot.com";

// El valor "true" abre los enlaces en nueva ventana por defecto, "false" los abre en la misma
var open_blank_default = true;

// Titulo Blog - se usa solo para no crear interfencian con las cookies
// No espacios, ni caracteres especiales

var site_title = "elnombredetublog";
// FIN configuracion

// Cookie Functions
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
// Checkbox Loader
function loadLinkPrefs () {
if (readCookie(site_title+"_linkprefs_cookie")) {
initVal = readCookie(site_title+"_linkprefs_cookie"); // Load cookied preference
} else {
createCookie(site_title+"_linkprefs_cookie", true, 20000)
initVal = open_blank_default; // If no cookie is set
}
openBlank = initVal;
setCheckbox(eval(initVal))
}
// Set Checkbox State
function setCheckbox(state) {
openBlank = state;
document.getElementById('linkprefs').checked = state;
setTargets();
createCookie(site_title+"_linkprefs_cookie", state, 20000)
}
// Configure Link Targets
function setTargets() {
var link, l = 0;
if (openBlank == true) {
while (link = document.links[l++]) {
// Open in _blank, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank';
}
} else {
while (link = document.links[l++]) {
// Open in _top, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top';
}
}
}
// Event Listener, by Scott Andrew
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
}
//-->
</script>

Si quieres que los enlaces de tu blog (internos) no se abran aparte entonces cambia la URL que está en rojo por la de tu blog, puedes poner dos blogs. Todos los enlaces que dirijan a una parte de esas páginas NO se abrirán en otra ventana. Igual deberás poner donde se indica el nombre de tu blog sin espacios ni caracteres especiales.

En caso de que quieras que todos los enlaces, incluso los de tu blog se abran en una ventana nueva entonces cambia esas direcciones por cualquier otra, incluso puedes dejarlo tal y como está ahora.
Aquí lo interesante es que marcando la casilla el usuario decidirá que se abran los enlaces en otra ventana, si los quiere ahí mismo dejará la casilla en blanco.

Ambas opciones son bastante útiles, elige la que creas más apropiada para tu blog. En cualquiera de las dos podrás hacer que todos los links, incluyendo los de las imágenes se puedan abrir en otra pestaña o ventana sin necesidad de editar cada enlace.

Personalizar el gadget de Páginas estáticas

Desde hace unos días Blogger ya hizo oficial la opción de crear páginas estáticas en Blogger. Esto es que podemos crear páginas que no se mostrarán junto con las entradas sino que se podrán ver sólo cuando se dé click al enlace de dicha página; así que ya podemos prescindir del hack de ocultar entradas.

Crear una página es muy sencillo, sólo entra en Creación de entradas > Editar páginas y haz click en Página nueva.

Redacta el contenido y publícala.

¿Cómo podemos ver el contenido de estas páginas?

Blogger nos da tres opciones, una es usando una lista de enlaces en la sidebar; otra es usando un menú debajo de la cabecera con los enlaces a tus páginas; y la última es sin gadget, sólo nos da la URL de la página para agregarla donde tú elijas.

Quienes hayan escogido la primera o segunda opción verán que el menú de las páginas es extremadamente sencillo y sin chiste.

Pero podemos personalizarlo para darle "otra cara" y hacer que parezca menú y no una simple lista de enlaces.

Para hacerlo sólo hay que agregar unos estilos en la plantilla, los estilos son los mismos que usaríamos para un menú simple, ya que el gadget de Páginas que nos da Blogger no es otra cosa mas que una lista de enlaces.

Para personalizar este gadget entra en Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

/* Menú de páginas
----------------------------------------------- */
#PageList1 {
width: 100%;
border: 1px solid #625e00; /* Color del borde del menú */
background-color: #E0ECF8; /* Color de fondo */
}
#PageList1 ul li a {
color: #000; /* Color de los enlaces */
text-decoration: none;
font-weight: bold;
padding-right: 20px;
background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/S3GaMp5QZEI/AAAAAAAAAIg/sQHkDct7T44/s320/vertical.gif) center right no-repeat;
}
#PageList1 ul li a:hover {
color: #ccc; /* Color del texto al pasar el mouse */
position: relative;
left: 1px;
top: 1px;
}

El resultado será este.

He puesto en color verde las anotaciones para que lo personalicen a su gusto. Por supuesto pueden agregar más, como una imagen de fondo, otro tipo de letras, etc.

Sé que mucho pensarán -¿de qué me sirve ese menú si no puedo tener otros enlaces que no sean páginas estáticas?
Pues adicionalmente a lo que acabamos de hacer también podemos editar el gadget para mostrar otros enlaces que no sean las páginas estáticas.

Para hacerlo hay que entrar a Diseño > Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar el código del gadget que es este:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<li><a href='http://URL del enlace'>Título del enlace</a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agrega lo que está en color rojo por cada enlace que quieras poner en el gadget. Y pon donde se indica la URL del enlace y el título del enlace.

Lamentablemente los enlaces que agreguemos se acomodarán al inicio del gadget (después del enlace Página principal) pero los enlaces de las páginas estáticas sí podemos cambiarlas de orden.
Para hacerlo entra en Diseño > Elementos de la página y haz click en Editar sobre el elemento Páginas.
Ahí verás en un recuadro los títulos de tus páginas, sólo arrastralos para cambiarlos de lugar.


Esta característica de las páginas es nueva, así que hay que atenernos al "humor" de Blogger ante cualquier cambio. Por mi parte las he probado y puedo decir que aceptan los scripts como el del sitemap y que no se indexan, así que no aparecerán en el feed del blog.

Poner separadores entre las entradas

Los separadores entre posts (dividers) hacen que se delimite el área visual entre cada post lo cual lo hace más presentable y organizado.



Poner el separador es de lo más sencillo, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include data='post' name='post'/>

Justo debajo de ella pega lo siguiente:

<center><img src='URL de la imagen'/></center>

Sólo cambia lo que está en rojo por la URL de la imagen de tu separador. Así se simple tendrás un separador de entradas en tu blog.

En Smashing Magazine tienen más de 100 separadores que ponen a tu disposición de muchos diseñadores y que son de uso libre. Puedes escoger el que más te guste y guardarlo o puedes descargar el pack con todos los diseños de los separadores.

Si no te convencen las imágenes y te gustan los diseños más simples puedes optar por poner una línea de color; para ello puedes usar el atributo <hr /> al cual se le pueden agregar estilos para hacerlos más llamativos.
Si te decides por esta forma entonces el código que deberás pegar será este:

---

<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" />

En background:#000000; puedes modificar el código del color que prefieras, en height:5px; la altura de la línea (en pixeles) y en width:60%; el ancho de la línea (en porcentaje).
Estos son algunos ejemplos de los separadores con distintos colores:

---

<hr style="align:center; background:#0080FF; border:0px; height:5px; width:60%;" />

---

<hr style="align:center; background:#FF0080; border:0px; height:5px; width:60%;" />

---

<hr style="align:center; background:#FFFF00; border:0px; height:5px; width:60%;" />

Cursores para el Día de San Valentín

Seguimos con la decoración del blog con motivo del día del amor, así que vamos a ver cómo poner un cursor alusivo a esta celebración. El procedimiento es muy sencillo, es tomado de la entrada cómo cambiar el cursor del blog, así que siguiendo el mismo método busqué unos cursores de totallyfreecursors.com para que ustedes sólo los peguen en su blog y los disfruten.

Para cambiar el cursor por uno de estos del día de los enamorados sólo copia el código del cursor que quieras, entra en Diseño > Edición de HTML y pegalo antes de </body>

<style>HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/cursor_files/cupid.cur&quot;), url(&quot;http://downloads.totallyfreecursors.com/thumbnails/cupid.gif&quot;), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/heart1.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/heart1.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/heartbeat2.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/heart-beat2.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/heartarrow.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/heart-arrow.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/lips2.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/lips2.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/happyvalentineday.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/happyvalentineday.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/love3.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/love3.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/love.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/love.gif"), auto;}</style>

Corazones cayendo en la página

Ya se acerca el 14 de febrero y en muchos países se celebra el día del amor, a los enamorados y la amistad. Así que podemos darle algo de inspiración al blog para que se sienta que el amor está en el aire.
Recordé que había un script de Eloi Gallés Villaplana que tenía otros fines pero que podía modificar para crear este efecto de corazones volando en la página.

Puedes ver un ejemplo en este blog de pruebas.

Implementarlo en tu blog es de lo más sencillo, sólo copia el contenido de este archivo y entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pégalo ahí.

Así de simple verás corazones que caen en tu página inundando el ambiente de romance...

Mostrar Adsense en los feeds

Me pregunta Hugo sobre la cuestión de los anuncios publicitarios dentro de los feeds, y bien, Adsense no sólo permite mostrar anuncios dentro de la página Web, sino que también puedes mostrar anuncios de Adsense en el feed, ya sea en la página directa del feed, en el gestor de feeds del usuario o en el correo electrónico*.

Esta característica ya debe estar habilitada para todos los países, o al menos AdSense así lo asegura.

Si estás suscrito al feed de Ciudad Blogger podrás ver los anuncios en cada entrada.

Hay dos maneras de configurárlo, una es en la página de Adsense y otra desde Blogger, en ambos casos hay que contar con una cuenta de Adsense y tener nuestro feed en Feedburner.

Configurando desde Adsense

1. Ingresa dentro de tu cuenta de AdSense a Configuración de Adsense
2. Haz click en AdSense para sindicación.



3. A continuación configura el tipo de anuncios que se mostrarán.
4. Abajo verás la lista de feeds que tienes en Feedburner (uno por cada blog)
5. Haz click en añadir sobre el feed al que deseas ponerle anuncios.
6. Guarda los cambios y listo.

Configurando desde Blogger

1. Entra a tu cuenta de Blogger y haz click en Monetizar.



2. Luego haz click en AdSense para feeds



3. Selecciona las opciones del anuncio.
4. Guarda los cambios y listo.

En ambos casos se debe esperar hasta 10 minutos para que los anuncios aparezcan o bien, para que se vean reflejados los cambios efectuados. El tamaño de los anuncios se determina automáticamente en función del contenido y del dispositivo en el que se vea el feed.

Puedes ver más información sobre Adsense para feeds en la página de ayuda de AdSense.

Cualquiera de las dos formas que uses será una buena opción para incrementar tus ganancias y ganar dinero en Internet, sobre todo si el número de suscriptores que tienes es alto.

*En clientes de correo electrónico como Windows Live Mail es posible que los anuncios no se muestren.

Cartel de bienvenida tipo neón

Ya tenía rato que no les mostraba estos mensajes de bienvenida que sé que a muchos les gusta, así que les muestro este cartel de bienvenida tipo anuncio de neón que me encontré y que pertenece a G.P.F.

Se trata de un mensaje de bienvenida en el cual una luz de color recorre cada letra dando la apariencia de que se trata de una anuncio luminoso de neón.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este cartel en tu blog sólo entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:

<div style="background:#000; font-size:30px; text-transform: uppercase; font-weight: bolder;"><script language="JavaScript1.2">

//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de

var message="Bienvenidos a Ciudad Blogger"
var neonbasecolor="gray" //color de la letra
var neontextcolor="yellow" //color de la luz neon
var neontextcolor2="#FFFFA8" //color del reflejo
var flashspeed=100 // velocidad en milisegundos
var flashingletters=3 // numero de letras alumbradas en neon
var flashingletters2=1 // numero de letras alumbradas con el reflejo (0 to disable)
var flashpause=0 // pausa entre cada repeticion en milisegundos

///No editar nada mas///

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor


if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></div>

Cambia lo que está en color rojo por tu mensaje de bienvenida. En las antaciones de color verde puedes ver unas variables que se pueden configurar como color del neón, velocidad, etc.
Al inicio del código en color azul podrás cambiar el color de fondo y tamaño de la letra; también puedes agregarle otros estilos si así lo deseas.

Si no sabes cómo poner un gadget debajo de la cabecera haz click en el enlace anterior.

Abrir enlace del gadget de Imagen en ventana nueva

Hay dos formas de poner una imagen en la sidebar, una es con el gadget HTML/Javascript en el cual debemos poner el código de la imagen, y adicionalmente podemos agregarle estilos. Y otra es usando el gadget de Imagen, en el cual cargamos la imagen desde nuestro equipo o entregando una URL; y además podemos ponerle un pié de imagen y un enlace que dirija a otro sitio Web.

Hasta ahí todo está bien, el problema viene cuando usamos el gadget de Imagen y queremos que el enlace abra en una ventana nueva, ya que por defecto el enlace agregado a esta imagen se abre en la misma ventana y como dice mi querida amiga María Rosa, obliga al usuario a abandonar nuestro blog y eso no nos conviene.

Pero esto tiene solución, y es usando el mismo método que usamos para abrir la Lista de links en una ventana aparte, es decir, editaremos el gadget directo en la plantilla y agregaremos el atributo target='_blank'

Cuando quieras que una imagen que hayas subido con este gadget abra el enlace en una ventana nueva entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca el código del gadget de la imagen (puedes guiarte por el nombre del gadget que le has asignado).
El código completo del gadget es así:

<b:widget id='Image1' locked='false' title='Imagen' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link' target='_blank'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Sólo agrega lo que está en color rojo y listo, el vínculo que le hayas puesto a esa imagen abrirá en una ventana aparte, con lo que evitaremos que el lector abandone nuestra página.

NOTA: Recuerda dejar un espacio en blanco antes de poner el atributo target='_blank'

Texto que sigue al cursor en forma giratoria

Ya hemos visto dos formas de poner un texto que sigue al cursor pero este en especial me gusta mucho por el efecto que tiene.

Se trata de un script de Tim Tilton que hace que el texto persiga al cursor pero en forma giratoria; cuando el cursor se mueve el texto lo sigue en forma ondulante y al detenerse gira alrededor del cursor. Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo basta entrar en Diseño > Edición de HTML y antes de </head> pegar lo siguiente:

<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */

/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Mensaje
var msg = "Bienvenido a Ciudad Blogger";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.4;

// Velocidad de reaccion
var speed = 0.3;

////////////////////// No editar nada mas //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Cambia lo que está en color rojo por el mensaje que quieres mostrar. Puedes modificar el tamaño del texto, tipo de letra, color, velocidad, etc. He traducido al español las anotaciones (color verde) para que puedas personalizarlo a tu gusto, sólo localiza el área correspondiente para hacer el cambio.

Recuerda que para que este tipo de "monerías" funcionen no debes tener muchos scripts en tu página, sino es posible que alguno deje de funcionar.