Blogging Tips: March 2013

Sunday, March 24, 2013

Men? horizontal con subpesta?as y buscador integrado 2

Hace alg?n tiempo vimos el men? horizontal con subpesta?as y buscador integrado y desde eso me han preguntado c?mo hacer ese mismo men? pero de varios niveles, es decir, que las subpesta?as del men? tambi�n tengan subpesta?as. El men? a continuaci?n tiene esa caracter?stica, adem?s de conservar el buscador dentro del men?.

Los estilos redondeados en los submen?s se han quitado por cuestiones est�ticas, pero ya saben que cualquiera de estas moner?as pueden personalizarse a consideraci?n y gusto propio.

El men? puedes verlo en este blog de pruebas.

ATENCI?N: Si usas una plantilla hecha a trav�s del Dise?ador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

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

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del men? */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tama?o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu 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;}

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

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHziyOXb2qNmFiwj1z3CaPq15Zy4OcXEXDFQS9FKC3s9XWoY8Kl-0wOY7vLBwu0kghBcWhIcPteokfdCOxoHeJzJpO1SaNW4EUpFnTOqZS3lqUhYPp2sdIeWQ3tE-T6q5giNA4yP3DByY/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

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

<div id='menuWrapper'>
<ul class='menu'>
<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>


<li>
<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>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las ?reas para cambiar los colores.

Antes de  puedes agregar m?s pesta?as si lo deseas.
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>

Con esta variaci?n del men? podemos agrupar m?s enlaces y categor?as en poco espacio, y que adem?s, al conservar el buscador dentro del men? hace que sea un men? pr?ctico, compacto y ?til.

Thursday, March 14, 2013

Bloggerest: Plantilla para Blogger


descargas

Nombre:	Bloggerest
Dise?ador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Caracter?sticas:	Plantilla para Blogger, 2 columnas, 980px de ancho, Entradas estilo Pinterest, Cabecera flotante, Colores minimalistas, Comentarios del autor destacados, Botones para compartir.
Incluye:	Plantilla XML, Instrucciones de instalaci?n, Licencia

Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, as? que esta vez quise darme un tiempo para poder dise?ar una plantilla que pudieran descargar y usar libremente.

Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una r�plica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las im?genes juegan un rol importante.

El dise?o de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El t?tulo del blog as? como los t?tulos de los gadgets usan una fuente tipo caligraf?a para darle un aire elegante.
La cabecera ocupa el 100% del ancho de la p?gina al mismo tiempo de ser flotante. Las im?genes en la portada tienen opacidad al pasar el cursor y �stas conducen a la entrada al dar click sobre ellas, tambi�n muestra la miniatura del video cuando est?n alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar c?mo se visualizan los bloques entrecomillados, las listas numeradas, las listas con vi?etas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.

Personalizaci?n:

La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.

El men? de la plantilla es el men? horizontal con subpesta?as y buscador integrado, por lo que en esa entrada podr?s ver un poco m?s sobre su personalizaci?n. En la plantilla puedes identificar el men? por la etiqueta <div id='menuWrapper'>

La forma de redactar las entradas es igual que como lo har?as siempre, sin embargo, en caso de que tu entrada s?lo contenga una imagen, o un video, sin nada de texto, tendr?s que dar uno o m?s saltos de l?nea (ENTER) al final del c?digo de tu imagen o de tu video, ya que si no lo haces la imagen no se formar? en miniatura y se distorcionar?.

Es compatible con todos los navegadores m?s conocidos (arriba se especifica cu?les) seg?n la ?ltima versi?n actual de cada uno de ellos.

El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas im?genes que usa la plantilla est?n alojadas directamente en base 64 por lo que no depender?s de ning?n servicio externo para cargarlas.

Espero que sea de su entero agrado, que la disfruten, y que no retiren los cr�ditos :P

ACTUALIZACI?N 4/abr/2013
Si en la pesta?a Dise?o no ves la sidebar, entra en Plantilla | Edici?n de HTML y elimina estas partes en color rojo:

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "archive"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' mobile='yes' title='Categorías' type='Label'/>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>
</b:if>
</b:if>
</b:if>

Eso har? que la sidebar aparezca en la secci?n Dise?o. Si notaras que con ese cambio tarda un poco m?s en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese c?digo despu�s de haber hecho todas las modificaciones deseadas en la sidebar.

ACTUALIZACI?N 12/abr/2013
Se ha modificado la plantilla para resolver el problema de las entradas que ten?an a?adido el salto de l?nea (Leer m?s) manualmente. Tambi�n se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.

Monday, March 4, 2013

Twitcker, para mostrar los ?ltimos tuits en forma de marquesina

Twitcker es un servicio gratuito que nos permite mostrar en el blog los ?ltimos tuits en forma de marquesina, como si de un anuncio de noticias se tratara. Lo que hace es mostrar en una barra todos los ?ltimos tuits que hemos publicado, pudiendo configurar la velocidad con la que pasan, la forma como se muestran, los colores, enlaces, etc.
Puedes verlo funcionando aqu? mismo, arriba de esta p?gina.

Para conseguir este gadget de ?ltimos tuits entra a Twitcker y da click en el bot?n Sign in with Twitter.

Autoriza a la aplicaci?n para que se cree un script ?nico para ti.

Una vez que lo hagas ver?s el nombre de tu usuario, y debajo un link para configurar las opciones de la barra de tuits.

Ah? ver?s una serie de opciones para tu barra de tuits, como por ejemplo controlar la velocidad con la que pasan los tuits, el color de la barra, si se muestran como marquesina o m?quina de escribir, etc.

Una vez que termines de personalizarla da click en Create y tendr?s el c?digo, c?pialo y luego entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega el c?digo que has copiado.

La posici?n puedes elegirla para que se muestre arriba de la p?gina, al final, o en un lugar concreto; si deseas esta ?ltima opci?n (por ejemplo para ponerlo en la sidebar) elige Own container dentro de Twitcker position. Ah? escribe TwitterTicker. Despu�s en un gadget HTML/Javascript agrega esto:

<div id="TwitterTicker">
...Aqu? el script...
</div>

Ah? deber?s colocar donde se indica el script que te da Twitcker. De esta forma podr?s mostrar tu barra de tuits en cualquier parte del blog.

Como puedes ver es un gadget bastante simp?tico que puede ayudarnos a conseguir m?s seguidores ya que nuestros lectores podr?n leer en el blog un poco de lo que tuiteamos. Adem?s que, el gadget est? lindo ?no creen?