Blogging Tips

Thursday, September 25, 2014

?Qu� pasar? con mi blog cuando muera?

La muerte es algo en lo que regularmente preferimos no pensar, particularmente en la propia. La cultura nos educa a evadirla y entre menos hablemos de ella menos inc?modos nos sentiremos, a no ser que hayamos tomado un curso de tanatolog?a, pero por lo general no estamos preparados para recibirla como un hecho irremediable.

No sabemos cu?ndo moriremos, ni tampoco tenemos la certeza de que ma?ana seguiremos con vida, no hay garant?a de ello. Es por eso que debemos estar preparados, o al menos dejar todo listo para cuando partamos de este mundo. Incluyendo nuestro blog.

Imagina que tienes un accidente y mueres de forma repentina, ?has pensado qu� pasar? con gran parte del contenido que subiste a Internet a lo largo de tu vida?
Si como yo eres un entusiasta de los productos de Google seguro tendr?s fotos, v?deos, correos, y varios documentos que quiz? quieras "proteger" o conservar cuando ya no est�s. Pero, ?c?mo?

Google est? consciente de esta problem?tica y pone a nuestra disposici?n una herramienta con la que podemos elegir qu� suceder? con los distintos productos de Google (o nuestra cuenta entera) despu�s de estar inactiva por un largo tiempo. De esta manera podremos decidir si le dejamos acceso a nuestra cuenta a un familiar o amigo, o si simplemente se elimina.

Para configurar esta herramienta, ingresa al Administrador de cuentas inactivas y da click en Configurar.

Quiz? est�s pensando que es un poco riesgoso porque bien podr?as no entrar a tu cuenta de Google por diversas razones y no necesariamente signifique que hayas fallecido. Google tambi�n ha pensado en eso, as? que te avisar? de 1 a 3 meses antes de cumplirse el tiempo de inactividad y de que tu cuenta se desactive.

Para que esto sea posible deber?s a?adir un n?mero telef?nico y adicionalmente podr?s a?adir otra direcci?n de correo, por estos medios Google te notificar? antes de que tu cuenta deje de ser accesible.

Tambi�n deber?s establecer el periodo de inactividad, es decir, despu�s de cu?nto tiempo Google marcar? tu cuenta como inactiva. Este periodo puede ser de 3 a 18 meses.

Puedes agregar hasta 10 contactos de confianza a quienes se les notificar? que tu cuenta ha quedado inactiva.

Adicionalmente -y si lo deseas- podr?s marcar la casilla Compartir mis datos con este contacto y luego elegir qu� productos de Google quieres compartir con �l/ella. Esta opci?n es por si quieres que tu contacto guarde la informaci?n que te importa m?s.

Por seguridad agrega el n?mero telef?nico de tu contacto, a trav�s del m?vil recibir? un c?digo con el que podr? entrar a tu cuenta una vez que se cumpla el tiempo de inactividad. Tu contacto podr? descargar tus documentos por tres meses, d�jale claro esto para que lo haga dentro del tiempo permitido.

En este apartado tambi�n puedes a?adir una respuesta autom?tica para todos los correos entrantes. Esta respuesta s?lo se enviar? una vez que tu cuenta est� inactiva.

Por supuesto tambi�n puedes elegir que tu cuenta se elimine. Toma en cuenta que si activas esta opci?n todos los productos de Google que usas se eliminar?n, as? que tu blog tambi�n se eliminar? una vez que tu cuenta est� inactiva.

Yo por mi parte prefiero no eliminar mi cuenta, pero cada qui�n decidir? lo m?s conveniente para la suya.

Esto es para Google, por desgracia no todos los productos que usamos d?a a d?a ofrecen este tipo de herramientas. La buena noticia es que hay sitios como Death Switch que funcionan de manera similar, ah? podemos almacenar todas nuestras contrase?as; cuando dejemos de entrar por un tiempo el sistema nos enviar? notificaciones, si despu�s de haber transcurrido un tiempo no respondemos entonces nuestras contrase?as ser?n enviadas a un contacto que hayamos elegido.
Una opci?n por de m?s interesante, aunque habr? que ver qu� tan segura est? nuestra informaci?n en este tipo de servicios.

Decidas lo que decidas recuerda que hombre precavido...

Tuesday, September 16, 2014

Cambiar los iconos de los gadgets en las Vistas Din?micas

