Aumentar el título del blog o imagen de la cabecera al pasar el cursor

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.



Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]> lo siguiente:

#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.

Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:

margin-top:-10px;
margin-left:-30px;

Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.

El procedimiento es similar; agrega antes de ]]> esto:

#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. 

Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.

Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.

Fuente: CuidadBlogger
--> Leer Más...

Nieve en el Blog que se Acumula al final de Pagina

La temporada navideña ya es oficial, y al menos los que estamos en el hemisferio norte relacionamos la nieve con la Navidad, así que es hora de abrigarnos porque haremos que caiga nieve en el blog.



En esta ocasión usaremos un script de Schillmania que hará que caigan unos finos copos de nieve en el blog y que se irán acumulando al final de la página. Además, la tormenta de nieve se mueve en dirección contraria al cursor, por lo que si movemos el cursor a la derecha entonces la nieve caerá desde la izquierda y viceversa.

Puedes ver un ejemplo en este blog de pruebas.

Para no complicarnos descargando y subiendo archivos, pegaremos el script directo en un gadget, así podrás quitar la nieve del blog cuando quieras con sólo eliminar el gadget.

Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript.

Si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript.

Ahí dentro del gadget pega el siguiente código:

<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="&bull;";this.snowStick=true;


this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,


p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,


b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,


10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=


function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),


a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=


function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=


a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=


"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&


b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?


b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=


"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&


(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*


3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",


a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;


a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);


//]]>
</script>

Guarda los cambios y a aguantarse el frío virtual.

El número 40 es la velocidad en la que cae la nieve, con un valor más bajo caerá más rápida y con uno más alto caerá más despacio.

En color rojo está el código del color de la nieve, en este caso es blanca, pero puedes cambiarlo por otro en caso que tu blog sea de un color claro, sino pues no se verá.

Cuando acabe la temporada navideña sólo elimina el gadget donde pusiste el código y se habrá ido la nieve.

Fuente: ciudadblogger.com
--> Leer Más...

Añadir Efecto Esquina Plegable en el Blog de Blogger

Seguramente abras visto en alguna página web este efecto que veremos hoy día, el script se llama How To Page Peel Effect está basado en javascript, imágenes, flash, y lo podemos utilizar en nuestro blog de forma gratuita gracias a hongkiat. Puedes verlo funcionando en mi blog de pruebas.


Cuando apliques este efecto a tu sitio verás un pliegue tipo pegatina en la esquina superior derecha de tu blog, y al pasar el mouse por encima este pliegue te muestra la información que hay detrás, esto las páginas web lo utilizan para promocionar sus productos, pero nosotros lo podemos utilizar en nuestro blog para dar a conocer otro blog que tengamos, blog de un amigo, o lo que tú quieras.

Ahora veremos cómo ponerlo en tu blog de blogger, primero tienes que tener la librería jQuery, es posible que ya la tengas si has aplicado otro efecto utilizando esta librería, pero si no la tienes copia y pega el siguiente código justo antes de </head>


<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/>


Ahora tienes que copiar el siguiente código que te dejo en está otra página y pegalo en el Bloc de notas,WordPad, o Dreamweaver para configurar algunos parametros que te muestro a continuación.


Configuración:


var jaaspeel = new Object();
jaaspeel.ad_url = escape('http://www.pazosblogger.com');
jaaspeel.small_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/small.swf';
jaaspeel.small_image = escape('URL-de-tu-imagen-PEQUEÑA');
jaaspeel.small_width = '150';
jaaspeel.small_height = '150';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/large.swf';
jaaspeel.big_image = escape('URL-de-tu-imagen-GRANDE');
jaaspeel.big_width = '600';
jaaspeel.big_height = '600';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&amp;ad_url=' + jaaspeel.ad_url;


Cambia lo que está en color rojo por la dirección web a la que quieres que dirija cuando hagan clik.

Lo que está en color azul tienes que poner tus imágenes una pequeña de 100 x 100 pixeles y la grande de 500 x 500 pixeles.

El pliegue antes de pasar el mouse por encima lo puedes cambiar al tamaño que tú quieras, en el código te lo dejo en color celeste está en 150 tienes que cambiar tanto el ancho como el alto.


Por último el tamaño del pliegue cuando pase el mouse por encima es de 600 se los dejo en color naranja también tienen que cambiar el ancho y alto.

Una vez has configurado todo lo guardas y lo subes a tu propio servidor de archivos, para los que no saben donde subir sus script lean este artículo, tu servidor de archivos te dará la dirección del script y tienes que pegarla en el siguiente código que te dejo abajo, luego lo pegas justo antes de </body>:


<script src='URL-de-tu-script' type='text/javascript'/>


Si todo ha ido bien verás el efecto en acción en tu blog, y si tiene algún problema hásmelo saber por medio del formulario de comentarios.


Descargar Script + Archivos swf


Fuente: www.pazosblogger.com
--> Leer Más...

jQuery: ampliar una imagen con efecto elegante en blogger o pagina web

Con jQuery podemos ampliar una imagen con un bonito efecto. Anteriormente hemos visto 2 clase de efecto para ampliar imagen, les dejo los links por si les interesa, Imagen que se agranda al pasar el mouse por encima y Poner una lupa a todas las imágenes del blog al pasar el mouse por encima con CSS y jQuery.


El efecto que realizaremos hoy día es con un script de DynamicDrive, y es que este se puede traducir en un elegante efecto Zoom que podemos agregar a las imágenes de nuestro blog, este script te permite mostrar las imágenes ampliada en el centro de la pantalla del usuario, y con un solo click volverla a su tamaño original. Pueden verlo funcionando en mi blog de pruebas

Al pasar el cursor por encima de una imagen, te mostrará una pequeña lupa con un signo + en señal de que la imagen se puede ampliar, este bonito efecto lo he probado y funciona bien en las ultimas versiones de los siguientes navegadores: IE, Opera, Firefox, Google Chrome, etcétera.

Para ponerlo en tu blog de blogger, tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas, si la tienes salta este paso, de lo contrario copia y pega el siguiente código antes de la etiqueta </head>

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería, ahora toca añadir el script justo después del código que acabamos de pegar justo ante s de </head>

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.lupa.zoom.js' type='text/javascript'/>

Ahora, puedes crear una entrada o si quieres poner la imagen en tu sidebar ve a  Diseño > Añadir gadget > elije > HTML/Javascript > y pega uno de los siguientes código para llamar el efecto, también lo puedes poner en una entrada:

<img src="URL-de-tu-imagen" class="magnify" style="width:200px; height:150px" />
<img src="URL-de-tu-imagen" class="magnify" border="0" />

El primer código lo puedes utilizar para cuando una imagen es demasiado grande, y quieres darle tu mismo las dimensiones necesarias para que entre bien en tu sidebar o en una entrada, widgt: es el ancho y height: el alto. El efecto zoom se aplicará con relación a las dimensiones de la imagen.

El segundo código, es para que una imagen se muestre en su tamaño normal, por ejemplo se puede utilizar para imágenes pequeñas, donde también se aplicará el efecto zoom de acuerdo a las demenciones base de la imagen.

Configuración Avanzada
Si te bajas el script puedes hacer algunas configuraciones. En la parte superior del código hay 3 variable que puedes configurar, para ello localiza esta parte del código en el script:

dsettings: {
magnifyby: 3, //factor de incremento por defecto de la imagen ampliada
duration: 500, //Duración predeterminada de la animación, en milisegundos
mgopacity: 0.2 //la opacificación de la imagen original, cuando la imagen ampliada la recubre
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

Como pueden ver se los dejo en color rojo las 3 variables que se pueden configurar y la parte que está en azul pueden poner la URL de su propia imagen ya sea una lupa o lo que ustedes quieran. Que fácil es usar jQuery para ampliar una imagen


Fuente: www.pazosblogger.com
--> Leer Más...

Botones Animados con Efecto Corredizo - Redes Sociales

Para ofrecer suscripción a los visitantes de nuestro blog, lo primero que se nos ocurre es poner un botón con enlace. Una buena alternativa para llamar más la atención la encontré en el blog de David Walsh donde muestra un botón animado utilizando la librería MooTools.


En IE y Opera los botones se muestran cuadrados pero en Firefox y Google Chrome se ve perfectamente, además, el efecto funciona bien en los 4 navegadores. Pueden verlo en mi blog de pruebas.


Para los que no saben que es MooTools, pues se lo digo en pocas palabras, es una librería que nos permite realizar muchos efectos, en otras palabras es algo parecido a jQuery.


Para poner este tipo de botones en tu blog de blogger, primero tienes que tener la librería MooTools v1.2.4 si no la tienes en tu plantilla ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>


Ahora añadiremos el script que le dará vida al efecto, pegamos el siguiente código después del código que acabamos de pegar anteriormente antes de </head>


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/botonesanimados.js' type='text/javascript'/>


Llego la hora de añadir el código CSS que le dará estilo al botón, con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:


.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px;
}
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right;
}
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff;
}
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer;
}
.button_bRight span{ color:#008ddd;
}
.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase;
}
.button_c span{ color:#093d6f;
}


Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:


<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Sigueme en twiteer</span></a>
<a href="URL-de-tu-enlace" target="_blank" class="button_bRight slidebttn" id="button_bRight">Twitter <span></span></a>
</div>


Pueden poner tantos botones como quieras, en este caso he puesto el código sólo para un botón, pero si es que quieres poner más botones solo tienes que copiar las veces que quieras el último código.


Para cambiar lo que está en color azul del botón, cambia el código de color que está en rojo en el código css, por el código del color que más te guste, les dejo un completo generador de colores.


Lo que está en color amarillo es el texto que se mostrará cuando el botón se despliegue.


Cambia lo que está en color azul por la dirección de tu enlace.


Lo que está en color celeste tienes que poner el nombre del enlace, ese texto será el que se mostrará cuando el botón este sin desplegarse.


Fuente: www.pazosblogger.com

--> Leer Más...

Poner un Scroller con Artículos Nuevos en la Sidebar del Blog

David Walsh nos enseña a crear un scroller simple utilizando la librería MooTools, este scroller lo podemos utilizar para poner post nuevos o relevantes. Este scroller tiene un aspecto muy simple, con una animación muy elegante, algo que lo convierte en una herramienta eficaz a la hora llamar la atención de los usuarios del blog, al mostrar una noticia importante. Pueden verlo en mi blog de pruebas.


Para ponerlo en el blog, pero primero tenemos que tener la librería MooTools 1.2.4 en tu plantilla, si ya la tienes en tu plantilla salta este paso, de lo contrario ve a Diseño > Edición de HTML y con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>


Ya tenemos la librería MooTools en nuestra plantilla, ahora tenemos que añadir el script que le dará vida al efecto, para ello copia el siguiente código y págalo justo después del código que acabas de pegar antes de </head>


<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function() {
/* settings */
var list = $(&#39;news-feed&#39;).getFirst(&#39;ul&#39;);
var items = list.getElements(&#39;li&#39;);
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set(&#39;tween&#39;,{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween(&#39;top&#39;,0 - (++index * height));
};
/* go! */
window.addEvent(&#39;load&#39;,function() {
move.periodical(showDuration);
});
});
</script>


Ahora, añadiremos el código CSS, pega antes de la etiqueta ]]></b:skin> el siguiente código:


#news-feed { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;
}


Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML para llamar al efecto y al estilo css:


<div id="news-feed">
<ul>
<li><strong style="font-size:14px;">Título1</strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<li><strong style="font-size:14px;">Título2 </strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<!-- Más artículos.... -->
</ul>
</div>


Cambia la # por la url de tu artículo.

Para cambiar el tamaño del Scroller cambia en el código css el alto height:200px;  y el ancho width:300px;. Si el título de los artículos te sale desalineado puedes ver este post donde explico como alinear códigos.

Fuente: www.pazosblogger.com
--> Leer Más...

Poner Indice en Blogger con Efecto Acordeón jQuery y CSS 3


