Ciudad Blogger

Inicio » Archivos de marzo 2011

TriSlider, otro slider con jQuery

La verdad es que eso de TriSlider me lo he inventado yo porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto en la plantilla Dilegno Star y me han pedido que lo publique, así que mientras aparece el nombre real de este slider vamos a llamarlo así.

Aunque está diseñado para mostrar tres imágenes es un slider con un aspecto bastante lindo que estoy seguro que se verá muy bien en muchas plantillas para mostrar el contenido destacado del blog.

Para poner este slider en tu blog primero descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega esto:

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

<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;

$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);

function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}

$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});

var auto_number;
var interval;

$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});

interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);

});
//]]>
</script>

<script type='text/javascript'>
jQuery(function(){
jQuery('#s1').cycle({
timeout: 0,
speed: 1000,
fx: 'fade'
});

});
</script>

Cambia donde se indica, la URL del archivo que subiste previamente.
Luego antes de ]]></b:skin> pega los estilos del slider:

#gallery {
width:616px; /* Ancho del contenedor general */
height:320px;
margin:0 0 20px 0;
float:left;
display:inline;
}

#featured-area {
height: 300px;
width:616px; /* Este ancho debe ser igual al contenedor general */
position: relative;
padding: 11px 0px 10px 0px;
z-index: 1;
}

#featured-area .pics {
position: absolute;
width: 490px; /* Ancho de las imágenes */
height: 298px;
top: 11px;
left: 14px;
}

#featured-area .pics div.excerpt {
background: #fff; /* Color de fondo de la descripción */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* Ancho de los títulos */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%;
}

#featured-area .pics div.excerpt p {
color: #203136; /* Color de la descripción */
width:450px; /* Ancho de la descripción */
height:20px;
}

#featured-area .pics div.excerpt a {
font-size:18px; /* Tamaño de los títulos */
color: #000; /* Color de los títulos */
font-weight:bold;
text-decoration:none;
}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* Color de los títulos al pasar el cursor */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:12px; /* Tamaño del texto de la descripción */
width:450px; /* Ancho de la descripción */
padding:0px 0 10px 0;
}

#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* Mismo ancho de las imágenes */
height:298px;
z-index: 1;
}

#featured-area div#slider-control {
position: absolute;
width: 110px;
height: 296px;
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}

#featured-area div#slider-control div.featitem {
background: url(http://1.bp.blogspot.com/-93SUwnZmfcc/TZKOEIR8cWI/AAAAAAAABNY/Q-hhjsfhSPw/s1600/featitem-bg.png) no-repeat top left;
width: 76px;
height: 77px;
float: left;
padding: 10px 16px 12px 18px;
cursor: pointer;
}

#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6;
margin-top: 5px;
width:67px;
height:67px;
}