Pese a que las plantillas de Vistas Din?micas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que s? podemos modificar, en este caso veremos c?mo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quiz? muchos quieran a?adir unos iconos mas acorde a la tem?tica del blog, o al gusto del autor. As? que vamos a ver c?mo cambiarlos.

?Recuerdas la entrada para poner iconos en el gadget de P?ginas? Pues el m�todo es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo ?nico que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | A?adir CSS, ah? agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya s?lo deber?s poner la URL de las im?genes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y as? sucesivamente.

El c?digo est? preparado para los cuatro primero gadgets de tu sidebar, si tuvieras m?s s?lo a?ade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese ser? para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.

TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este c?digo:

#gadget-dock {
right: 0!important;
}

Como puedes ver no es nada dif?cil cambiar los iconos de las Vistas Din?micas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo ?nicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog m?s personalizado y ?nico, ?no crees?

Saturday, September 6, 2014

Ticker autom?tico para mostrar las ?ltimas entradas del blog

Un ticker viene siendo como una barra de noticias donde pasan los titulares tipo marquesina. Su uso b?sicamente es para mostrarle a los lectores cu?les son las entradas m?s destacadas, aunque en nuestro caso lo usaremos para mostrar las ?ltimas entradas del blog, eso s?, de forma autom?tica para no tener que estar agregando entradas a cada rato ni tener que estar editando nada.

Nuestro ticker de noticias lo haremos con jQuery, y s� que algunos dir?n ?pero por qu�, si podemos hacerlo con la etiqueta MARQUEE!.
Ciertamente podemos hacerlo con MARQUEE, pero ese elemento no es un est?ndar adem?s que su desplazamiento suele ser muy tosco con lo que muchas veces el texto se vuelve dif?cil de leer. Tambi�n podr?amos hacerlo con animaciones CSS pero en los navegadores antiguos no funcionar?a, as? que por eso usaremos jQuery para crear el efecto de marquesina, adem?s podremos elegir la velocidad y direcci?n de desplazamiento

El demo puedes verlo aqu? mismo, si pasas el cursor sobre un t?tulo el ticker se detendr?:

Y ya que lo hemos hecho autom?tico para no batallar editando tambi�n lo haremos de un solo paso, as? que su instalaci?n es ?nicamente copiar y pegar. Para ello copia el siguiente c?digo, y entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? p�galo.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hyphenhyphenBwCEY83xfUyqpzJhGjebuoeHw3Z5O8ItQ6Xt6MFdh6ZTSeH9n-ARgVxJpliw6RD54wlz6baTXRHxnioTMFPs9ObojADbsZ_UoTU9OkT0d75FrQCiWWtThcPS3E_ArfOYw56o2zn-7U/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del ?rea donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tama?o de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo ?ltimo</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Direcci?n de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

En donde se indica en color rojo deber?s poner el nombre de tu blog, en color verde ver?s d?nde cambiar el color de fondo as? como el n?mero de entradas a mostrar, velocidad, y direcci?n de desplazamiento.
No olvides cambiar el /* Ancho del ?rea donde se muestran las entradas */ aj?stalo a la medida que necesites.
Recuerda que estamos usando jQuery as? que si ya lo tuvieras elimina la primera l?nea del c?digo.

Este gadget utiliza dos scripts para funcionar, ambos ya est?n alojados pero si lo deseas puedes descargarlos y subirlos a tu propio alojamiento para no depender de otros.

No olvides que el ticker muestra las ?ltimas entradas del blog sin distinci?n de etiqueta, si quieres que muestra las ?ltimas entradas de una etiqueta en particular tendr?s que editar el archivo ticker.js y a?adir lo que se muestra en color rojo:

var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

?En d?nde se ve mejor? Eso depende del gusto de cada qui�n y del dise?o de cada plantilla, usualmente los tickers de noticias se ponen arriba o de bajo de la cabecera, o arriba de las entradas, pero como dije, eso depende del gusto de cada qui�n.

Descargar archivos

Monday, August 18, 2014

Evitar que una entrada aparezca en los resultados de Google

Algunas veces por diversas razones podremos enfrentarnos con la situaci?n de no querer que una entrada en particular se muestre en los resultados de b?squeda de Google, quiz? porque has eliminado esa entrada y sigue apareciendo en los resultados, o por cuestiones de privacidad, estrategia de posicionamiento (SEO), etc.
Si bien la mayor?a de nosotros queremos ser amados por Google, tambi�n podemos decirle "aqu? no". De manera que, puedes crear una(s) excepci?n(es) para que Google no muestre en sus resultados las entradas que no quieras que aparezcan ah?.

Elimin� una entrada y ?sigue apareciendo en Google!

Por ejemplo, podr?a darse el caso de que nos vemos obligados a eliminar alguna entrada de nuestro blog, ya sea por cuestiones personales, legales, arrepentimiento, o la raz?n que sea. Lo ideal ser?a que al eliminarla desapareciera para siempre del universo, pero la mayor?a de las veces no es as?, al menos no de inmediato como quisi�ramos. Si la entrada estaba indexada por los motores de b?squeda entonces es posible que esa entrada se siga mostrando en los resultados de Google, aun sin importar que esa URL sea inaccesible.

No es mayor problema, pero hay quienes no quieren que haya rastro alguno de esa entrada, sobre todo porque aun cuando esa entrada ya no exista alguien podr?a verla desde la cach�.

Lo que tenemos que hacer en estos casos es pedirle a Google que elimine dicha entrada de los resultados de b?squeda, y hacerlo es muy sencillo, para ello usaremos las Herramientas para webmasters de Google.

Primero ingresa a la herramienta Eliminar contenido obsoleto, pega ah? la URL de la entrada que ya no existe y da click en Solicitar eliminaci?n.

En ese momento Google analizar? la URL, si comprueba que en verdad ya no existe te confirmar? con un "This content is gone", as? que da click nuevamente en Solicitar eliminaci?n, y a esperar a que los robots hagan su trabajo.

?Y qu� pasa si no he eliminado ninguna entrada pero no quiero que ese post aparezca en Google?

Tambi�n puede darse el caso que no quieras que una entrada en particular se muestre en los resultados de b?squeda, pero no quieres eliminarla de tu blog, s?lo no quieres que aparezca en Google, quiz? porque esa entrada pueda afectarte el posicionamiento, o porque no es relevante para ti o tus lectores.

Como no quieres eliminarla de tu blog entonces tienes que decirle a los robots que no indexen esa entrada, y para ello usaremos la herramienta que Blogger nos ofrece desde la configuraci?n del blog, as? que nos dirigimos a Configuraci?n | Preferencias para motores de b?squeda | Rastreadores e indexaci?n, y en donde dice Archivo robots.txt personalizado da click en Editar para habilitarlo en caso de que no lo hayas hecho antes.

Ah? agrega lo siguiente:

User-agent: Mediapartners-Google
Allow: /

User-agent: *
Disallow: /20014/08/mi-entrada-que-ya-no-existe.html
Disallow: /search
Allow: /

Sitemap: http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=UPDATED

Ah? deber?s agregar la URL de la entrada que no quieres que aparezca en los resultados de Google y que ser? ignorada por los robots.
Si quisieras a?adir m?s de una entrada s?lo agrega otra l?nea igual con su URL correspondiente, por ejemplo:

Disallow: /20014/08/mi-entrada-que-ya-no-existe-1.html
Disallow: /20014/08/mi-entrada-que-ya-no-existe-2.html

Nota que en las URLs no ponemos el nombre del blog pues no es necesario, s?lo agrega desde la diagonal que aparece antes de la fecha (o de la P en caso de que se tratara de una p?gina est?tica).
Al mismo tiempo hemos aprovechado para a?adir nuestro sitemap en el archivo robots.txt, ah? deber?s poner el nombre de tu blog donde se indica.

Para asegurarte que todo est? bien puedes comprobar tu archivo robots.txt en las Herramientas para webmasters, s?lo considera que los robots se toman unos d?as en pasar por el blog as? que la comprobaci?n no la ver?s de inmediato.

Wednesday, July 30, 2014

Men? horizontal con buscador expandible

El men? horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un men? horizontal con subpesta?as y que incluye un buscador que se expande al pasar el cursor sobre �l cubriendo casi todo el ancho del men?. Puedes verlo funcionando en este blog de pruebas.

Este men? est? hecho ?nicamente con CSS por lo que no tendr?s que preocuparte por la compatibilidad con librer?as de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus ?ltimas versiones.

El efecto expandible lo conseguimos tambi�n con CSS, y es simple, s?lo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre �l. Juego de ni?os, ?no? ;)

ATENCI?N: Si usas una plantilla original de Blogger primero necesitas seguir los pasos de esta entrada, de lo contrario el men? podr?a no verse o funcionar correctamente.

Para poner este men? en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:

#menuBuscador {
position: relative;
width: 95%; /* Ancho del men? */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los t?tulos */
text-decoration:none;
font-size:14px; /* Tama?o de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submen? */
background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat; color:#fff;}

.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbsVrUULfEpYy4wnUVKbQhk_qMWOSJrW3ZhaX8EeAl2ftpT_HENDHwdyCxVRmw6Fv0hj8Bdr_b1gWuYnUHHT3-lD778aF8baibsfNOG_bHDUZSrFQXc3rIlsHbkPugj8tu2Jzbj-wyxk/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tama?o de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

Luego en Dise?o crea un gadget HTML/Javascript y ah? pega lo siguiente:

<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pesta?a 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pesta?a 2.1</a><ul>
<li><a href='URL del enlace'>Pesta?a 2.1.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.1.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pesta?a 2.2</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.3</a></li>
<li><a class='fly' href='#'>Pesta?a 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 2.2.5</a></li>
<li><a class='fly' href='#'>Pesta?a 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 2.3</a></li>
<li><a href='URL del enlace'>Pesta?a 2.4</a></li>
<li><a href='URL del enlace'>Pesta?a 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 3.1</a></li>
<li><a href='URL del enlace'>Pesta?a 3.2</a></li>
<li><a href='URL del enlace'>Pesta?a 3.3</a></li>
<li><a href='URL del enlace'>Pesta?a 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 4.1</a></li>
<li><a class='fly' href='#'>Pesta?a 4.2</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 4.2.1</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.2</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.3</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.4</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.5</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 4.3</a></li>
<li><a href='URL del enlace'>Pesta?a 4.4</a></li>
<li><a href='URL del enlace'>Pesta?a 4.5</a></li>
<li><a href='URL del enlace'>Pesta?a 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 5.1</a></li>
<li><a href='URL del enlace'>Pesta?a 5.2</a></li>
<li><a href='URL del enlace'>Pesta?a 5.3</a></li>
</ul>
</li>
</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>

</div>

Ya s?lo deber?s guardar los cambios. El primer c?digo son los estilos, ah? ver?s en color verde d?nde cambiar los colores, fuentes, etc., o sea, el aspecto del men?. En color rojo van las URLs y los nombres de tus pesta?as y subpesta?as.

Antes de  puedes agregar m?s pesta?as. Por ejemplo: si quisieras a?adir otra pesta?a simple, agrega una l?nea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pesta?a</span></a></li>

Si quisieras agregar una pesta?a con subpesta?as entonces agrega este c?digo:

<li class="top"><a href="#" class="top_link"><span class="down">Pesta?a</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pesta?a</a></li>
<li><a href="URL del enlace">Sub pesta?a</a></li>
<li><a href="URL del enlace">Sub pesta?a</a></li>
</ul>
</li>

Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color naranja y c?mbiala por un c?digo como este:

<li><a href="#" class="fly">Sub pesta?a</a>
<ul>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
</ul>
</li>

Eso es todo, menos complicado de lo que parece. Sin duda es un men? que hay que considerar, no s?lo por lo atractivo del buscador, sino por la posibilidad de agregar subpesta?as y sin necesidad de usar ning?n script. Adem?s que podemos personalizarlo tanto como queramos.

Monday, July 14, 2014

Insertar im?genes y v?deos en los comentarios de Blogger

?Te ha pasado que quieres decir algo pero las palabras no son suficientes? A veces eso pasa cuando queremos comentar algo en alg?n blog, quiz? un meme pueda resumir nuestra opini?n, o un video pueda complementar nuestro comentario. Por desgracia el formulario de comentarios de Blogger no incluye la opci?n de subir fotos o incrustar v?deos, pero que Blogger no lo habilite no significa que no se pueda.

Lo que veremos en esta entrada es justamente eso, c?mo insertar im?genes y v?deos en los comentarios del blog de una manera tan sencilla que s?lo requiere de un paso.
El m�todo que usaremos es similar a lo que hacemos cuando agregamos emoticons en los comentarios, de manera que lo que escribimos en el comentario se reemplaza por otro c?digo, en este caso por el HTML necesario para mostrar las im?genes y los v?deos.

Puedes verlo funcionando en en este blog de pruebas.
Para insertar una imagen usa este c?digo:

[img]URL de la imagen[/img]

Para insertar un video de YouTube o Vimeo usa este c?digo:

[video]URL del video[/video]

Asombroso, ?no? Y tal como lo promet?, la instalaci?n es de un solo paso. ?nicamente entra en Plantilla | Edici?n de HTML y antes de </body> pega lo siguiente:

<script>
//<![CDATA[
// Insertar im?genes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>

</style>

Debajo del script ver?s que tambi�n hemos colocado unos estilos, estos estilos son para darle un poco de personalizaci?n a las im?genes y a los v?deos que se mostrar?n en los comentarios, como el borde, la sombra, y el tama?o. En color verde se especifica a qu� corresponde cada una de esas ?reas. Por supuesto puedes a?adir m?s estilos si lo deseas.

Para que tus lectores sepan que pueden agregar im?genes y v?deos puedes poner un aviso de ello, esto puedes hacerlo desde Configuraci?n | Entradas y comentarios | Mensaje del formulario de comentarios.

C?mo insertar im?genes y videos
En el caso de las im?genes, t? y los comentaristas deber?n usar este c?digo:

[img]URL de la imagen[/img]

Y en el caso de los v?deos, tanto de YouTube o Vimeo se usar? este c?digo:

[video]URL del video[/video]

En ambos casos deber?s poner la URL de la imagen (o el video) donde corresponde.

C?mo obtener la URL de los videos

En YouTube puedes copiar la URL que aparece en la barra de direcciones del navegador cuando te encuentres viendo un video.
Tambi�n puedes usar la URL que aparece en "Comparte este video".
O tambi�n puedes copiar la URL que aparece en el c?digo de inserci?n dentro de "Insertar v?nculo".
Todas estas URLs son v?lidas para usarse en los comentarios:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Es decir, las que tienen el t�rmino watch, las que tienen el acortador youtu.be, y las que incluyen el t�rmino embed. Cualquiera de ellas funcionar?.

Consideraciones finales.

Este m�todo es ?nicamente para plantillas que tengan comentarios anidados, o sea, con opci?n de "Responder". Si tu blog no tiene la opci?n de "Responder" no funcionar?.
Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, p?gina completa, etc.
Se admiten todos los formatos de im?genes convencionales (JPG, PNG, GIF).
En el caso de los v?deos se aceptan v?deos de YouTube y Vimeo.
Ten en cuenta que la inclusi?n de im?genes y v?deos en los comentarios pueden reducir la velocidad de carga del blog.

Este tipo de trucos puede resultar muy atractivo y ?til en muchos blogs, pero siempre con moderaci?n para no abusar con el n?mero de im?genes y v?deos que podr?an ralentizar la carga. Si se le da un buen uso, este tipo de opciones podr?a mejorar la experiencia del lector al momento de interactuar con el autor y con los dem?s comentaristas del blog.

Thursday, July 10, 2014

Cambiar el enlace de la cabecera del blog

Hay quienes crean varios blogs que son parte de un blog principal y desean que al dar click a la cabecera no los dirija a la portada, sino que los lleve a otro blog. Lo que aprenderemos en esta entrada ser? a cambiar el enlace de la cabecera para que abra otra p?gina, ya sea otro blog, una p?gina est?tica, o cualquier otra direcci?n.

Por ejemplo, en este blog de pruebas, si das click en el t?tulo del blog abrir? u?n? ?m?a?g?n???f?i?c?o? ?y? ?e?s?t?u?p?e?n?d?o? otro blog.

Para conseguir lo antes mencionado debemos ir a Plantilla | Edici?n de HTML.
Si el t?tulo de tu blog es una imagen busca este c?digo:

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Cambia todo lo que est? en color rojo por esto:

href='URL del enlace'

Ah? deber?s agregar el link del blog o la p?gina que quieras enlazar.

Si no tuvieras una imagen en la cabecera, o sea, que el t?tulo del tu blog sea s?lo texto, entonces busca este c?digo:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

De igual manera cambia lo que est? en color rojo por esto:

href='URL del enlace'

En el caso de quienes en el t?tulo s?lo tienen texto, sabr?n que cuando se est? en la portada el t?tulo no tiene enlace, ?nicamente cuando se entra a un post. Si quisieras que el t?tulo de tu blog tenga enlace aun estando en la portada entonces cambia el c?digo anterior por esto:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a href='URL del enlace'><data:title/></a>
<b:else/>
<a href='URL del enlace'><data:title/></a>
</b:if>
</b:includable>

As? de simple podr?s cambiar el enlace de la cabecera y hacer que al dar click no muestre la portada del blog, sino que abra otro blog.