Anterior mente veíamos cómo poner un mapa del sitio o índice en blogger, donde el script nos muestra una lista de todas las entradas divididas por categoría, pero el script ha sido modificado nuevamente por el genio abu-farhan donde ahora lleva un bonito efecto...


acordeón que al hacer click sobre una categoría se despliegan todas las entradas y luego las oculta, pueden verlo funcionando en mi blog de pruebas.


Código para blog en Español
<link href="http://dl.dropbox.com/u/3373498/PazosBlogger/acc-toc.2.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/3373498/PazosBlogger/daftarisiv2-pack.2.js">
</script>
<script src="http://www.url/de/tu/blog/blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://dl.dropbox.com/u/3373498/PazosBlogger/accordion-pack.2.js" type="text/javascript">
</script>


Código para blog en Inglés
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.url/de/tu/blog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>


Cambia lo que está en color rojo por los datos de tu blog, publicas la entrada y listo. Si el código para blog en español no funciona en tu blog, intenta con el código para blog en inglés.

Fuente:Abu-Farhan - www.pazosblogger.com
--> Leer Más...

Menú desplegable jQuery: Slide menú horizontal con jQuery y efecto deslizante

Hace tiempo que no publico menú en Pazos Blogger, pues hoy día les traigo este menú desplegable jQuery con CSS3 creado por tympanus, Pueden ver una demo en mi blog de pruebas.

El menú cuenta con un cuadro de diapositiva y una imagen en miniatura que aparece al pasar el mouse por encima de cada elemento del menú, también incluye un recuadro en el submenú con enlaces para algunos de los elementos del menú. Los submenú se deslizarán hacia la derecho o izquierda con un bonito efecto deslizante.

Iportante: Antes de instalar este menú, en una plantilla del diseñador de plantillas de blogger, primero tenemos que hacer unos cambios en la plantilla, lee este tutorial.

Para utilizarlo en tu blog ve a
Diseño > Edición de HTML > con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes gega el siguiente código que contienes el script jQuery y la librería jQuery:


<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>


Ahora toca añadir el código CSS para darle estilo al menú, para ello copia y pega el siguiente código justo antes de la etiqueta ]]></b:skin> :


/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(http://lh6.ggpht.com/_NLOc3R4Yqfs/TN7g7VT6viI/AAAAAAAAB6I/ASvXrGS3N-c/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}


Ahora busca la etiqueta </body> que está casi al final de la plantilla y pega justo antes el siguiente código:


<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');


$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
$('#relatedPosts').toggle(
function(){
$('#rp_list').animate({'bottom':'10px'},500);
},
function(){
$('#rp_list').animate({'bottom':'-50px'},500);
}
);
$('#rp_list a').tipsy({gravity: 's'});
});
</script>


Por último nos vamos a Diseño nos situamos debajo de la cabecera de nuestro blog y hacemos clic en Añadir gadget > elegimos HTML/JavaScript y pegamos el siguiente código:


<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/1" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Acerca de</span>
<span class="sdt_descr">Pazos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/2" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portafolio</span>
<span class="sdt_descr">My Trabajo</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Blog</a>
<a href="#">Trucos blogger</a>
<a href="#">Tutoriales</a>
</div>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/3" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inspiración</span>
<span class="sdt_descr">Cuando las ideas nacen</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Trucos</span>
<span class="sdt_descr">Trucos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/5" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Blog</span>
<span class="sdt_descr">Photoshop</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/6" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Poyectos</span>
<span class="sdt_descr">Me gusta el código</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Bolsa de trabajo</a>
<a href="#"> Tarjeta de compra</a>
<a href="#">Mapas interactivos</a>
</div>
</li>
</ul>


Ahora le podemos cambiar los títulos a los elementos del menú y submenú, donde pone # la reemplazamos por nuestro enlace.


Nota: El tamaño de las imágenes tienes que ser de 170x170 px.


Como pueden ver es uno de los menú desplegable con jQuery más bonitos que hay.


Descargar Script y CSS


Fuente: www.pazosblogger.com
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika