Ciudad Blogger

Inicio » Archivos de abril 2012

Listones para el blog de los Juegos Olímpicos (Londres 2012)

Abrir dos o más enlaces con un solo link

Agregar Lazy Load en Blogger, para acelerar la carga del blog

Lazy Load es un script de jQuery que ayuda a agilizar la carga del blog cuando en él se usan muchas imágenes, esto es porque el script detiene la carga de las imágenes, o sea que, las pone en modo de espera para que primero carguen los demás elementos, y conforme se baje el scroll de la página irán apareciendo las imágenes.

Esto supone una mejora de velocidad en la carga del blog, sobre todo cuando en él hay imágenes muy grandes o una cantidad significativa de imágenes.

Además, usaremos el efecto FadeIn para que cuando las imágenes aparezcan lo hagan en forma de desvanecimiento.

Puedes ver un ejemplo en este blog de pruebas, si bajas el scroll poco a poco irás viendo cómo las imágenes van apareciendo.

La instalación es tan sencilla que sólo requiere un paso, y es que nos evitaremos alojar el script en algún servidor, ya que lo nos interesa es la velocidad, alojaremos el script directo en la plantilla.

Para poner Lazy Load en tu blog ingresa en la Edición HTML de la plantilla y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({
effect:'fadeIn',
placeholder:'http://lh3.googleusercontent.com/-9nuRfZdo5ro/T5cYmFT_X9I/AAAAAAAACa8/K9aG-gcgsaI/s1/bg_placeholder.png'
});
});
//]]>
</script>

Guarda los cambios y listo.
Si ya tuvieras jQuery deja sólo la versión más actual.

Como puedes ver el script no es tan extenso en comparación de otros que usamos con frecuencia, agilizará la carga del blog, y además aparecerá las imágenes con efecto de desvanecimiento.
Sin embargo, sólo se recomienda su uso cuando el blog contiene muchas imágenes, de los contrario no tiene caso llenar el blog con otro script ya que además no representará una mejora sustancial ni el el tiempo de carga ni en el tamaño de la página.

(24/abr/2012) ACTUALIZACIÓN: si te da problemas con las imágenes de los gadgets, y/o quieres que se aplique sólo a las imágenes de las entradas, entonces cambia lo que está en color rojo por esto:

$('.post img').lazyload({

Menú horizontal con subpestañas y buscador integrado

El siguiente menú está hecho únicamente con CSS, es un menú horizontal con subpestañas, y del lado derecho tiene un buscador redondeado.

Es un menú práctico para los que no requieren de menús muy complejos o prefieren no usar uno que requiera scripts y/o demasiadas imágenes, además, la instalación y personalización es bastante sencilla, y por si fuera poco es bastante funcional, ya que al tener el buscador integrado puedes tener dos elementos en una misma área.

Puedes verlo funcionando en este blog de pruebas, si usas el buscador escribe la palabra y presiona ENTER.

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:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#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(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en la sección de Diseño, y en un elemento HTML/Javascript pega la estructura del menú:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></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>
</ul>
</li>
<li><a href="#">Pestaña 3</a>
<ul>
<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><a href="#">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></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>
</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></div>

Agrega las URLs de los enlaces donde se indica así como el nombre de tus pestañas.

En el primer código puedes ver las áreas que se pueden personalizar tales como el color, etc.

La apariencia redondeada del ancho de todo el menú también es CSS, así que si usas un navegador antiguo no se verán esos bordes.

Si quisieras agregar otra pestaña entonces añade antes del último </ul> en color azul una línea como esta:

<li><a href="URL del enlace">Pestaña 5</a></li>

Si quisieras que ésta tenga submenús entonces el código que deberás poner es este:

<li><a href="#">Pestaña 5</a>
<ul>
<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>
<li><a href="URL del enlace">Pestaña 5.4</a></li>
</ul>
</li>

Sin embargo, se recomienda no poner muchas pestañas, ya que si se excede entonces las pestañas se mostrarán en un segundo renglón.

Y eso es todo, ¿apoco no fue sencillo?

Elegir cuántas entradas mostrar en las páginas de Etiquetas

Aumentar imágenes al pasar el cursor con efecto deslizante

Hay muchos métodos para expandir imágenes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto.

Puedes ver el demo aquí mismo pasando el cursor sobre esta imagen en miniatura:

Para lograr este efecto en tus imágenes ingresa a la Edición HTML y agrega antes de </head> el script:

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>

Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Agrega la URL de la imagen donde se indica y listo, así de fácil y sencillo.
La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color azul deberás poner el tamaño que tendrá la miniatura.

Nada complicado ¿verdad? ;)

Mitos y realidades sobre los dominios personalizados

Tener un dominio propio está al alcance de la mayoría, sin embargo algunos se compran un dominio por las razones equivocadas y otros dejan de hacerlo también por razones equivocadas.

Vamos a ver cuáles son los mitos más frecuentes sobre los dominios propios y cuál es la realidad ante ellos, para que antes de que te decidas a comprar un dominio tengas claro lo que es y lo que no es.

MITO: Si tengo un dominio personalizado Blogger no podrá eliminar mi blog nunca.

FALSO. El blog te lo provee Blogger, por lo tanto tiene la facultad de eliminar tu blog si incumples alguna(s) de las Políticas de Contenido. No importa si tienes un dominio propio o no, si Blogger considera que has incumplido una de sus políticas podrá eliminar tu blog sin excepción alguna.

Eso sí, si tuvieras un dominio propio puedes seguir usando ese dominio en cualquier otro blog o página web, ya que el dominio sí te pertenece por el tiempo que lo hayas comprado.

MITO: Si compro un dominio tengo que contratar un servicio de hosting.

FALSO. Dado que los blogs de Blogger se alojan en blogspot.com no hace falta ni es necesario contratar un plan de alojamiento con ninguna empresa ya que todo el contenido de las entradas se aloja en Blogspot y las imágenes en Picasaweb.

Es posible que cuando solicites información en alguna compañía te quieran vender también un plan de hosting, pero al menos en Blogger no es necesario contratarlo.

MITO: Para comprar un dominio tengo que hacerlo desde Blogger.

FALSO. Ciertamente comprarlo desde Blogger es práctico para quien no desea meterse en cuestión de configuraciones ya que Blogger lo configura por nosotros, sin embargo puedes comprar tu dominio con la empresa que tú elijas y prefieras.

MITO: Si cambio a un dominio personalizado perderé mi Page Rank.

CIERTO. El Page Rank (PR) recae sobre el dominio, por lo tanto, si compras o cambias de dominio perderás el PR que tuvieras, pero no te alarmes, en poco tiempo el sistema asignará nuevamente el PR que tenías, aunque algunas veces este PR suele ser más bajo que el que poseías con anterioridad.

MITO: Tener un dominio propio me ayudará a tener más visitas.

FALSO. Un dominio personalizado puede ayudar a que la gente memorice con mayor facilidad la dirección de tu blog, pero no influye en el número de visitas que tengas o el posicionamiento en los buscadores.

MITO: Si tengo un dominio propio mi blog se verá más profesional.

CIERTO, pero no tanto. Un dominio puede crear una marca, y con ello tus lectores podrán pensar que tu blog va en serio, pero el dominio no lo es todo, es sólo una pieza más del rompecabezas. Si quieres que tu blog se vea profesional deberás trabajar en el contenido de tus publicaciones, tus imágenes, tu reputación, la constancia y el diseño de tu plantilla. Sin todo lo anterior el dominio se verá tan simple como eso, un dominio más.

MITO: Con un dominio personalizado ya no podré editar mi plantilla.

FALSO. El dominio sólo está en la dirección del blog, no interfiere en nada de la interfaz de Blogger. Ya sea que tengas un dominio propio o no, podrás seguir publicando tus entradas y editando tu plantilla como siempre lo has hecho.

MITO: Si tengo un dominio propio y luego cambio a blogspot perderé visitas.

CIERTO. Si tu blog ya está indexado con el dominio propio y luego cambias a blogspot cuando la gente haga click en esa dirección no verá nada, porque ese dominio ya no existe, o mejor dicho, ya no está vinculado con tu blog. Sin embargo, con el paso del tiempo los robots actualizarán de nuevo la información de tu blog, y con ello la nueva dirección que tengas.

MITO: Tengo que ser mayor de edad y contar con tarjeta de crédito para poder comprar un dominio.

FALSO. No es necesario contar con la mayoría de edad para ser dueño de un dominio, ni tampoco necesario tener una tarjeta de crédito; muchas empresas aceptan otras formas de pago como PayPal o depósitos bancarios. Por supuesto que esto último de los pagos depende de cada empresa.

Seguramente habrá más mitos y dudas en torno a los dominios personalizados, lo importante es que antes que tomemos la decisión de hacernos de un dominio tengamos claro todo el panorama para evitar pasar un mal rato por algo que no sabíamos.

Si estás a punto de comprar un dominio quizá quieras conocer todo lo que hay que saber antes de comprar un dominio propio.

Menú vertical drag and drop con jQuery

jGlideMenu es un menú vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero además, se puede navegar a través de sus pestañas de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran número de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.

Para que entiendas mejor este menú hay que verlo en acción en este blog de pruebas, ahí puedes arrastrar el menú, navegar en sus pestañas, y cerrarlo.

Para poner en tu blog este menú vertical, primero descarga este archivo, descomprímelo y súbelo a un hosting.

Luego ingresa a la Edición HTML de tu plantilla y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
]]></b:skin> los estilos:

.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamaño de la descripción */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripción */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(http://lh5.googleusercontent.com/-1rqbbkHaAGc/T4OCip4rUBI/AAAAAAAACX0/L8kq4WQ_y-4/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atrás" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atrás" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}

Ahora en un elemento HTML/Javascript pega la estructura del menú:

<div class="jGM_box" id="jGlide_001">


<ul id="tile_001" class="jGlide_001_tiles" title="Menú" alt="Descripción del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>


<ul id="tile_002" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>


<ul id="tile_005" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>

</div>

Agrega las URLs de los enlaces y los nombres de las pestañas y listo.
Si quieres agregar más enlaces al primer nivel añade en esa área otra línea como esta:

<li><a href="URL del enlace">Enlace 12</a></li>

Si quisieras que el enlace tenga otro nivel entonces la línea será así:

<li rel="tile_0010">Enlace 5</li>

Luego en el área del segundo o tercer nivel agregarías un fragmento así:

<ul id="tile_0010" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>

Aquí hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre serán únicos.

Sí, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.

En el área de los estilos están las partes que podemos personalizar. Si quisieras que el menú esté estático, es decir, que esté en la sidebar y no se arrastre, entonces elimina del primer código el script que está en cursiva. Y de los estilos elimina esta parte:

position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */

Cuando sean muchos enlaces entonces aparecerán unas flechitas, pasando el cursor sobre ellas se mostrarán el resto de los enlaces ya sea hacia arriba o hacia abajo.

A lo largo de la estructura del menú verás que puedes cambiar el nombre Menú así como las descripciones.

Es un menú con jQuery así que ya saben que hay que tomar en cuenta la versión que sea sólo una, y la compatibilidad con Scriptaculous.

Vía | Sonicradish

Por si Scriptaculous te dejó de funcionar

"Apagar las luces" para ver videos

Este es uno de los scripts que más nos gustan a los que disfrutamos ver videos en la red, es un script de Janko y funciona con jQuery.

Se trata de "apagar las luces" para que todo lo que haya en la página se oscurezca menos el video, así no habrá otros elementos que nos distraigan mientras vemos el video y nos sentiremos como en el cine :)

Puedes ver un ejemplo aquí mismo, presionando el enlace que dice "Apagar las luces".
Cuando lo desees puedes presionar de nuevo el enlace y las luces se encenderán.

Apagar las luces

Para poner este efecto de "apagar las luces" en el blog, entra en la Edición HTML y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Prender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Después agrega antes de ]]></b:skin> los estilos:

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Luego, antes de </body> agrega esto:

<div id='oscuridad'/>

Y por último, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este código:

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videoLuces">
...Aquí el código del video...
</div>
</center>

Agrega donde se indica el código de tu video y listo. A disfrutar los videos con las luces apagadas.

Recuerda que el truquillo usa jQuery, así que si usas Scriptaculous o Mootools deberás aplicar un parche, y si usas otra versión de jQuery deberás usar sólo una.

Bloques entrecomillados con :after y :before + ejemplos

Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Ahora no nos limitaremos tanto, y usaremos las pseudoclases :after y :before para que los bloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Además usaremos un poco más de CSS para hacerlos más vistosos.

La pseudoclase :before nos ayudará a poner "algo" antes del bloque entrecomillado, mientras que :after lo pondrá después.

¿Y qué podrá? Aquí entra la propiedad content a echarnos la mano, podremos usar comillas o imágenes para darle estilo a nuestro bloque.

El código base para entender de lo que hablamos es este:

.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

Ahí indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: “
Y al final del bloque usaremos la comilla de cierre \201D que es esta: ”
También podemos usar open-quote y close-quote en su lugar.

.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

O bien, una imagen, en la cual la primera sería la imagen de la comilla de apertura y la segunda sería la imagen de la comilla de cierre:

.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:

.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:

.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:

.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotación */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:

.post-body blockquote {
background:#CEECF5; /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(http://lh5.googleusercontent.com/-Nmwu0XhvtUo/T3ZZxMU-NcI/AAAAAAAACV8/xzcIdlZS-tg/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(http://lh3.googleusercontent.com/-oMrf65cX6b4/T3ZZxJ583jI/AAAAAAAACWA/KYNE0jvo8Mg/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

Cualquiera de los códigos anteriores los puedes poner en sustitución de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde están las anotaciones del área a la que corresponde cada estilo.
En el caso de las comillas verás esto:

font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;

font-family es el tipo de fuente, font-size el tamaño de la comilla, font-weight lo pone en negrita con la declaración bold, line-height es el espacio entre líneas, vertical-align es para alinearlo verticalmente, y padding-top el espacio respecto a la línea de arriba.

Ten en cuenta que algunos de estos estilos sólo se verán en navegadores modernos -ya sabes por cuál lo digo- , pero en el resto se ve perfectamente bien.

Listones para el blog de los Juegos Olímpicos (Londres 2012)

Abrir dos o más enlaces con un solo link

Agregar Lazy Load en Blogger, para acelerar la carga del blog

Menú horizontal con subpestañas y buscador integrado

Elegir cuántas entradas mostrar en las páginas de Etiquetas

Aumentar imágenes al pasar el cursor con efecto deslizante

Mitos y realidades sobre los dominios personalizados

Menú vertical drag and drop con jQuery

Por si Scriptaculous te dejó de funcionar

"Apagar las luces" para ver videos

Bloques entrecomillados con :after y :before + ejemplos

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog