Crear un subdominio para Facebook y Twitter (Name.com, GoDaddy, CDmon)

Cada vez hay m?s usuarios y contenido en la red, eso hace que se compliquen las cosas cuando queremos asignar un nombre a nuestras p?ginas de las redes sociales pues muchas veces resulta que el nombre que quer?as ya est? ocupado. O puede ser que al escoger el nombre de tu p?gina de Facebook hayas cometido un error y ya no puedas cambiarlo y hayas tenido que recurrir a tu ingenio para ponerle otro nombre aunque tal vez no es el que quer?as.

Lo que veremos en esta entrada es c?mo crear un subdominio para Facebook y Twitter, de manera que en lugar de decirle a tus lectores que te encuentren en la direcci?n, facebook.com/nombre-de-mi-pagina podr?n encontrarte en facebook.ejemplo.com

Tal como ahora sucede en nuestras p?ginas de Facebook y Twitter:
facebook.ciudadblogger.com
twitter.ciudadblogger.com

Obviamente necesitamos tener un dominio propio, en este caso, el tutorial explicar? c?mo crear el subdominio en name.com, GoDaddy, y CDmon. Si tu dominio no est? configurado con uno de estos servicios entonces no podr?s hacerlo con este tutorial, a menos que tu proveedor de dominio te d� la opci?n de crear subdominios y usar una redirecci?n. As? que recalco, estos procedimientos son ?nicamente para quienes compraron su dominio en name.com, GoDaddy, o usan las DNS de CDmon. Aclarando lo anterior comencemos.

Name.com

Si tu dominio lo comparaste en name.com la configuraci?n ser? la m?s sencilla de todas. S?lo entra a tu cuenta y haz click en el nombre de tu dominio. En el men? derecho haz click en Social URL Forwarding.

Ahora marca la casilla de Facebook, y agrega la URL de tu p?gina de Facebook. Despu�s marca la casilla de Twitter y pon ah? la URL de tu cuenta de Twitter.

Guarda los cambios y listo. De inmediato podr?s ingresar a tus redes sociales desde facebook.ejemplo.com y twitter.ejemplo.com

GoDaddy

Si tu dominio lo compraste en GoDaddy, ingresa a tu cuenta; en el men? verde sit?ate en Domains y haz click en Domain Management.

Marca la casilla de tu dominio, y en la barra de herramientas de arriba haz click en Forward y luego en Forward Subdomain.

Aparecer? una ventana; escribe en el primer campo facebook y en el segundo la direcci?n de tu p?gina de Facebook SIN poner el http://

Guarda los cambios y espera aproximadamente una hora para poder ingresar a tu p?gina de Facebook desde facebook.ejemplo.com

Realiza el mismo procedimiento para crear el subdominio para Twitter.

AVISO

24/marzo/2014
Las nuevas pol?ticas de CDmon ya no permiten el uso de la herramienta de redirecci?n a excepci?n de aquellos que hayan comprado un dominio o hosting en esa empresa, por lo tanto, las instrucciones de esta entrada s?lo podr?n aplicarlas los usuarios que tengan contratado alg?n servicio en CDmon.

CDmon

Si tu dominio lo compraste en CDmon, o bien, si lo compraste en otra empresa pero lo configuraste en CDmon entonces ingresa a tu cuenta de CDmon y haz click en DNS est?tico.

Selecciona tu dominio y haz click en Gestionar.

Ahora haz click en el ?cono de la hoja.

Agrega el nombre del subdominio, en este caso el nombre ser? facebook

Guarda los cambios. Luego, busca el nuevo registro que haz creado y haz click en el ?cono de las herramientas.

Selecciona Redirecci?n URL, escribe la URL de tu p?gina de Facebook y guarda los cambios.

Espera aproximadamente una hora para poder ingresar a tu p?gina de Facebook desde el subdominio que creaste, facebook.ejemplo.com

Repite el mismo procedimiento para Twitter.

Como has podido ver no es algo complicado, y adem?s hace que la URL de tu p?gina de esas redes se vea mejor, sea m?s corta, y m?s f?cil de recordar para tus lectores.
Estos son los ejemplos m?s claros:
facebook.ciudadblogger.com
twitter.ciudadblogger.com

Cambiar a la interfaz antigua de Blogger

AVISO
Desde el 19 de septiembre de 2012, la interfaz antigua ha sido remplazada por la nueva interfaz de Blogger de forma definitva, por lo que esta entrada ya es obsoleta.

No s� por qu�, pero personalmente la nueva interfaz a m? me da muchos problemas, trato de editar algo en la plantilla y me saltan errores del tipo BX sin raz?n aparente. Pero independientemente de eso, hay opciones que la nueva interfaz no tiene y que la antigua s?, por ejemplo la selecci?n de Plantillas de dise?o (aquellas del 2006), la habilitaci?n de p?ginas de entrada, entre otras cosas.

As? que puede ser que tengas que cambiar a la interfaz antigua por alguna raz?n de forma temporal, o que quieras quedarte con ella permanentemente (mientras Blogger lo siga permitiendo).

Para volver a la interfaz antigua de Blogger ingresa al Escritorio de Blogger, del lado superior derecho ver?s el ?cono de un engrane, haz click ah?. En el men? que se desplegar? selecciona Interfaz anterior de Blogger.

De inmediato estar?s de vuelta en la interfaz antigua, y podr?s continuar manejando tus blogs como siempre.

Cuando quieras regresar a la nueva interfaz ingresa otra vez al Escritorio, y haz click en Probar la interfaz actualizada de Blogger. Eso har? que regreses a la nueva interfaz de forma predeterminada.

De esa manera podr?s usar cualquiera de las dos interfaces por la raz?n que sea.

Mostrar un elemento debajo del primer post

El otro d?a me preguntaba Coloush si era posible mostrar un gadget s?lo debajo de la primera entrada, y que en el resto de ellas no.

La verdad es que s? es posible, pero hay que entender que los gadgets habituales que provee Blogger s?lo se pueden a?adir en las ?reas donde en la secci?n de Dise?o lo permita. Aun as?, podemos mostrar un elemento cualquiera, por ejemplo, un anuncio de AdSense, un banner, un video, un archivo en flash, etc.

As? que lo que haremos en esta entrada ser? mostrar un elemento debajo del primer post, esto quiere decir que debajo de las dem?s entradas no ser? visible. Esto queda muy bien cuando se usa alg?n sumario autom?tico, aunque tampoco es requisito.

Bien, esto es realmente sencillo, usaremos la condicional isFirstPost para que dicho elemento s?lo se aplique a la primera entrada; es la misma condicional que usamos para mostrar el primer post de manera diferente.

Comencemos entrando a la Edici?n HTML de la plantilla, ah? marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

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

Justo debajo de ella agrega esto:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin-top:0px; margin-bottom:10px;">
...Aqu? el c?digo del elemento que quieres mostrar...
</div>
</b:if>

A?ade donde se indica el c?digo del elemento que quieras poner. Antes de guardar usa la Vista Previa para asegurarte que todo est? bien.

En color azul est?n los m?rgenes superior (margin-top) e inferior (margin-bottom), esto es por si quisieras que el elemento se acerque o se aleje m?s de las entradas, as? mismo puedes a?adir ah? cualquier estilo como un color de fondo, un borde, etc.

?Lo ves? Es realmente f?cil.

Cursor con corazones que se desvanecen

No vayan a creer que este blog cambiar? de nombre a "Las tardes rom?nticas con El Potro" o algo as? parecido, es s?lo que estas ?ltimas semanas he recibido varios correos donde me piden que publique cosas alusivas al mes del amor, as? que por eso estamos derramando miel y corazones por todas partes.

Bueno, si ya movieron el cursor ya se dieron cuenta de qu� trata el truquillo. Es un cursor que al moverlo desprende corazones por el blog, luego �stos se multiplican y se desvanecen.

El script es nuevamente de Giffy, aqu�l que nos trajo al Santa Claus volando la Navidad pasada.

Para poner este cursor de corazones en tu blog, entra en la Edici?n HTML de tu plantilla, y antes de </body> pega este c?digo:

<script type="text/javascript" src="http://blogparts.giffy.me/0010/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0010/parts.png" alt="????????????????" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;"><a href="http://twi1.me/">[PR]???????????</a></p>

Guarda los cambios y listo. Pero ojo, el c?digo agregar? un banner en japon�s al final de la p?gina. Sino quieres que aparezca entonces el c?digo que deber?s usar es este:

<div style="display:none;"><script type="text/javascript" src="http://blogparts.giffy.me/0010/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0010/parts.png" alt="????????????????" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;"><a href="http://twi1.me/">[PR]???????????</a></p></div>

Ya cada qui�n sabr? si deja el banner o no. Aun as? es de esos scripts que s?lo usaremos un tiempo muy corto para no empalagar a nuestros lectores :)
Mientras tanto, Vive l'amour!

[PR]???????????

Corazones que caen y se desvanecen en el blog

?No les choca c?mo me pongo de meloso en febrero? Pero es que es el mes del amor, as? que podemos justificar ver tanta miel por doquier.

Y como no soy el ?nico enamorado, aqu? hay una rom?ntica decoraci?n para el blog, se tratan de unos corazones cayendo por el blog, algunos tienen efecto de opacidad y al caer se van desvaneciendo hasta desaparecer. Puedes verlos en este blog de pruebas.

La buena noticia es que s?lo necesitamos un simple y sencillo paso para colocarlos en el blog, la mala es que usa jQuery, as? que si algo no funciona ya sabes que se debe a las versiones de jQuery.

Aun as?, es de esos scripts que no necesitamos tenerlos todo el tiempo, s?lo esta temporada de los enamorados.

Para poner estos corazones que caen en tu blog vamos a meterlos dentro de un gadget. Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript.

Si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript.

Ah? pega este c?digo:

