Yahoo! Web Player: Reproductor de MP3 y videos

Hace poco m?s de un a?o hab?amos visto el Yahoo! Media Player, un reproductor de mp3 bastante original que tiene como caracter?stica detectar cualquier enlace de mp3 y reproducirlo en su peculiar reproductor que se pliega y despliega abajo de la p?gina.

Desde el pasado 4 de agosto se actualiz? el reproductor, que por cierto ahora se llama Yahoo! webplayer, y el cual ahora tiene un aspecto m?s elegante, incorpora una barra de reproducci?n para situarnos en un punto espec?fico de la canci?n, muestra en un icono rojo el n?mero de canciones que hay en la lista de reproducci?n, y adem?s ahora puede reproducir videos incluyendo videos de YouTube, formatos MP4, WMV, etc.

Puedes ver el ejemplo de este reproductor de MP3 y videos haciendo click en alguno de estos links.

Canci?n (This is not a love song)
Video de YouTube (This boots are made for walking)

Para usar este reproductor descarga y descomprime este archivo. S?belo a un hosting y estando en la Edici?n HTML de tu plantilla pega antes de </head> lo siguiente

<script src='URL de tu archivo' type='text/javascript'/>

Ah? agrega la URL del archivo YahooPlayer.js que previamente subiste. Ahora, en tus entradas, o un elemento HTML/Javascript pega las URLs de las canciones o los videos de esta forma:

<a href="URL del archivo MP3 o Video">Nombre de la canci?n</a>

Y listo, de inmediato aparecer? el ?cono de play junto al enlace, indicador de que se puede reproducir en el reproductor.

Por defecto el reproductor a?ade una car?tula gris a todas las canciones, pero si quieres que tu canci?n tenga una car?tula espec?fica entonces el c?digo a utilizar ser?a este:

<a href="URL del archivo MP3 o Video"><img src="URL de la imagen" style="display:none" />Nombre de la canci?n</a>

Yahoo nos ofrece unas cuantas opciones de par?metros para personalizarlo, aunque no todos pueden ser muy ?tiles, quiz? lo m?s rescatables de ellos sean s?lo tres: el autoplay, el auto-avanzar, y la car?tula definida. Cualquier de ellos podemos usarlos agregando justo debajo del script que a?adimos antes de </head>, lo siguiente:

<script type='text/javascript'>
var YWPParams =
{
autoplay:false,
autoadvance:false,
defaultalbumart:&#39;URL de la imagen de la car?tula&#39;
};
</script>

autoplay, es el par?metro que ordena si se reproduce autom?ticamente o no, por defecto est? en false, para activarlo lo cambiamos por true
autoadvance, indica si una canci?n continua al terminar la anterior o no, true har? que continue y false lo contrario.
defaultalbumart, es la car?tula para todas las canciones, s?lo hay que agregar la URL de la imagen donde se indica.

Adem?s de esos par?metros podemos agregar un poco de CSS para modificar algunos aspectos del reproductor. S?lo hay que a?adir antes de ]]></b:skin> algunos de los estilos que quieras utilizar.

Eliminar el logotipo de Yahoo webplayer

El reproductor incluye un logotipo en la parte superior izquierda, para eliminarlo hay que agregar estos estilos:

.ywp-container .ywp-hdr .ywp-hdr-logo {display:none !important;}

No mostrar ninguna car?tula

Distinto al par?metro del reproductor, o a la imagen que agregamos directamente en el enlace, si quieres no mostrar ninguna car?tula entonces a?ade estos estilos:

.ywp-info .ywp-thumbnail-default-img, .ywp-info .ywp-thumbnail-img {display:none !important;}

Cambiar el color del reproductor

Aunque el color que trae por defecto es muy elegante, tambi�n puede cambiarse por otro color a?adiendo lo siguiente:

.ywp-player {background-image:none !important; background-color:#8A0886 !important;}

Cambiar el color de la lista de reproducci?n

Si has cambiado el color del reproductor seguro querr?s cambiar el color de fondo del ?rea de la lista de reproducci?n, este se cambia con estos estilos:

.ywp-media-content-audio .ywp-audio-pane, .ywp-tray ol.ywp-playlist {background-color:#F5A9F2 !important;}

Y para finalizar, tambi�n podemos hacer uso de las listas de reproducci?n, �stas podr?n reproducirse sin problema en este reproductor.

En los par?metros que nos ofrece Yahoo hay uno que es para controlar el volumen, pero lo he probado en varias ocasiones y no ha funcionado, de cualquier manera, si alguien quiere probarlo o ver la lista completa de los par?metros de reproductor pueden verlos en el sitio del reproductor.

Sitio | Yahoo! webplayer
Par?metros | How to set up

Men? vertical desplegable tipo acorde?n con jQuery

Hace alg?n tiempo vimos c?mo poner un men? vertical desplegable con jQuery, muy presentable, pero su dise?o est? enfocado m?s a mostrar contenido en vez de subpesta?as. Contrario al que veremos ahora, el cual es un men? vertical desplegable con efecto deslizante que s? tiene subpesta?as por lo que podremos agregar enlaces a cada secci?n del men?.

Tiene dos variantes, puede desplegarse al hacer click, o puede desplegarse al pasar el cursor sobre �l.

Funciona al hacer click

Funciona al pasar el cursor

Lo primero que haremos ser? insertar el script en la plantilla, para ello entra en Plantilla | Edici?n de HTML y antes de </head> agrega lo siguiente:

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

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> a?ade los estilos:

/* Men? vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del men? */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pesta?as principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}

Por ?ltimo entra en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pega la estructura del men?.
Si quieres el que se activa al hacer click pega este c?digo:

<div id="firstpane" class="menu_list">

<p class="menu_head">Pesta?a 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>


</div>

Si quieres el que se activa al pasar el cursor entonces pega este c?digo:

<div class="menu_list" id="secondpane">

<p class="menu_head">Pesta?a 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>


</div>

Ya s?lo cambia el nombre de las pesta?as, de las subpesta?as, y agrega las URLs de los enlaces donde se indica.

Si quieres agregar m?s subpesta?as s?lo a?ade debajo de la ?ltima subpesta?a una l?nea como esta:

<a href="URL del enlace">Sub pesta?a 3</a>

Y si quieres agregar otra pesta?a con sus respectivas subpesta?as agrega antes del ?ltimo </div> un c?digo como este:

<p class="menu_head">Pesta?a 4</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

Como siempre en color verde he puesto las anotaciones donde puedes personalizar el men? como es el color de fondo, el texto, etc.
Las flechas son unas im?genes, si quieres cambiarlas deber?s cambiar las URLs de estas im?genes que se encuentran tanto en el primer como en el segundo c?digo.

Es un men? sencillo pero con la facilidad de agrupar varios enlaces y adem?s con esos efectos deslizantes que a todos gusta.

V?a | Roshan's blog

Bombay TV: Una pel?cula con tus propios subt?tulos

No s� a ustedes, pero tengo cierta fascinaci?n por los generadores de im?genes y videos, sobre todo cuando �stos nos permiten sacarnos una que otra carcajada, o mejor aun cuando les podemos darle una utilidad adem?s de divertirnos.

Bombay TV es un sitio con varios clips de pel?culas indias a los cuales puedes agregarles tus propios subt?tulos. S?lo hay que seleccionar un clip de pel?cula, a?adir los subt?tulos, y poner los datos de la persona a la que se lo quieres enviar, incluso te lo puedes enviar a ti mismo.

Al hacerlo te dar? un link donde podr?s ver tu pel?cula y la opci?n Embed para que copies el c?digo que puedes pegar en tu blog, en una entrada, o en un elemento HTML/javascript.

Lo bueno, es que podemos usarlo en el blog para mostrar alg?n aviso, hacer una broma, usarlo como promocional, o cualquier cosa que se nos ocurra.

Lo malo, es que estos generadores usualmente no duran mucho por falta de presupuesto, as? que el video no estar? disponible de por vida. Pero mientras tanto, podemos divertirnos un poco agregando subt?tulos a estas pel?culas.

Enlace | Bombay TV

Qu� hacer si... Me copiaron el blog

Es un hecho que hay distintos tipos de entradas, esto var?a en funci?n de las cualidades del autor, y de la tem?tica del blog. As? que seguro habr? entradas donde el autor comparta un video que le gust?, relate como estuvo su d?a, o simplemente se queje de lo mal que lo trata la vida.

Pero otros en cambio, crean art?culos m?s elaborados o m?s art?sticos. As? que algunos autores pueden dedicar varias horas en componer una entrada, horas dedicadas a la investigaci?n, creaci?n de im?genes, pr?ctica, correcci?n, redacci?n, y todo aquello que deje una entrada tal como el autor la visualiz? en su mente. Y un d?a, de repente, el autor se entera que esa entrada a la que le dedic? tiempo y esfuerzo, fue copiada y publicada por alguien m?s.

Est? claro que, salvo que sea privado, cualquier contenido que se sube a la red est? disponible para todos. Pero ojo, que, publicar, no es sin?nimo de dominio p?blico.

Seguro que muchas veces queremos que nuestras publicaciones sean conocidas, y compartidas en todo el mundo, pero un copy & paste no es la manera m?s �tica de hacerlo, ni mucho menos, atribuirnos el trabajo de alguien m?s.

Es por ello que Gerard, empleado de Google dice:

"Cualquier material fruto de tu creaci?n est? inmediatamente protegido por leyes de protecci?n de los derechos del autor. En el caso espec?fico de Blogger seguimos la ley DMCA estadounidense."

Ante esa situaci?n, hay dos variantes, que quien ha plagiado el contenido lo publique en un servicio que no pertenezca a Google, o que lo publique en un servicio de Google, como por ejemplo en Blogger.

Si el contenido copiado est? en Blogger, podemos usar un formulario para notificar la presunta infracci?n. Dicho formulario se encuentra en el siguiente enlace:

[Notificaci?n de presunta infracci?n de derechos de autor: Blogger]

Ese formulario es el que recomienda la DMCA (Digital Millennium Copyright Act), o sea la ley estadounidense de derechos de autor. Y una copia de este se env?a a Chilling Effects, que es la organizaci?n que recopila y publica las quejas de los denunciantes por material plagiado en Internet.

Antes de completar el formulario, debes plantearte si en verdad el contenido que reclamar?s es completamente tuyo, de lo contrario, si incluyes informaci?n falsa por derechos que no te pertenecen entonces podr?as terminar pagando varios miles de d?lares a causa de honorarios de abogados. Pero s? est?s seguro que el contenido es tuyo, entonces puedes proceder.

En �l deber?s poner tu nombre completo, el nombre de tu empresa (s?lo si aplicara el caso), nuevamente tu nombre completo, direcci?n de correo electr?nico, y tu pa?s de residencia.

Luego, en Ubicaci?n del ejemplo autorizado del material debes explicar cu?l es el material protegido y d?nde se encuentra, por ejemplo: "Estas entradas son obra m?a y fueron publicadas primeramente en miblog.com", o "La fotograf?a de la puerta azul es de mi pertenencia".

Despu�s, en Identifique y describa el material protegido por derechos de autor agrega la o las URLs de tu blog donde se encuentra el material original, por ejemplo:

"http://nombre-de-mi-blog.com/2011/08/poema.html"

En la siguiente ?rea deber?s agregar la o las URLs donde se encuentra el material que te copiaron, por ejemplo:

"http://ejemplo.blogspot.com/2010/11/entrada.html"

Si es m?s de una URL haz click en el enlace 'A?adir un campo adicional' para agregar una URL m?s.

Por ?ltimo selecciona la fecha de tu denuncia, marca las casillas donde est?s de acuerdo con los t�rminos, y escribe nuevamente tu nombre, el cual deber? ser exactamente igual a como lo escribiste anteriormente.

Casi de inmediato deber? llegarte un correo con la copia de tu reclamaci?n. Y si todo sale bien en aproximadamente dos d?as o una semana las entradas de quien te copi? habr?n sido eliminadas.

Algunas veces podr?n enviarte un correo dici�ndote que esos enlaces del presunto infractor fueron removidos, otras veces no te avisar?n.

Eso es si las entradas duplicadas se encuentran en Blogger, si est?n en otro lado que no sea un servicio de Google entonces ese formulario no te servir?, pues Blogger no puede remover enlaces de otros sitios que no le pertenecen. En esos casos debes ponerte en contacto con el administrador de ese sitio para solicitarle que remueva el material, o que incluya la fuente del art?culo original. Si el administrador no lo hace, y si dispones de tiempo y energ?a, tendr?s que iniciar una denuncia formal acorde a las leyes de tu pa?s.

Y si est?s del otro lado de la moneda, no hagas copy & paste, publica contenido original. Ciertamente puedes publicar algo de lo que ya otros han hablado, pero puedes hacerlo con un punto de vista diferente, seguro tendr?s algo m?s que aportar a ese tema, incluso puedes hacerlo m?s interesante.

Y si tu pereza es m?s grande que tu creatividad, primero pide permiso al autor para publicar su material, y agrega un enlace a la fuente original.

Por supuesto en estos temas hay opiniones divididas, habr? quienes est?n a favor, y otros en contra. Probablemente. Pero quienes s? quieran hacer v?lidos sus derechos de autor pueden hacer su reclamaci?n pertinente, y los que no, pues no.

Tal vez haga falta recordar que NO existe un m�todo 100% seguro para evitar que te copien contenido de tu blog, aunque hay una docena de m�todos para bloquear contenido, hay tres docenas m?s de m�todos para eludirlos.

Referencia | Foro de ayuda de Blogger

Incluir los FeedFlare de Feedburner en el feed (y en el blog)

Los FeedFlare son enlaces para compartir que se agregan debajo de los feeds, son algo as? como los marcadores sociales pero dentro del feed.

Si est?s suscrito al feed de Ciudad Blogger entonces habr?s notado (o no), que debajo del resumen de las entradas aparecen unos enlaces, esos links son los FeedFlare, y que pueden ser usados por ejemplo para twittear la entrada, enviarla por correo a un amigo, publicarla en Facebook, etc. En otras palabras, son enlaces que permitir?n al lector promocionar nuestras entradas.

Para activarlos entra a tu cuenta de Feedbuner | Optimize, y selecciona FeedFlare del men? izquierdo. Ah? marca de las casillas de la primera fila, los servicios que quieres que aparezcan. Cuando termines da click en Activar.

Un poco arriba del bot?n Activar, y que despu�s se llamar? Guardar, ver?s el ejemplo de c?mo se ver?n tus FeedFlare, si pasas el cursor encima de ellos podr?s cambiarlos de posici?n.

Cada vez que marques una nueva casilla, o que los cambies de posici?n tienes que dar click en Guardar.

Adem?s de los FeedFlare oficiales tambi�n podemos usar algunos externos, y mejor aun, en espa?ol. Por la red debe haber varios de ellos, yo les compartir� los que uso, que son: Meneame, Me gusta (de Facebook), Twitter, Bit?coras, y Enviar (por correo).

Para agregarlos busca debajo de los FeedFlare oficiales, donde dice Personal FeedFlare.

Ah? agrega una de estas URLs, o todas, si quieres.

Meneame

http://ciudad-blogger.googlecode.com/files/meneame.xml

Me gusta

http://ciudad-blogger.googlecode.com/files/like.xml

Twitter

http://ciudad-blogger.googlecode.com/files/twitter.xml

Bitacoras

http://bitacoras.com/bitacoras_com.feedflare.xml

Enviar por correo

http://ciudad-blogger.googlecode.com/files/emailthis.xml

Ya que los hayas agregado tendr?s que marcar las casillas de la primera fila y dar click en Guardar.

Si te diera problemas al guardarlos entonces agrega uno por uno, es decir, agrega uno, lo guardas, lo activas, y sigues con el siguiente.

Pero el uso de los FeedFlare no acaba ah?, tambi�n podemos usarlos dentro del blog. Esto es que los FeedFlare pueden aparecer al pie de la entrada como links para compartir.

Para agregarlos en el blog marca las casillas de los links que quieres, pero ahora ser?n los de la segunda fila.
Ya que est�n marcados da click en Guardar, y arribita de ese bot?n ver?s el texto Get the HTML code to put FeedFlare on your site; del men? desplegable selecciona Blogger...

Se abrir? una ventana con un c?digo para copiar, un c?digo como este:

<script charset='utf-8' expr:src='&quot;http://feeds.feedburner.com/~s/Nombre-de-mi-blog?i=&quot; + data:post.url' type='text/javascript'/>

Copia el c?digo de esa ventana, luego entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios, y pega el c?digo que copiaste anteriormente, debajo de:

<div class='post-footer'>

Guarda los cambios y listo, tambi�n tendr?s los FeedFlare de Feedburner en el blog.

Aqu? les dejo el enlace del cat?logo de FeedFlare de feedburner:
http://www.feedburner.com/fb/a/help/flarecatalog
Si hay alguno que te guste s?lo copia el enlace junto a Copy this URL, y lo pegas tal como explicamos en la entrada.

El Fanbox de Facebook, flotante y con efecto deslizante

Aunque Facebook Slide Likebox es una extensi?n de Joomla tambi�n podemos usarlo en Blogger.

Se trata de un gadget que muestra una pesta?a en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, as? que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Dise?o | Edici?n de HTML y antes de </head> pega el script:

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

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5204T02l-WsfmG2PHQO2nXh10udjT8U3TqrOoWD6FZH_OLYn_Du25Aema8C1xRXpQQgDL3y5GdylUbRYsrzV8piCzz3ESRgxC9zvUojhJaHICi_l24tl3_ABm_LGz-xnJgpPH6IpkZU/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript y ah? pega esto:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ese c?digo contiene el Fanbox, as? que cambia donde se indica el nombre de tu p?gina, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pesta?a, as? como el fondo del gadget es una imagen, as? que si deseas cambiarle el color o tama?o tendr?s que editar la imagen que se encuentra en el ?rea de los estilos.
Lo ideal ser?a no modificar el tama?o, pero en caso de que desees hacerlo deber?s -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero adem?s mirar la entrada donde hablamos c?mo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aqu? tambi�n, as? que ah? podr?s ver qu� se necesita restar en las medidas del Fanbox.

Pero claro, eso es s?lo si quieres modificar su tama?o, sino entonces no necesitar?s nada m?s que los tres primeros pasos y podr?s tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.

Cambiar el nombre a los datos del post-footer

Anteriormente vimos c?mo cambiar de lugar los datos del post-footer, vimos la forma de ponerlos debajo del t?tulo de la entrada. Ahora veremos c?mo cambiarle el nombre a esos datos, por ejemplo, que en lugar de que diga 'Etiquetas' diga 'Categor?as', o en lugar de 'Publicado por' diga 'Autor'.

Si usas una plantilla original de Blogger entonces la cosa es sumamente sencilla pues el mismo Blogger nos da la opci?n de cambiar los datos del post footer, s?lo entra en Dise?o | Elementos de la p?gina y da click en Editar sobre el elemento Entradas del blog.

Ah? ver?s marcadas las opciones que aparecen (o debieran aparecer) al pie de tus entradas.

En esa ventana ver?s en los recuadros, el t?tulo que aparece en cada uno de esos datos:

Publicado por
en
comentarios
Etiquetas
Reacciones
ubicaci?n

Todos esos nombres los puedes cambiar ah? mismo por los que quieras. Guarda los cambios y listo, los nuevos nombres aparecer?n en el post-footer de tus entradas.

Si tu plantilla no es original de Blogger entonces podr?a existir la posibilidad de que ya tenga los nombres cambiados desde la plantilla, en esos casos expande los artilugios y con CTRL + F busca el nombre que aparece, por ejemplo 'Posted by', y c?mbialo por el que quieras.

Aun si tuvieras una plantilla original de Blogger tambi�n puedes hacer estos cambios de nombres directo en la plantilla. S?lo entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios, busca el c?digo correspondiente a cada ?rea:

Para cambiar el Publicado por

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

Para cambiar la palabra En

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Para cambiar la palabra Etiquetas

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Para cambiar la palabra Comentarios

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Para cambiar Ubicaci?n

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>

Cambia las partes en rojo por los nombres que quieras darles y listo. En el caso de los comentarios hay dos l?neas que cambiar, la primera corresponde a la palabra en singular (cuando s?lo hay 1 comentario), y la segunda a la palabra en plural.

Si estos datos no los tienes entonces puedes agregarlos marcando las casillas de esos datos dentro de Entradas del blog, y si eso no fuera suficiente entonces puedes agregarlos directamente debajo de <div class='post-footer'>

Agregar botones de redes sociales en el blog

Estos son unos botones muy sencillos pero muy pr?cticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, s?lo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.

Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar m?s.

Puedes verlos en esta misma entrada.

• Agr�game en tus c?rculos


• Hazte fan en Facebook


• S?gueme en Twitter

Para poner estos botones de las redes sociales en tu blog s?lo entra en Dise?o | Edici?n de HTML y antes de ]]></b:skin> agrega los siguientes estilos:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Ahora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, y ah? pega esto:

<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYoFmtfKW-Qhpon3YZUi1O0tr0s43PeCrjKM-wLePEnd2z54mMjNtM48D8visegyFsLA2GFkKrgXNFShf3Hf7Gm0LRkTpCY3v3ZGxRMnVxPibVPguNqzDHKlyKoyYH_lAhuUoU7efS1Sg/" /> <span>Agr�game en tus c?rculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4g96mCEqQ2bO8W_2QcI1yHuWPcsZtcUH7spw0BbDjYjQt_VR7noAUzdAme1Hm0Nful_RmzIYxaB8w3UNxCTnUfzTMfVQayupMkOiq60xeHWx6SKBijkRn5BlRVhLqNiFDtEyspCe0Kw4/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0TAuayuSaOWEWsKPwgwtqUFUHcAnRNg6b3P47bbljkRLBDhPYbMpu5Ko_M62uKJ8d43qMBK0X0kdlRGs10BI_rpDRS99ULC1tH0tvPKvXz3LDJSo0nusLl6eaabDnQRoc1uOxg7MZLk/" /> <span>S?gueme en Twitter</span></a></li>
</ul>

Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que est?n de color verde dentro del primer c?digo.

Si quieres agrega m?s botones s?lo a?ade antes de </ul> una l?nea como esta por cada bot?n extra cambiando la URL del enlace, la URL de la imagen y el texto:

<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>

Y ahora s?, es todo.

Configurar dominio de Name.com en Blogger

Aunque hay una entrada que explica c?mo configurar un dominio propio en Blogger, pens� que ser?a necesario hacer una explicaci?n detallada para los que compran su dominio en Name.com. ?La raz?n? Pues que es una de las compa??as registrantes m?s usadas por los bloggers, adem?s que muchos tienen problemas para configurarlo (yo tambi�n los tuve alguna vez).

No hablaremos del proceso de la compra del dominio pues eso es muy sencillo para todos.
As? que suponiendo que ya has comprado tu dominio en Name.com, entra a tu cuenta.
Ah? ver?s el dominio que adquiriste; haz click en �l.

Ahora en el men? del lado derecho haz click en DNS Record Management.

Aqu? vamos a configurar los DNS del dominio. En donde dice Record Type selecciona CNAME, en el siguiente campo escribe www y en Record Answer escribe ghs.google.com
En TTL pon 1800 y luego click en Add Record.

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
CNAME

Hasta ah? es lo que har?amos normalmente para la mayor?a de las compa??as registrantes, pero en Name.com a ves eso no basta, as? que vamos a crear unos registros del tipo A para que no tengamos ning?n problema, y mejor aun, para no tener que esperar las tediosas 48 horas que regularmente se requieren.

Sin salirte del panel de control, en Record Type selecciona A, el siguiente campo d�jalo en blanco tal como est?. En Record Answer escribe 216.239.32.21 y en TTL nuevamente pon 1800, a continuaci?n click en Add Record.

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
A	.tublog.com

De la misma forma agrega tres registros m?s como ese pero con estos valores:

216.239.34.21
216.239.36.21
216.239.38.21

Al final deber? verse as?:

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
A	tublog.com	216.239.32.21	1800		Edit       Delete
A	tublog.com	216.239.34.21	1800		Edit       Delete
A	tublog.com	216.239.36.21	1800		Edit       Delete
A	tublog.com	216.239.38.21	1800		Edit       Delete
CNAME	www.tublog.com	ghs.google.com	1800		Edit       Delete

Con eso ya tenemos todo listo en Name.com, ahora entra en Blogger y dentro de Configuraci?n | Publicaci?n haz click en Dominio personalizado.

Luego click en Cambiar a opciones avanzadas.

Ah? escribe el nombre de tu blog y guarda los cambios.

Para finalizar marca la casilla que est? debajo del nombre de tu dominio, eso har? que los que entren como tublog.com sean redireccioandos a www.tublog.com. Eso es para los que entr�n sin las WWW sean redireccionados y no les aparezca una p?gina de error.

Y con eso habr?s terminado de configurar tu dominio propio en Blogger, y podr?s ingresar a �l para corroborar que est? funcionando.

A modo de recomendaci?n, si quieres usar alguna caracter?stica de Google Apps lo mejor es no activarlo desde Name.com pues podr?a borrar los registros en los DNS que has hecho y en su lugar crear los de Google Apps, as? que es mejor hacerlo manualmente, tal como cuando vimos c?mo crear un correo electr?nico personalizado.

Y como ?ltimo consejo puedes hacerte fan de Ciudad Blogger en Facebook o Twitter para enterarte cuando haya cupones de descuento para Name.com