Cambiar la imagen "Cargando" en las Vistas Din?micas

Es cierto que las plantillas de Vistas Din?micas lucen modernas, pero a muchos no les agrada la idea de tener la marca de Blogger por todas partes. Cada vez que se carga el blog (con estas plantillas) aparece el ?cono de "cargando" con la imagen de Blogger:

Me preguntaba Bairo si era posible cambiar esa imagen por otra o bien no mostrar ninguna.
La respuesta es s? y s?. Ambas cosas se pueden hacer.

Puedes verlo en este blog de pruebas, al cargar la p?gina en lugar de que aparezca la imagen tradicional de Blogger con los engranes, aparecer? un ?cono distinto:



Si usas la antigua interfaz entra en Dise?o | Dise?ador de plantillas | Avanzado | A?adir CSS.
Y si usas la nueva interfaz entra en Plantilla | Personalizar | Avanzado | A?adir CSS

Si no quieres que aparezca ning?n icono agrega lo siguiente:

.blogger-gear {background-image:none !important;}

Guarda los cambios y listo. Con eso no aparecer? nada mientras cargue el blog.
Pero si quieres que en lugar del ?cono tradicional aparezca otro personalizado entonces agrega lo siguiente:

.blogger-gear {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZGo5CYPeA3P_cTiAOtSF9fBSmthNSjSOdH_i1PgWvVghErKShhrUvQ4DOyoB1c7pb92vTKqg7OEwqhVFBa6Q29qtmxkTr4KurmsvErPOjjme9Ou-ITth6QcJY2CWE6tsS85C8xKGvxU/s0/cargando.gif);
width:128px; /* Ancho de la imagen */
height:128px; /* Alto de la imagen */
}

Si quieres cambiar la imagen por otra, cambia la URL que est? en color azul.

En las anotaciones en color verde se indica el tama?o destinado para la imagen, es importante que el tama?o de la imagen concuerde con las medidas que agregues ah?.

Es un peque?o cambio, pero seguro ser? apreciado por quienes son amantes de la personalizaci?n.

Facebook y las redirecciones por pa?s de Blogger bloqueadas por supuesto SPAM

Desde hace unos d?as algunos usuarios han reportado problemas al compartir las entradas en Facebook, aparece un mensaje que dice: "El contenido que intentas compartir incluye un enlace que fue bloqueado por ser spam o inseguro."

Salvo los casos de que un enlace de verdad haya sido reportado por considerarse SPAM, parece que el problema est? en las redirecciones de los dominios por pa?s que Blogger implement? hace alg?n tiempo, y aunque curiosamente no sucede con todas las extensiones, parece que al menos con la extensi?n .MX s? pasa esto, por qu�, qui�n sabe.

Pero si ese es el problema entonces la soluci?n es compartir las entradas con la URL can?nica, es decir, la que termina en .com nada m?s, o bien, usar un script que evite la redirecci?n, tal como Oloman ha explicado en esta entrada.

Puedes ver un ejemplo poniendo en pr?ctica lo siguiente, intenta compartir este enlace en Facebook:

http://nombre-de-mi-blog.blogspot.mx/2011/10/blog-post.html

Como ver?s, tiene la extensi?n .mx y al querer publicarlo aparece el mensaje de advertencia que dice que la URL ha sido bloqueda.

Pero si compartes el mismo enlace sin la extensi?n del pa?s entonces no ocurre lo mismo y se publica sin problema:

http://nombre-de-mi-blog.blogspot.com/2011/10/blog-post.html

As? que si ese fuera tu caso la soluci?n como dije es, al compartir las entradas quitar la extensi?n del pa?s, o mejor aun, usar un script que evite la redirecci?n.

Botones para compartir que se detienen y flotan al bajar la p?gina

Resulta cada vez es m?s importante que nuestras entradas sean valoradas y compartidas en las redes sociales, as? que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir vi�ndolos aun cuando baje el scroll de la p?gina.

Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la p?gina se quedar?n flotando en una posici?n fija.
Puedes ver aqu? mismo el resultado, baja el scroll de la p?gina, y los botones que est?n a continuaci?n se quedar?n flotando. Si vuelves a la parte de arriba entonces los botones regresar?n a su lugar.

• Twittear
• 
• 

Esta barra de botones la pondremos debajo del t?tulo de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bit?coras, y Pinterest.

Lo primero es entrar en Plantilla | Edici?n de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

Ahora antes de ]]></b:skin> pegamos los estilos de la barra:

#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}

Por ?ltimo, debajo de <div class='post-header'> agrega el siguiente c?digo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>

<!-- Botón de Facebook -->
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<!-- Botón de Bit?coras -->
<li><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>

<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>

Si quieres que los botones est�n al final de la entrada entonces el c?digo anterior p�galo antes o despu�s de <div class='post-footer'>

Ver?s que en el primer c?digo aparece en color verde el ancho de la barra, y tambi�n aparece en los estilos, si cambias el tama?o deber?s hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla m?s angosta, de lo contrario algunos botones se bajar?n. En caso de que decidas hacerla m?s angosta entonces quiz? sea necesario eliminar alg?n bot?n.

En el ?ltimo c?digo ver?s a cu?l bot?n corresponde cada c?digo, por si quisieras quitar alguno de ellos.

Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor m?s alto.
Los botones se ver?n ?nicamente al ingresar a las entradas individuales, de otra forma los botones se encimar?an unos con otros al bajar la p?gina.

Poner un link en el nombre del autor en las entradas

