El Escaparate: 2010

Estás en: Inicio » Archivos de 2010

Sharesidebar: Botones flotantes para compartir contenidos

Guirnalda navideña de luces intermitentes

En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:

->Nieve usando la etiqueta marquee.
->Nieve usando un script externo.
->Nieve que se va acumulando al final de la página.

En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde Diseño- en un gadget HTML/Javascript.
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "nieve".

El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.

Código:

<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

var numberOfSnows = 20;
var snowSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 50;

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfSnows; i++){
document.write('<div id="snows'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKiuySuWtEpX4yaT80n7MiOc8cv38w2YSjcR7uLMiajjPkmdnTrmTm6SGZVrym5W5xVn7bYr6zqIl-661BGOd1e3HP5X-tcnpwRCmZNBoM11ioBYuVMR2CaxH-jHUZeZelf0BgfsNw1E8/s320/snow2.gif" class="snow" width="20"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = snowSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfSnows; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfSnows; i++){
strs[i] = document.getElementById("snows"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.snow {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
html {
overflow-x:hidden;
}
</style>

Configuración:

-> var numberOfSnows = 20; Cambiamos aquí el valor para mostrar mayor o menor número de copos.
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip1PEKOr6xlMe2DPgH9gZxd_Z2-iFWNd7jKPnR5wR9HCOE8uEIzQj8hzm5SUMyqpFdboKpw6vMdc6nWAGsP2u5JSk-NRy88KWOS3yOGZnldRkZwgj_RRcbbWAqAaQrLcxtKfy0x9tkjWpb/s320/snow4.gif" class="snow" width="20"/>

Nota:

En las plantillas del Diseñador de Blogger, funciona mal o directamente no funciona.

VER EJEMPLO:Estrellas de nieve

[+/-]

Fan Box de Twitter en la sidebar

[+/-]

Nuevas fuentes disponibles en el Diseñador de Blogger

[+/-]

Señalizar el código que añadimos en la plantilla

[+/-]

Dividir la cabecera del blog en las plantillas de Diseño

[+/-]

Apture Toolbar

[+/-]

"Subir" y "Bajar" con efecto deslizante en las nuevas plantillas

[+/-]

Como intregar Twitter en tu correo Gmail

[+/-]

IconJ: crear y alojar un favicon de forma sencilla

[+/-]

Ocultar la Navbar en las nuevas plantillas de diseño

[+/-]

Destacar el nombre del comentarista al responder

[+/-]

Set de iconos para Tuenti

[+/-]

Mostrar la Lista de Blogs en movimiento

Es algo que me han preguntado en varias ocasiones y que siempre respondía de forma personal a cada uno. Estos últimos días he vuelto a recibir más consultas sobre esto mismo, hacer que el gadget Lista de Blogs se muestre en movimiento.

Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".
Antes de continuar con la explicación, podéis ver un ejemplo en este blog de pruebas, es el gadget que lleva por título "Mi lista de blogs".

[1] Antes de nada tendremos que añadir el gadget "Lista de blogs" y configurarlo tal como vemos en la imagen para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.

[2] Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>

<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Modificaciones:

height='300' Es el alto del gadget, a mayor valor, más altura y viceversa.
width='260' Es el ancho del gadget, a mayor valor, más anchura y viceversa.
bgcolor = '#faf0e6' Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.
border: #cdaf95 2px solid; El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.
scrollamount='5' Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.
direction='up' Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.

[+/-]

Menú en las nuevas plantillas de diseño

[+/-]

Añadir la función de responder a los comentarios

[+/-]

Gadget de iconos fijo con opacidad

Justo en la entrada anterior veíamos como colocar un gadget de iconos fijo en nuestro blog.

En un comentario de esa misma entrada, nuestra amiga *Eva* me solicitaba si era posible el añadir a los iconos del gadget opacidad, tal como habíamos visto en el gadget de marcadores sociales en la sidebar.

El procedimiento es el mismo, añadimos una clase a cada icono y, mediante ese dato, aplicamos el CSS necesario para conseguir la opacidad.
El resultado podéis verlo en el mismo blog de pruebas donde había colocado los otros, pero en este caso el gadget con opacidad se muestra a la izquierda de la pantalla.

Copiamos y pegamos el código en un gadget HTML/Javascript y hacemos los cambios necesarios tal como veíamos en la entrada anterior, para incluir nuestros datos.

<div style='position: fixed; bottom: 30%; right: 1%;'/>
<a class="twitter" href="http://www.twitter.com/TWITER USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjny0Yl60ssoBJEkK5LHwGe-UXBXMHp9SpMEeW7brA-Fw8WFdDCGVkHjaVaz0daF9-9-GIPSMf4u_1GEvHG5O1SbvMzRObLEpkRfjE3WBVhwBWBbQEL0cBm8LihM_icEzASREh3pj40LB9o/s1600/Twitter+2-32.png" /></a><br />
<a class="facebook" href="http://www.facebook.com/FACEBOOK USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh2GrgiqHkUfzC35bvvddbtEuNM2bgKqTjY0t_Bg4iP7ZQTN_YNffktR80F7hCDcmRtD0W1TsGboQCcfyN1DDDHpnKFjOHq0AaUHU7lEQtsLtn1ary7oOxwU_KsAx7QY8fK6yCgiLM6OE/s1600/Facebook-32.png" /></a><br />
<a class="rss" href="http://feeds.feedburner.com/FEEDBURNER ID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzAtnGicgyovrSkJIC55hl8KDqiS1hPVlGjJv53HPzmqo_muYhzLScdTXEOTVcgPwHH1B_iMJIRm8b0y_bSz_ObEKQuB8O707dAaddw2FE1xrGM-3xWj2hbjWGa9NteeweLrY9EXF4Lw/s1600/RSS-32.png" /></a><br />
<a class="rss-mail" href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID&loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32_GqQWYEY-bysoZzgyXWdzbKwgo-dyMQDZQnsMnSiRQ3PTvAVMt2wy0D7lyBHJDcJkyNVDNeiDgInLUv-ehXU2Ln_wzb0x_trbrgYfkRYNe5Mem07Y3u_YZ93xlb0Q6g04op_MUlxVs7/s1600/Mairssl_32.png" /></a></div>
<style type='text/css'>
a.rss img {opacity:0.8;}
a.rss:hover img {opacity:1;}
a.twitter img { opacity:0.8;}
a.twitter:hover img { opacity:1;}
a.facebook img { opacity:0.8;}
a.facebook:hover img { opacity:1;}
a.rss img { opacity:0.8;}
a.rss:hover img { opacity:1;}
a.rss-mail img { opacity:0.8;}
a.rss-mail:hover img { opacity:1;}
</style>

Nota:

El gadget se mostrará a la derecha de la pantalla tal como el anterior, para cambiarlo a la izquierda tendremos que cambiar right por left (en la primera línea del código).