Instala efecto de zoom en tus imágenes con JQuery

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.

Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.

Implementarlo sólo requiere cuatro pasos: primero descarga este archivo, descomprímelo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo .js' type='text/javascript'/>

Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSTeSYTy4keQVgip7Gt2l6Zt8TRqdRGfteJ62wLlAStsHH_zaeI7HKh962uBfHOupLg3U54DbSLX-7VdpA3wEk8pV-kcjWW7_1boPKp-ub94YHk46XJwVjikIRiuzYcAXITonGUCpwmpfA/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:

<div id="view">
< img id="image" src="URL de la imagen" width="400" />
< /div>

Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.

Read More

Cambiando los datos del pie de post

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Cambiando de lugar los datos del pie del post (post-footer)

En un artículo anterior explicaba la manera de trasladar la línea 'Publicado por...' desde el pie de las entradas hasta el título del post, situándola bajo éste.

Varios lectores me han preguntado si sería posible mover también la línea de 'Etiquetas', la que muestra la hora de publicación de una entrada o el enlace que contiene el número de comentarios publicados, al mismo sitio.

Además de poderse hacer, tan solo requiere cortar y pegar un par de códigos. Una tarea sencilla que conlleva poco tiempo pero con la que se debe tener cuidado y paciencia (omitir un simple carácter o una etiqueta hará que no podamos guardar la plantilla).

Diseño>Edición de HTML>expandimos artilugios

Para trasladar la hora de publicación busca este bloque:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Elimínalo. Inserta el que presento en esta entrada justo debajo de la línea <div class='post-header-line-1'>.

Si trasladaste ya la línea 'Publicado por...' bajo el título incluye el código debajo...

<div class="post-header-line-1">
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
AQUI EL CODIGO

Y obtendrás algo como esto:



Para mover la línea de las etiquetas encuentra un bloque de código similar a este:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Bórralo e instera el bloque resaltado en color naranja bajo lo que te muestro a continuación:

<div class="post-header-line-1">
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<br></br><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

La etiqueta <br> y su cierre </br> mostrarán un salto de línea. Con esto haremos que las etiquetas aparezcan bajo la hora y el Publicado por...



Ahora solo nos queda trasladar el enlace que muestra el número de comentarios. Para ello, busca algo parecido a esto:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Cópialo y bórralo. Debes situarlo bajo el bloque naranja anteriormente citado. Al hacerlo, el enlace aparecerá al lado de las etiquetas, a la izquierda. Para situarlo en el lado derecho reemplaza la primera línea del código por esta otra (a la que tan solo agregué el atributo float):

<span class='post-comment-link' style="float:right;">

Así mismo, para conseguir un salto de línea, utiliza la etiqueta <br> y su cierre </br>.

Este ha sido el resultado final que obtuve con dos saltos de línea (uno en 'Etiquetas' y otro en 'Comentarios') y al aplicarlo todo:

Read More

Cómo instalar títulos en la sidebar con fondos aleatorios

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Pués como dice el título, con este truco vas a conseguir que el fondo de los títulos de la sidebar (títulos de los gadgets) sea aleatorio, con la posibilidad de elegir varias imágenes de fondo.

Para insertar el truco en tu blog realiza los siguientes pasos:

Diseño>Edición de HTML>expandimos artilugios

1) Busca el siguiente bloque (si no aparece en la plantilla, ve directamente al paso 2):

.sidebar h2{
background: #ffffff url(DIRECCION FONDO) no-repeat top left;
text-align: center;
padding-top:15px;
}

Ten en cuenta que no debe ser igual a este, pero debe contener la línea que comienza por background.

Borra esta línea:

background: #ffffff url(DIRECCION FONDO) no-repeat top left;

2) Ahora busca la etiqueta </head> y encima pega este script:

<script type='text/javascript'>
//<![CDATA[
var banner= new Array()
banner[0]="FONDO 1"
banner[1]="FONDO 2"
banner[2]="FONDO 3"
var random=Math.floor(3*Math.random());
document.write("<style type='text/css'>");
document.write(".sidebar h2 {");
document.write(' background: url("' + banner[random] + '") no-repeat;');
document.write("}");
document.write("<\/style>");
//]]>
</script>

Sustituye FONDO X por la dirección de la imagen de fondo que llevará el título del gadget.

Ten en cuenta que en cada espacio (FONDO 1, FONDO 2, FONDO 3) debes incluir una dirección diferente, de manera que la imagen cambie automáticamente al actualizar el blog.

Si deseas agregar más imágenes de fondo, agrega líneas como esta, cambiando las cifras:

banner[3]="FONDO 4"
banner[4]="FONDO 5"

Por el contrario, si lo que deseas es tener simplemente dos fondos aleatorios, elimina esto:

banner[2]="FONDO 3"

Al agregar o borrar líneas para incluir imágenes de fondo, cambia el valor 3 de esta parte del script por el número de líneas que tengas en total:

var random=Math.floor(3*Math.random());

Por último Guarda la plantilla:




Si tienes problemas para realizar este truco, no olvides escribir un comentario para consultarme.

Algunas plantillas tienen nombres diferentes y sólo será necesario localizar dicho nombre para que el truco funcione a la perfección.

Read More

Cómo instalar un Slider con efectos multiples

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Coin Slider: Un slider de imágenes con múltiples efectos

9 de marzo de 2011 | Publicado por El Potro |   

Coin Slider es un slideshow de fotos hecho con jQuery que a diferencia de otros puede mostrar diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo a las imágenes.

Estas animaciones podrán hacer una mejor presentación de las imágenes que deseas mostrar y que bien podrán servir para enlazarlas a tus entradas que deseas destacar.

El slider además de tener distintas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los enlaces Anterior y Siguiente, o con los botones de abajo.

Para agregarlo en tu blog primero descarga este archivo, descomprímelo y sube el archivo descomprimido a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo js' type='text/javascript'/>
< script>$(document).ready(function() {
$(&#39;#CoinSlider&#39;).coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
< /script>

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega estos estilos:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

El siguiente paso es agregar la estructura del slider, para ello entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:

<center>
< div id="CoinSlider">

< a href="URL del enlace">
< img src="URL de la imagen"/>
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

< /div></center>

Cambia la URL del enlace y la URL de la imagen donde se indica. De igual forma puedes agregar una pequeña descripción a las fotos si así lo deseas, sino sólo elimina todo esto:

<span>Descripción de la imagen.</span>

Si quieres añadir más imágenes sólo agrega antes del último </div> otro fragmento como este:

<a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

En el primer código hay unas opciones que podemos modificar:
delay: 3000, es el tiempo en milisegundos que durará cada imagen.
hoverPause: false, es el control de pausa que aparecerá al pasar el cursor sobre la imagen, con true se activa.
navigation: true, son los enlaces Anterior y Siguiente que aparecen al pasar el cursor, con false se desactivan.
width: 565, es el ancho del contendor.
height: 290, es el alto del contendor.

Si cambias el ancho del contendor también deberás cambiar el ancho en color verde de los estilos (width: 545px) que es el ancho del área de la descripción de las imágenes.
Si deseas cambiar los textos Anterior y Siguiente necesitarás editar el archivo coin-slider.min.js, buscar esas palabras y cambiarlas por otras.

Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.

Autor |WorkShop

Read More

Instala una barra flotante en las entradas del Blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Barra flotante para compartir las entradas del blog con opción de cerrar

En una entrada anterior expliqué la forma de obtener una preciosa caja de suscripción para el blog. Esta caja ofrece a los lectores los enlaces de suscripción de nuestro blog, así como el link hacia nuestro perfil en Twitter o en Facebook.

Los dos últimos enlaces guardan una pequeña similitud con este truco. He construido una herramienta muy novedosa, una barra para compartir los artículos del blog con opción de cerrar y que aparecerá únicamente en las páginas de entradas individuales, flotando en el lado izquierdo de la pantalla.

Un widget muy profesional y cómodo, que se puede o no ocultar -a opción del lector- y que permitirá difundir el artículo que estemos viendo en Twitter, Facebook, Google Buzz y Stumble Upon.

¿Lo mejor de todo? No tienes que editar absolutamente nada en el código, simplemente copiarlo e implementarlo en la plantilla con dos sencillos y rápidos pasos.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esto encima (antes):

<script type='text/javascript'>function Compartpostblcn(){
div = document.getElementById("Compartpostblcn");
div.style.display="none";}
setTimeout(Compartpostblcn, 90000);</script>
<link href='https://sites.google.com/site/editoriosus/fds/blcnCompartepost.css' rel='stylesheet' type='text/css'/>

Ahora busca la etiqueta <body> en tu plantilla e inserta este bloque de código debajo:

<b:if cond='data:blog.pageType == "item"'><div id='Compartpostblcn'><a href='javascript:Compartpostblcn();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOThK8pFsaPP_6ZsV5KJvHiQW3vAArlyx8nSaEO8EDmMhZ5VLNfgIeVtxxrL8-LJoUKe1XHKz0a6kTvkrr6_uxZ2VQ6x3KzABskQuUfnaDH7t5XymTrwzF2QHzGQ1M4VZmWURPXj61O2rl/s320/blcerracompar.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:8px;padding-top:4px;' title='Cerrar'/>
<div class='JJblccomp1'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><div class='JJblccomp1'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='JJblccomp1'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='JJblccomp1'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/><a href='http://goo.gl/favZ'><img alt='Stumble Upon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAuBuRCuR4wg1su7WsRHgrtXsMDu47d3nRih2jiwHmx637bWxoLM0YgaPOyUzzUE3rUOP-sjclhWC2KrWGZZDqWv-QmTrfRL9r2IJYzgAAU9aD839f7WcmxFaaIxkp98vZMrRWve8w62N/s320/blobbt.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:2px;padding-top:4px;'/></a></div></a></div></b:if>

En caso de no encontrar esta última etiqueta, prueba a escribir en el buscador de tu navegador (puedes abrirlo pulsando las teclas Ctrl y F simultáneamente-) <body o prueba con esta línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Guarda la plantilla para terminar. No olvides que la barra para compartir aparecerá en las páginas de posts individuales. Accede a una entrada cualquiera y comprueba el resultado.

Read More

Traductores para Blogger: Instala un sencillo traductor de banderas en un paso

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Traductor de banderas desplegable en tu blog

Al igual que el traductor anterior, este ofrece a los lectores de tu blog unas banderitas que actúan como botones, pero en este caso, con una nueva característica: la presencia de un botón general que las mantiene escondidas y las muestra al ser pulsado.

En la siguiente imagen puedes comprobar el resultado:



Además, la instalación de este nuevo y mejorado traductor es más sencilla y rápida ya que no requiere edición alguna del código.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega esto en su interior:

<center><script type='text/javascript'>function blmostrocult(blconted) {var c=blconted.nextSibling;if(c.style.display=='none') {c.style.display='block';} else {c.style.display='none';}return false;}</script><style>.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;}#German img{border:0;margin-top:6px;}.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0;}.google_translatextra:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:none;}</style><a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5n9Cm7QQfyDcGzvghr4_Vi_0wHXjwhEgcGU4jUDNjhNVMkZiC-luC-9r9dDLIvQTz7iAFZJKz98-kmHGATTwI2ByN4VLbIz2xy7Eqzlx3P_Bdp2zM6xH9J5araR5VS_5eBSl43Gx8Dnyb/s320/bltrad1.png"/></a><div style="display: none;margin-top: 18px;"><div style="text-align:center;"><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6Ejt4-HczuE3DIzVOz2qoGTgjQuKO4cIEPE1hEMzZIknSl-1y1Q8nB7Lfpjw0lJupz3fqB7ftitCr9_yklsMc-ltky045SYu4VwKp9_VE4qKmsVfgX5NeH6xCj9UnFO-l7RxpHp2_OjQ/s320/blenglish.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Alemán" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="Alemán" border="0" align="absbottom" title="Alemán" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rlV_XW7odmP1KD6HAXX5B4UOswSXfXfiZg20oKcCj-pLI085QxCrvs1MiHkZ7vQSIeK5m2F1RSCvx-z9hcuO_bGJ7gDkzSunNib6i82qzKt599G7bTL4dbpweoG2lew6LX4CpIOt7vk-/s320/blaleman.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Francés" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="Francés" border="0" align="absbottom" title="Francés" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OoWqJxvUlUX8J2uf3rQA-q_YV9HkYrttNTKcY8ACZXS1Nl3HGNzTRsb6WgXStGAncLeY1ZKZLQtVufRT30WQXhQuYoAoiPRooR42bYVLVQPhd0vFRRAbRpKIs2TakpZyBKXcllUnpRGV/s320/blfrances.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Español" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Español" border="0" align="absbottom" title="Español" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-gDlEmbWgpZgsnME53kMf2YvMrp0vhQDzIQdWe2QxdZKKGEpkQ8ozVgzHDhCsZ4L9jZXcwOBBgm7JlEyjq1qY8GjR4J5pznI3Yr5UAy2AphmtxE83fu9i1UKLV3Jr9mW9UjEwo20xqV1/s320/blespanol.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italiano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italiano" border="0" align="absbottom" title="Italiano" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSHU2DOVrLjdpm_kyck-ewksw5haDGEGVJSnAdF31O0-lZ1wgZBpXYXgzz49sEJbyhHf3W67SlvQvjRF-_v7w8_O9TH9foU_fYKjVfDLHHnOJdxqav_qDBTUFy2g7LDk8JOWD_Cr8OfX7/s320/blitaliano.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Netherlands" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Netherlands" border="0" align="absbottom" title="Netherlands" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMw6-TRJ90CxJAmSxQ6F5I_hB0N5vuBkNZaniTI_2pg2UDUQaxUxtrweYRSWMkwQ3y2SKhUgvaVdUeUhgraZHA4mKkGj3RBC3VtCk0KNZepIIcPELN4U0UAgXamVhvhdU-9O8O3lxfkuYq/s320/blneder.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Ruso" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Ruso" border="0" align="absbottom" title="Ruso" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC5Qz_4NsbyOzASjkDiywQ55OsytASyfkerC83PsZaRnFtf1YWxLelWyvfs08leYJGKvD7f6M6rwFpWMK6n8tinuJOP6SsoTWafdDbd_dMi21OkuOL8mk6xF8JeerATDwgninY60808CJI/s320/blrusia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portugués" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portugués" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAqDAyob46GFi3wgJt9PnDR5XmwC-MFx7irOMKia2YZuS_vXUYSiMCaqOJGjlZqTRnRF96DctGRkIn3JUcumqPylvN50MWqF-3G_iqRMBUSbkXSGXFq-B5gqCG8O7qu0iwdGwaW1KdOxA/s320/blbrasil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chino Simplificado" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chino Simplificado" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYU46NUXqFVI38MfoGaiNlgXCbrDPnr2NazaewNGaw3WGmdHRhHZi5CXLCCM_zwa6bfHRP416c8HaYd4whiGiUseOUda1nq9poNmC9mVO8QEcHusNsovL5ob6Dror_ZMMBdHSvklR0pYW/s320/blchina.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japonés" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japonés" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTQMsxUDv3wcfa9sHlcytQ-iC7kvip0BmsknAMryblRsdpED0Ja4UN4gppijoRlh38Y4o3xsun3In112yGnbiWaJJskwIdRi9uY_ysjonHOtB0wBg53_k7xNBx2335LFwVK2WEtkYTlgU/s320/bljapones.png" style="cursor: pointer;margin-right:8px" width="24"/></a><div><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Coreano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Coreano" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRcHJnB_E-cGMpnFDpvCrZQ6zstnwYO6V8Ly2PJDu63qmpmRIMS-PHR__X1Bf6ppAe8v4f2XdAcYl5KltvFWALYurFM6HAiiFpbyO8DJq4WJhlUx_9dNyJ7XUpXpSTAlXCZF6tabr6CeBH/s320/blcoreano.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Árabe" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Árabe" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVdFBtvLygi6xDQn7MMPaFDQZ5BhyphenhyphenQkdsnqUUz3wxC7WmhnrAbtoyPOe5UkVFybK7Oyxp7TpUytonunNoY8jQd0KgQo2DyaXIcRDyMui-alGMw8LsyfQdwuMWrdmgHPmoimbl2-s3ykmH/s320/blarabe.png" style="cursor: pointer;margin-right:8px" width="24"/></a><center><a href="http://goo.gl/favZ"><div id="German"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUyNvJliF9X3q_ywiaCTrFICwiS9pKG4dsyuTiDynjhbqmx3_flVlu51Gtqx3FA4HQdvzbBz8n3wvLcQEUYz5bbm69tZjiND1EWBGYJKO4CbE4rHGLFbLN5cPQmgOI0eQkeSPwqWPuRhP/s320/aleman.png"/></div></a></center></div></div></div></center>

Guarda el gadget para terminar.

Read More

Videos: Truco para "apagar" y "encender" las luces

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

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/AVvXsEjNYTCgoM2KKzm448FG1DfBrQUDvcp3iD2nwXvhbIlefFYIvuaVK4cg3VBpTjRYjZen0ZAnWxvzkbOa8Jzg80gvKhICsh4f5HAbvG8SkqcA6X2WoneKha_MNK-gSIVy0NEHD_6bAJ0nxy0/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/AVvXsEiB97L58pMU5idZ3okeQTFQCLBvpd03q2r5fB_esuVht3T_r_7wxBZ4rhBakP-mRB9SOzVykgYGkDIspDmhXnczCRTxcCB3K17cCqEW_0uQhMEOTH11o8FhMesitdXRXNOnE8jhle63Qpw/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.

Read More