<script>
/***** Corazones cayendo en el blog *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZE6wmYZCOkXOJhZ1z3AvU81AhiA3b3uGbIDzz1ekRvCyIWFXxDtRYoljRQzHRPB0nNnqqHUF-mG3FXjHLWv97VDecUVdXVXtEmRCtwfo8-S-3KiTokWqMsp67kWfxiAwLc0RgcHG05xI/s32/heart.png";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>

Guarda los cambios y listo, en un 2 x 3 tendr?s esta lluvia de corazones en tu blog.

Si se te complica la cuesti?n del script y su compatibilidad con otras versiones de jQuery, puedes usar otros corazones que caen en el blog que no tienen ninguna complicaci?n.

Efectos de bordes redondeados en las im?genes

Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la p?gina use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.

Y una forma de poder usar estos bordes es con las im?genes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompa?ados de transiciones.

La declaraci?n del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o s?lo a algunas de ellas.

A continuaci?n ver?s unos ejemplos de estos bordes y c?mo se comportan las im?genes al pasar el cursor sobre ellas.

Puedes usar el que m?s te guste, s?lo copia el c?digo, luego entra a la Edici?n HTML de la plantilla y pega dicho c?digo antes de ]]></b:skin>

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Estos efectos se aplicar?n a todas las im?genes de las entradas. Si quiseras usarlo s?lo para las que t? elijas entonces cambia .post-body img por .redondeado y .post-body img:hover por .redondeado:hover
Luego en el c?digo de tu imagen agrega la clase:

<img class="redondeado" src="URL de la imagen" />

Esos son s?lo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando m?s estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las im?genes de las entradas se vean m?s atractivas, que interact?en con el lector, y tan s?lo ha sido a?adiendo un poco de CSS.

Personalizar el gadget de LinkWithin

LinkWithin es un gadget que muestra las entradas relacionadas con una imagen en miniatura, y aunque no es un gadget nada nuevo, muchos no se animan a usarlo por su falta de personalizaci?n.

As? que en esta entrada vamos a ver c?mo poner LinkWithin en el blog, y c?mo personalizarlo.

Lo que le haremos al gadget ser? lo siguiente:

• Cambiar la ubicaci?n del gadget.
• Agregarle un color de fondo.
• Cambiar el texto "Quiz?s tambi�n le interese" por alg?n otro.
• Pasarlo a castellano en caso de que est� en ingl�s.
• Eliminar el enlace de LinkWithin.
• Eliminar el borde que separa las entradas.
• Poner las im?genes redondeadas.
• Cambiar el color de fondo al pasar el cursor.
• Cambiar el formato de los t?tulos de las entradas.

Empecemos. Primero que nada hay que instalar el gadget, para ello entra a la p?gina de LinkWithin, ah? llena los datos que te pide.

Aunque nos ofrece la opci?n de seleccionar Blogger como plataforma, seleccionaremos Other, para poner el c?digo directo en la plantilla y as? poder manipularlo. En el n?mero de entradas (stories) selecciona un n?mero de acuerdo al ancho de tus entradas, es decir, si el ancho de tus entradas es muy reducido entonces elige un n?mero peque?o.

Al dar click en Get widget nos dar? el c?digo que debemos usar, es un c?digo como este:

<script>
var linkwithin_site_id = XXXXX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

Ese es el c?digo b?sico, ahora entra a la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y pega el c?digo debajo de:

<div class='post-footer'>

Al hacerlo eso ya tendr?s el gadget de LinkWithin en tu blog, y el resultado ser? este.

Ahora ser? momento de comenzar a personalizarlo.

Si quieres que se vea s?lo en las entradas individuales, encierra el c?digo con una condicional.

Te dar?s cuenta que pongas donde pongas el c?digo �ste siempre se acomodar? justo al terminar las entradas.

En las FAQ de la p?gina de LinkWithin nos explican c?mo solucionarlo, s?lo hay que a?adir, arriba del c?digo que hemos pegado, esta l?nea:

<div class='linkwithin_div'/>

Eso har? que el gadget se muestre justo donde has colocado el c?digo.
Aun cuando no quieras cambiar el gadget de lugar, agrega esa l?nea para poder personalizarlo como mencionaremos m?s adelante.

Algunas veces el gadget viene en ingl�s, o bien, el texto "Quiz?s tambi�n le interese" no es el que m?s nos gusta. As? que podemos cambiar ese texto por el que queramos, para ello agregaremos a nuestro c?digo la parte que est? en color rojo.

<div class='linkwithin_div'/>
<script>
var linkwithin_site_id = XXXX;
</script>
<script>linkwithin_text=' Entradas relacionadas: '</script>
<script src='http://www.linkwithin.com/widget.js'/>

Ah? podemos cambiar el texto por alg?n otro, en este caso har? que diga "Entradas relacionadas" en lugar de "Quiz?s tambi�n le interese".

El resto de la personalizaci?n la haremos con CSS, as? que antes de ]]></b:skin> pegaremos lo siguiente:

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #EFF8FB; /* Color de fondo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tama?o del t?tulo del gadget */
color:#084B8A; /* Color del t?tulo del gadget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Con esto quitamos el enlace */
}

.linkwithin_posts {
width: 500px !important; /* Ancho del gadget */
}

.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #819FF7 !important; /* Color de fondo al pasar el cursor */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordes redondeados */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #0431B4 !important; /* Color de los t?tulos de las entradas */
font-family: Verdana !important; /* Tipo de fuente de los t?tulos de las entradas */
font-size: 13px !important; /* Tama?o de los t?tulos de las entradas */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}

.linkwithin_title:hover {
color: #000 !important; /* Color de los t?tulos al pasar el cursor */
font-weight: bold !important;
}

En color verde puedes ver a qu� corresponde cada ?rea que puedes personalizar, puedes agregar m?s estilos si lo deseas hasta obtener el dise?o visual que m?s te guste.
El resultado ser? como este.

Como puedes ver, el resultado puede ser muy diferente al gadget original, y claro, puede adaptarse al dise?o de cada plantilla y a los gustos personales de cada quien. De esta forma podr?s ofrecerle a tus lectores entradas relacionadas al tema que est?n leyendo, y permanecer?n m?s tiempo en tu blog.