No todos usamos el gadget de perfil, as? que ponerle al nombre del autor un enlace a nuestro perfil puede servirnos para mostrar a nuestros lectores un poco m?s de informaci?n acerca de nosotros, incluso para que conozcan otros blogs que administramos. Pero adem?s, no tenemos que vernos obligados a poner el enlace a nuestro perfil de Blogger pues bien podemos poner la direcci?n de nuestro blog, de nuestra p?gina de Facebook, Twitter, o cualquier otra.

Si s?lo hay un autor en el blog entra en Plantilla | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca este c?digo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>

Sino lo encuentras tal como est? busca uno parecido (incluso es posible que lo tengas dos veces).
Cambia lo que est? en color rojo por esto:

<a href="URL del enlace"><data:post.author/></a>

Ah? pon la URL del enlace de tu perfil de Blogger, de Facebook, Twitter o de la p?gina que quieras. Si quieres que se abra en otra ventana agrega el atributo target="_blank"

Hasta ah? es todo para quienes tienen en su blog s?lo un autor, ?pero qu� pasa si el blog tiene dos o m?s autores? En ese caso la p?gina de soporte de Blogger nos da la respuesta, omitimos los pasos anteriores y buscamos este c?digo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>

Cambia lo que est? en color rojo por esto:

<script type="text/javascript"> makeprofilelink("<data:post.author/>"); </script>

Ahora pega antes de </head> el siguiente script:

<script type='text/javascript'>
//<![CDATA[
var team = new Array();
team["Nombre del primer autor"]="XXXXXXXXXXXXXXXXXX";
team["Nombre del segundo autor"]="XXXXXXXXXXXXXXXXXX";
team["Nombre del tercer autor"]="XXXXXXXXXXXXXXXXXX";

function makeprofilelink (authorname) {
var pid = team[authorname];
document.write("<a href="http://www.blogger.com/profile/"
+ pid + "">" + authorname + "</a>");
}
//]]>
</script>

Agrega donde se indica el nombre de cada autor del blog, ninguno de ellos deber? tener el mismo nombre/nick. Y en color azul coloca los n?meros que aparecen al final de la URL del perfil de cada autor, por ejemplo, esta es la URL de mi perfil:

http://www.blogger.com/profile/11069825386066411200

Esos n?meros que est?n al final son los que necesitamos poner.
Si tuvieras m?s autores agrega una l?nea como esta por cada autor extra:

team["Nombre de otro autor"]="XXXXXXXXXXXXXXXXXX";

Con eso cada autor tendr? un enlace a su perfil de Blogger, pero tambi�n podemos usar otra p?gina.
Por ejemplo, si quieres que enlace a la p?gina de Facebook de cada autor entonces cambia la URL que est? en color gris por:
http://www.facebook.com/

Y en las equis azules pon el nombre de usuario de Facebook del autor.
Si quisieras que enlace al perfil de Twitter entonces la URL ser? esta:
http://www.twitter.com/

Y nuevamente en color azul pondr?s el nombre de usuario de Twitter del autor.
De esa forma cada autor tendr? el enlace al perfil de la p?gina que hayas elegido.

C?mo crear listas de reproducci?n XML

Algunos reproductores de m?sica para el blog como el que vimos en la entrada anterior, tienen la posibilidad de usar listas de reproducci?n en formato XML, esto es para agregar varias canciones en un solo archivo sin tener que llenar el reproductor con tantas URLs.

El procedimiento es similar que cuando aprendimos a crear listas de reproducci?n ASX, es decir que desde un editor de texto crearemos nuestra lista que luego subiremos a la red.

Empecemos, primero abre un documento con Wordpad 
Ah? pega lo siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<location>URL de la canci?n</location>
<title>T?tulo de la canci?n</title>
<image>URL de la imagen de la portada</image>
</track>


<track>
<location>URL de la canci?n</location>
<title>T?tulo de la canci?n</title>
<image>URL de la imagen de la portada</image>
</track>


<track>
<location>URL de la canci?n</location>
<title>T?tulo de la canci?n</title>
<image>URL de la imagen de la portada</image>
</track>


</trackList>
</playlist>

Puedes agregar tantas canciones como quieras s?lo a?ade antes de </trackList> un trozo de c?digo como este:

<track>
<location>URL de la canci?n</location>
<title>T?tulo de la canci?n</title>
<image>URL de la imagen de la portada</image>
</track>

Ahora agrega donde se indica, la URL de la canci?n que debe ser en formato MP3. De igual forma agrega el t?tulo de la canci?n, y s?lo de forma opcional agrega la URL de la imagen de la portada del disco. Digo que es de forma opcional porque no todos los reproductores muestran la imagen de la canci?n, as? que si el reproductor donde lo usar?s no tiene la capacidad de mostrar dicha imagen entonces no es necesario ponerla, en ese caso elimina la l?nea:

<image>URL de la imagen de la portada</image>

Una vez que termines de a?adir todas las canciones, guarda el archivo en formato XML, es decir, que al momento de guardarlo pongas la extensi?n .XML seguidamente del nombre del archivo, por ejemplo: playlist.XML

Si lo prefieres, puedes descargar este archivo, es un archivo ya con la extensi?n XML y listo para agregar los datos de las canciones.

Una vez que tengas tu lista de reproducci?n en formato XML s?bela a un hosting, a partir de ese momento ya la puedes usar en alg?n reproductor de m?sica.

Supongamos que la usamos con el reproductor EMFF que vimos en la entrada anterior, en ese caso el c?digo ser?a de esta forma (recordando que la URL del archivo XML no debe tener el protocolo HTTPS, sino s?lo HTTP):

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="playlist=URL del archivo XML">
</object>

Y el resultado es este: