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

Quienes configuran el blog para mostrar un n?mero reducido de entradas en la portada usualmente desean que este n?mero de entradas sea el mismo cuando se navega por las p?ginas de Etiquetas.

Sin embargo Blogger muestra por defecto 20 entradas en esas p?ginas, o menos en caso de que la velocidad de carga del blog ande lenta, por aquello de la autopaginaci?n.

Como ese n?mero de entradas depende de Blogger lo que podemos hacer es modificar los enlaces de las etiquetas para que muestren el n?mero de entradas que deseamos.

As? que entramos a la Edici?n HTML de la plantilla, marcamos la casilla Expandir plantillas de artilugios y buscamos este fragmento:

'data:label.url'

Con mucho cuidado c?mbialo por esto:

'data:label.url + "?max-results=5"'

Si tuvieras m?s de una vez ese c?digo aplica el cambio en todos los que encuentres.

En color rojo est? el n?mero de entradas que quieras que aparezcan.

Eso har? que en el enlace de la etiqueta, o en el gadget de Etiquetas se cambie la URL para mostrar el n?mero de entradas que hemos elegido.

Si tuvieras un men? con las URLs de las etiquetas de forma directa entonces habr? que a?adir un par?metro a esos enlaces. Por ejemplo, la URL de una etiqueta es as?:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta

Y se le a?adir?a lo de color azul:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta?max-results=5

Nuevamente en el n?mero de color rojo podemos decidir cu?ntas entradas se mostrar?n.
Y con eso podr?s elegir cu?ntas entradas mostrar en las p?ginas de Etiquetas, siempre y cuando Blogger no te limite con el n?mero de entradas respecto a la autopaginaci?n.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_krXKhP177xP1eJqKLnpeL040YNJ0ecnOJr4sbxND0ND3Ul81US9LlHQCYH_PK-bgQkN1vTLyBLKikDDMnyok-m7UAKf652I3owuLzVNwFQIBhZIrkpbp_GMIbSlhr6t1v_K69NEYLzI/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">

<!-- Aqu? todos los enlaces del primer nivel -->
<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>

<!-- Aqu? todos los enlaces del segundo nivel -->
<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>


<!-- Aqu? todos los enlaces del tercer nivel -->
<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

Desde hace un par de d?as a algunos les dej? de funcionar todo lo que requiere de la librer?a Scriptaculous y Prototype.

Al parecer ha sido por una actualizaci?n de estas librer?as que regularmente usamos desde las Librer?as API de Google.

Si usas Scriptaculous y te ha dejado de funcionar busca en tu plantilla este c?digo:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Y c?mbialo por este:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

ACTUALIZACI?N: Para evitar cambiar el c?digo cada vez que haya una versi?n nueva, se recomienda mejor usar este c?digo el cual se actualiza autom?ticamente:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

Con ese cambio en el script deber? funcionar nuevamente todo lo relacionado con Scriptaculous y Prototype.

Gracias a AdelinaBasquet U.V.V.A. por el aviso.

"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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgld5nNvYEsukeN-nXeanJY93OkOsEjVsKAgB9_XDazea7QZ5zqdCQ_TZOMuRrKklbWGOF8Sw0z6kNKBqfKiQL1vRS2frRJhVH78Zkwpu5wrlwWaJ7d1rlZ4c8C5pi0W1CkPZV4Ph0GB10/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1Qm02vnDpV9oMvfE8tLP8RlQEKWZjIRcH8m8J-d3RetOhtdlHKdjfU6vmUlLAy-3O-I4NGxKhd39I0l-fvLTdEpKViNbwGq0OaggqU82cO3Z7zEe0loDI3-OPG_qPboA-dMzhhd_skk/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� pondr?? 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopswNR_kOxbKh6ksZSfwBRHKchQebe7f-0EiCquXauKDk1Yyn1gmMUMUGcLG4ycHtlrDDt8tQpg0yVal-OihHPshG5OhrxE02VW4EemnYaD_BcdqcBRzeAiWMOFvSiOgYT421sX8dqz0/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRMY0GpswjWZ_AXWPVLNhGipI_E-BDbOL8wp0PZrKLSplugcYiD4yy3gea_5RfDM1Gp7QfXlJMrkFzPM4QcuI2-doaAanf9zGcI_T5EQBkjYC1OA8wZ2QaJdOnokHG-jimOkGrTSu2EM/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.