#featured-area div#slider-control div.featitem.active {
background: url(http://4.bp.blogspot.com/-pH5-QgY6xUs/TZKOEIbLzDI/AAAAAAAABNQ/NE1HCryGQMc/s1600/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {display:none;}
#featured-area div#slider-control div.featitem.active span.meta {border: 0px;}
#featured-area div#slider-control div.featitem span.order {display: none;}
#featured-area div#slider-control div.featitem span.meta {display:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega la estructura del slider:

<div id='gallery'>
<div id='featured-area'>
<div class='pics' id='s1'>


<div>
<img src='URL de la imagen UNO' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>

<div>
<img src='URL de la imagen DOS' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>

<div>
<img src='URL de la imagen TRES' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>

</div>

<div id='slider-control'>


<div class='featitem active'>
<img src='URL de la imagen UNO' style='width: 67px ; height: 67px ;'/>
<span class='order'>1</span></div>

<div class='featitem '>
<img src='URL de la imagen DOS' style='width: 67px ; height: 67px ;'/>
<span class='order'>2</span></div>

<div class='featitem '>
<img src='URL de la imagen TRES' style='width: 67px ; height: 67px ;'/>
<span class='order'>3</span></div>

</div>
<div class='clear'/>
</div>
</div>

En este último código cambia donde se indica la URL de las imágenes y la URL de los enlaces. Notarás que cada imagen se pone dos veces, esto es porque una es para la imagen grande y otra para las imágenes en miniatura.

Algo parecido sucede con los enlaces, verás que el enlace se pone dos veces, uno es para en enlace de la imagen grande, y otro para el enlace del titulo que está arriba de la descripción.

En el primer código verás en color azul un número, este es el tiempo en milisegundos que tarda cada imagen en cambiar.

Como mencioné antes el slider está diseñado para mostrar sólo tres imágenes porque aunque se podrían agregar más quedaría poco estético, créanme, no les gustará el resultado si agregan más. Sin embargo pueden cambiar el ancho del slider, sólo hay que poner atención en las anotaciones que están en color verde dentro del segundo código y en el tamaño de las imágenes del tercer código.

Ahí mismo en el segundo código hay áreas que se pueden personalizar, como color del título, color de la descripción, etc. En el caso del fondo del área de las miniaturas es una imagen, bueno en realidad son dos, y si se de desea cambiarlas de color hay que editar las URLs de las imágenes que se encuentran también en el segundo código.

La verdad es que así como está el slider se ve muy bien, es de los pocos gadgets que no necesitan nada más que ponerlo en el blog y presumirlo a sus lectores.

Cuando los videos se sobreponen

Barras de colores moviéndose en el fondo del blog

Este efecto nos recuerda a los años del groovy en los que se usaban mucho este tipo de barras y cuadros de colores. Se trata de un script que muestra en el fondo del blog unas barras de colores en movimiento que le dan dinamismo y mucho estilo al blog.

Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo necesitas entrar en Diseño | Edición de HTML y antes de </body> pegar el siguiente script:

<script type='text/javascript'>
// <![CDATA[
var border=50; // Ancho de las barras
var effects=3; // Cantidad veces que se ejecuta el efecto
var speed=50; // Velocidad de la animación (un valor menor lo hará más rápido)
// Aquí abajo ponemos los códigos de los colores
var colours=new Array("#2F1925", "#F8E5DE", "#DCD796", "#F87501", "#9C0A55", "#6594B8", "#90C41A");

/*
1970s Groovy WebPage Effect
(c) 2008 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}

var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}

function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

¿Y luego? Ya nada, con eso es más que suficiente. Ya sólo puedes configurar algunos detalles que se explican al inicio del código en color verde.
Ahí donde se indica puedes poner la cantidad de colores que quieras, sólo necesitas poner los códigos entre comillas y separados por una coma tal como se muestra en el script.

Notarás que los colores tienen cierta opacidad, esto es para que las figuras de los cuadros que se forman se puedan apreciar; si prefieres quitar la opacidad sólo elimina lo que está en color naranja, aunque el resultado final no será igual.

Lindo ¿no?

Tooltips con CSS en forma de burbuja

Este es otro tooltip con CSS que tiene forma de burbuja y que servirá muy bien para dar información extra sobre algún texto. No usaremos nada de scripts, sólo un par de imágenes y CSS.

Puedes ver el ejemplo pasando el cursor por las palabras que parecen enlace:

Un tooltip¡Hola! Soy un tooltip de ejemplo hecho con CSS (también llamada descripción emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Como la forma de la burbuja es una imagen podríamos editar la imagen y obtener otro color por ejemplo rosa o azul:

Un tooltip¡Hola! Soy un tooltip de ejemplo hecho con CSS (también llamada descripción emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar¡Hola! Soy un tooltip de ejemplo hecho con CSS al usuario de la finalidad del elemento sobre el que se encuentra.

Para colocar este tipo de tooltip sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

/* Tooltip 1 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TYoqcSszUVI/AAAAAAAABK0/Ifsdrjbp7vA/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TYoqcHKlteI/AAAAAAAABKo/PsTi6YPRYzA/bubble_filler.gif) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TYoqcSszUVI/AAAAAAAABK0/Ifsdrjbp7vA/bubble.gif) no-repeat bottom;
}

Ahora en tu entrada donde vayas a mostrar el tooltip utiliza este código:

<a href="#" class="tt">palabra con tooltip<span class="tooltip"><span class="top"></span><span class="middle">Aquí va la descripción adicional que mostraremos en el tooltip</span><span class="bottom"></span></span></a>

Y así se sencillo podemos tener un tooltip llamativo sólo con CSS.
Si quisieras el tooltip rosa entonces en lugar del primer código que hemos añadido usarás este:

/* Tooltip 2 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://lh6.googleusercontent.com/_dsEG33PDaHw/TYoqcTduD8I/AAAAAAAABK8/wewmOLHzANk/bubble2.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TYoqcDYY3EI/AAAAAAAABKs/hpGI_hZEJEI/bubble_filler2.gif) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://lh6.googleusercontent.com/_dsEG33PDaHw/TYoqcTduD8I/AAAAAAAABK8/wewmOLHzANk/bubble2.gif) no-repeat bottom;
}

Y si quisieras el azul entonces el código a añadir sería este:

/* Tooltip 3 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://lh5.googleusercontent.com/_dsEG33PDaHw/TYoqcYD5X_I/AAAAAAAABK4/IxTdEPdj-Nk/bubble3.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TYoqcHXFHfI/AAAAAAAABKw/-u8Mseo4ZfI/bubble_filler3.gif) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://lh5.googleusercontent.com/_dsEG33PDaHw/TYoqcYD5X_I/AAAAAAAABK4/IxTdEPdj-Nk/bubble3.gif) no-repeat bottom;
}

Por supuesto que en cualquiera de los tres podemos modificar el color del texto, el tipo de letra, etc.
Las burbujas como mencioné antes, son una imagen por lo que si deseas otros colores habrás que editar las imágenes y cambiarlas por las URLs que están en el primer código.

Antes y Después con jQuery

Si tienes un blog de diseño, maquillaje, o si usas fotos comparativas de un antes y después seguro este script te resultará de gran utilidad.

Se trata de Before/After, un script que funciona con jQuery y que muestra de forma dinámica las fotos para comparar dos imágenes al mismo tiempo. Con arrastrar hacia los lados una pequeña barra podemos ver ambas fotos que se están comparando.

Por ejemplo puedes ver cómo era yo antes y después de que una sensual vampiresa me mordiera.

Ok, ok, eso fue raro, mejor veamos este clásico paisaje del norte de California que es un reconocido Wallpaper de Windows. Así es como esas colinas eran antes y cómo son ahora.

La implementación de este script es sencilla, sólo necesitas jQuery, el script Before/After, y las dos imágenes que vayamos a comparar.

Primero que nada descarga este archivo, descomprímelo y súbelo 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='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('#antesydespues1').beforeAfter({showFullLinks : true});
});
</script>

Cambia donde se indica la URL del archivo que subiste previamente.
Ahora en una entrada o en un elemento HTML/Javascript pega este código:

<div id='antesydespues1'>
<div><img alt='before' src='URL de la imagen UNO' width='500' height='291'/></div>
<div><img alt='after' src='URL de la imagen DOS' width='500' height='291'/></div>
</div>

Agrega la URL de la imagen UNO que es la imagen del Antes, y la URL de la imagen DOS que es la imagen del Después.

Es importante que tenga especificado el ancho y alto (width y height) de cada imagen para que pueda funcionar en todos los navegadores.
Si deseas agregar más imágenes sólo cambia el ID del contenedor, en este caso el contenedor se llama antesydespues1 así que si agregas otro cambialo por antesydespues2 y así sucesivamente, aunque puedes elegir cualquier nombre siempre y cuando todos sean distintos.
Y en el primer código que pegamos agrega otra línea como esta en color azul:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('#antesydespues1').beforeAfter({showFullLinks : true});
$('#antesydespues2').beforeAfter({showFullLinks : true});
});
</script>

Puedes agregar tantas imágenes comparativas como quieras siempre y cuando todos los contenedores tengan un ID distinto y se agreguen las correspondientes líneas en el script.

Debajo de cada contenedor de fotos aparecen los links "Mostrar sólo el Antes" y "Mostrar sólo el Después", al darle click a ellos se muestra las imagenes completas, si deseas ocultar esos enlaces sólo cambia en el primer código donde dice true por false y no se mostrarán.

Autor | Catch my fame

Nuevo gadget de suscripción por Email

Cómo usar cualquier menú en las plantillas del Diseñador de Plantillas de Blogger

Menú horizontal deslizante con Scriptaculous

Desde que cambié la plantilla del blog han sido muchos quienes me han preguntado cómo poner el menú horizontal deslizante que hice.

La verdad es que no requiere mucha ciencia, es un simple menú en el cual he usado una tabla y el mismo efecto de Scriptaculous que usamos para expandir y contraer.

Lo primero que haremos será agregar Scriptaculous y Prototype, si ya lo tuvieras no hace falta añadirlo nuevamente. En esta ocasión lo pondremos arriba de la plantilla, esto es para que funcione en Internet Explorer 7, de lo contrario no se deslizará y marcará error.

Así que entra en Diseño | Edición de HTML y después de <head> pega esto:

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

Luego antes de ]]></b:skin> pega los estilos:

/* Menú CdBlger
----------------------------------------------- */
#menu-cdblger{
background: #0B3861; /* Color de fondo */
width: 100%;
height: 24px;
font-weight:bold;
margin: 0px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu-cb {margin-top:0px;}

#menu-cb li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu-cb li a {
color:#FFF; /* Color del texto */
text-decoration: none;
}
#menu-cb li a:hover {
color:#CCC; /* Color del texto al pasar el cursor */
}
.menu-into {
background-color: #0B3861; /* Color de fondo del submenu*/
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

Y ahora busca esta línea:

<div id='content-wrapper'>

O si usas una plantilla del Diseñador de plantillas de Blogger entonces busca esta línea:

<div class='tabs-outer'>

Arriba de cualquiera de esas dos pega esto:

<div id='menu-cdblger'>
<ul id='menu-cb' style='position: relative; padding-top: 5px;'>
<li><a href='URL del blog'>Inicio</a></li>
<li><a href='javascript:void(0)' onclick='Effect.toggle("categorias1","slide"); return false'>Menú &#9660;</a><div id='categorias1' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8880;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
</tr>
</table></div></li>

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

</ul></div><div style='clear: both;'/>

Por último agrega la URL de los iconos y enlaces donde se indica.
En color verde están señalados los estilos que se pueden cambiar.
Si usas una plantilla del Diseñador de plantillas quizá sea conveniente que elimines todo lo que haya dentro de:

/* Tabs
----------------------------------------------- */

Para agregar más pestañas en el área principal sólo añade otro código como este antes de la última línea:

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

El submenú que contiene las demás pestañas es una tabla y obviamente también se le pueden agregar más enlaces.

Si quisieras agregar otro submenú sólo añade antes de la última línea un fragmento como este:

<li><a href='javascript:void(0)' onclick='Effect.toggle("categorias2","slide"); return false'>Menú &#9660;</a><div id='categorias2' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8881;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>

</table></div></li>

Si te fijas este último código es igual al primer submenú (aunque con menos pestañas) lo único que ha cambiado es el doble ID en color naranja. Si se agregara otro submenú más sólo hay que cambiar el ID en color naranja las 2 veces que se indica, por otro nombre, por ejemplo categorias3

Aunque quizá no es el menú más sofisticado y espectacular, sí es un menú con mucho potencial debido al área del submenú que puede albergar bastantes pestañas de forma organizada, así que si tienes muchos enlaces por agregar esta es una buena opción.

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

Menú vertical desplegable con jQuery

Este es un sencillo pero práctico menú vertical hecho con jQuery y CSS. Tiene un efecto deslizante que aunque su función no es enlazar a alguna página o sección de blog puede usarse para mostrar contenido dentro de él y así ahorrarnos un poco de espacio en el blog.

Redes sociales

Juegos

Plantillas

Para agregarlo a tu blog entra en Diseño | Edición de HTML y antes de </head> pega esto:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h2.togglemenu").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false;
});
});
</script>

Ahora antes de ]]></b:skin> pega lo siguiente:

h2.togglemenu {
padding: 0 0 0 30px;
margin: 0 0 5px 0;
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"
border: 1px solid #2E2E2E;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
height: 45px;
line-height: 45px;
width: 350px; /* Ancho de la pestaña */
text-transform:none !important;
font-size: 2em;
font-weight: 900;
font-family: Florence, cursive; /* Tipo de letra */
float:left;
}
h2.togglemenu a {
padding-left:40px;
background:url(https://lh6.googleusercontent.com/_dsEG33PDaHw/TXKKaRGOqrI/AAAAAAAABG4/nXF4folFnZY/plus_icon.png)no-repeat left center;
color: #fff; /* Color de los títulos */
text-decoration: none;
display: block;
}
h2.togglemenu a:hover {color: #ccc;} /* Color del título al pasar el cursor */
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border: 1px solid #d6d6d6;
background: #f0f0f0; /* Color del contenedor */
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
overflow: hidden;
font-size: 1.2em;
width: 380px; /* Ancho del contenedor */
clear: both;
}
.toggle_container .block {
padding: 20px;
}

Y por último en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript agrega esto:

<h2 class="togglemenu">
<a href="#">Pestaña 1</a></h2>
<div class="toggle_container">


</div>
</div>

<h2 class="togglemenu">
<a href="#">Pestaña 2</a></h2>
<div class="toggle_container">
<div class="block">

</div>
</div>

<h2 class="togglemenu">
<a href="#">Pestaña 3</a></h2>
<div class="toggle_container">
<div class="block">

</div>
</div>

Ya sólo agrega el contenido que pondrás en tu menú donde se indica en color rojo. Todo lo que agregues ahí es lo que estará oculto y que se mostrará al expandir el menú.
En color verde están las áreas que podemos personalizar. En el caso del color de fondo de las pestañas se cambian en esta parte:

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

Es un color de fondo gradiente, el #AAAAAA es el color de arriba y el #000000 es el color de abajo.

Si quisieras agregar otra pestaña sólo añade otro código como este:

<h2 class="togglemenu">
<a href="#">Pestaña 4</a></h2>
<div class="toggle_container">
<div class="block">

</div>
</div>

Y así de sencillo podemos tener un menú simple, elegante y en el cual podremos meter todo aquello que queramos tener más organizado.

Problema con las miniaturas de las imágenes

Desde hace unas semanas muchos habrán notado que algunas veces que subimos imágenes al blog, aparece algo distinto en la URL de la imagen dentro del código que nos arroja.

<div class="separator" style="clear: both; text-align: center;"> <a href="https://lh4.googleusercontent.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/s1600/playa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://lh4.googleusercontent.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/s400/playa.jpg" /></a></div>

Al parecer las imágenes ahora se suben a googleusercontent, otro servidor que usualmente estaba dedicado para los gadgets de Google tales como los de Google Friend Connect. Pero además sólo sucede en algunos blogs y no siempre...

Esto no parecería ser trascendental, sin embargo el otro día Sofía me comentaba que de unos días para acá las miniaturas del gadget de la lista de blogs no se veían, pensé que quizá era problema del gadget que como es habitual siempre tarda en actualizar el contenido, pero después otras personas me comentaron que les sucedía lo mismo con otros gadgets distintos que también deben mostrar las miniaturas de las entradas y en algunas no lo estaba haciendo.

Recordé que justo un par de días atrás Odin-ko me había enviado un mail platicándome algo bastante parecido y me explicaba que lo había solucionado cambiando un guión, así que con esa pista pude darme cuenta que aunque ahora las imágenes se cargan en googleusercontent sigue habiendo una copia (o mejor dicho, cuatro copias) de la imagen en blogspot.

https://lh4.googleusercontent.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/playa.jpg

http://4.bp.blogspot.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/playa.jpg

Ambas URLs apuntan a la misma imagen aunque las dos tengan servidores diferentes, pero la imagen es la misma.

Por alguna razón estas imágenes alojadas en googleusercontent no se ven en algún gadget que muestre miniaturas de las entradas. Lo cierto es que si se cambia el servidor en la URL de la imagen entonces la imagen continua funcionando pero lo que es mejor, las miniaturas en los gadgets aparecen de nuevo.

<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/s1600/playa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_dsEG33PDaHw/TXGTDZW90CI/AAAAAAAABF4/ZwJuuxcfBu8/s400/playa.jpg" /></a></div>

Así que por el momento (quiero pensar que Google le pondrá una mejor solución) podemos cambiar el https://lh4.googleusercontent.com por http://4.bp.blogspot.com en los códigos de las imágenes y problema resuelto.

Sólo toma en consideración que el cambio no se ve de inmediato en los gadgets pues hay algunos que tardan mucho en actualizar los datos, así que sólo habrá que esperar a que recopile la nueva información para que muestre las miniaturas de nuevo.

ACTUALIZACÍON:

Gracias a PeliculasTube quien ha sugerido otra alternativa más sencilla. Si es que apenas vas a subir las imágenes, sube las imágenes estando en la pestaña Edición de HTML y no en la pestaña Redactar. Si se sube desde la pestaña Edición de HTML automáticamente la imagen se generará con el servidor http://4.bp.blogspot.com y adiós problema.

Eso es sólo si apenas vas a subir las imágenes, si ya las habías subido y aparecen el servidor https://lh4.googleusercontent.com entonces hay que cambialo manualmente como explicaba anteriormente.

Leer más con imágenes en miniatura mejorado (2)

Este script no es compatible con Internet Explorer por lo que se recomienda seguir usando el método anterior.

Hace un par de meses les presentaba una mejora del Leer más con imágenes en miniatura el cual incluye una imagen predeterminada para las entradas que no tienen imágenes, tamaños proporcionales en las miniaturas y la posibilidad de ingresar a la entrada haciendo click en la imagen. Y aunque creía que ya no había nada más que hacerle a ese script siempre hay inquietudes de los usuarios; y algo que preguntan con frecuencia es porqué las entradas resumidas no respetan los espacios entre cada punto o salto de línea; o por qué si sus entradas tienen negritas y cursivas no se veían en los resúmenes, en otras palabras, que los sumarios se ven muy planos al no mostrar los formatos del texto.

Y bueno, haciéndole unas ligeras modificaciones conseguí que la entrada resumida pueda mostrar cualquier formato que tenga el texto, ya sean negritas, cursivas, colores, espacios, saltos de línea, etc. De manera que pueda verse tal como han escrito la entrada.

ATENCIÓN: Si estás usando el truco para elegir qué resumen mostrar en el Leer más automático no apliques estos cambios de lo contrario dejarán de verse los resúmenes personalizados.

~~Si ya habías puesto el Leer más con imágenes en miniatura mejorado (1) sólo elimina el script que va antes de </head> y en su lugar pon este:~~

~~<script type='text/javascript'>~~
~~summary_txt = 450;~~
~~img_thumb_width = 125;~~
~~</script>~~

~~<script type='text/javascript'>~~
~~//<![CDATA[~~
~~// Script original de Anhvo, modificado por ciudadblogger.com~~
~~function removeHtmlTag(strx,chop){~~
~~if(strx.indexOf("<img")!=0)~~
{
~~var s = strx.split("<img");~~
~~for(var i=0;i<s.length;i++){~~
~~if(s[i].indexOf(">")!=0){~~
~~s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);~~
}
}
~~strx = s.join("");~~
}
~~chop = (chop < strx.length-1) ? chop : strx.length-2;~~
~~while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;~~
~~strx = strx.substring(0,chop-1);~~
~~return strx+'...';~~
}
~~function createSummaryAndThumb(pID, pURL){~~
~~var div = document.getElementById(pID);~~
~~var imgtag = "";~~
~~var img = div.getElementsByTagName("img");~~
~~if(img.length<=0) {~~
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';
~~summ = summary_txt;~~
}
~~if(img.length>=1) {~~
~~imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';~~
~~summ = summary_txt;~~
}
~~var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';~~
~~div.innerHTML = summary;~~
}
~~//]]>~~
~~</script>~~

Y con eso bastará para que se apliquen las mejoras que además de las que tenía también podrán verse los textos enriquecidos.

RECOMENDACIÓN: Como las entradas resumidas respetarán cualquier cantidad de espacios o saltos de línea que haya es preferible que no dejes espacios antes del primer texto, por lo que si tienes una imagen al comienzo escribe tu entrada justo después del código de la imagen sin dar un salto de línea.

Si es la primera vez que vas a usar el Leer más automático entonces entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:post.body/>
Elimínala y en su lugar agrega esto:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_txt = 450;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<img")!=0)
{
var s = strx.split("<img");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=0){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Y listo.
Los que ya tenían el script mejorado notarán que el cambio en el script es mínimo pero los resultados son muy notables.
¿Algo más que mejorar? Probablemente sí, pero por ahora me parece que está bastante completo.

Precargar el blog con jQuery

Hace ya bastante tiempo vimos cómo poner la barra cargando en el blog con un script bastante simple que no hace mas que mostrar una imagen animada mientras el blog se carga. Pero los amantes de jQuery que siempre buscan mayor elegancia en las aplicaciones seguro preferirán este método.

Se trata de un preloader llamado QueryLoader basado en jQuery y lo que hace es precargar la página, o sea que pone la pantalla negra y muestra una barra con el porcentaje de carga de la página como si se tratara de Shadowbox. Vamos a verlo en acción en este blog de pruebas.

Para agregar este preloader en tu blog primero descarga este archivo, descomprímelo y sube el archivo que hay dentro a un hosting.

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

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

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.

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

.QOverlay {
background-color: #000000; /* Color de la pantalla mientras carga */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* Color de la barra */
height: 10px; /* Grosor de la barra */
}

.QAmt { /* Estilos para los números del porcentaje */
color:#333333;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Por último agrega antes de </body> lo siguiente:

<script type='text/javascript'>
QueryLoader.init();
</script>

Y eso será todo para tener un preloader en el blog con un toque simple y elegante. Algunos estilos podrán personalizarse donde se indica en color verde

IMPORTANTE: No es recomendable usarlo en un blog que ande lento pues si hubiera algún elemento que tarde mucho en cargar o una imagen rota entonces la pantalla de precarga permanecerá con determinado porcentaje y no avanzará, por lo tanto el lector no podrá ver el contenido del blog. También es posible que primero se vea un pantallazo del blog y luego aparecerá el preloader, ese es fallo del script que por ahora no tiene solución.

TriSlider, otro slider con jQuery

Cuando los videos se sobreponen

Barras de colores moviéndose en el fondo del blog

Tooltips con CSS en forma de burbuja

Antes y Después con jQuery

Nuevo gadget de suscripción por Email

Cómo usar cualquier menú en las plantillas del Diseñador de Plantillas de Blogger

Menú horizontal deslizante con Scriptaculous

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

Menú vertical desplegable con jQuery

Redes sociales

Juegos

Plantillas

Problema con las miniaturas de las imágenes

Leer más con imágenes en miniatura mejorado (2)

Precargar el blog con jQuery

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog