Ciudad Blogger

Inicio » Archivos de diciembre 2010

Más fuegos pirotécnicos para el blog

Si te gustó la entrada anterior sobre los fuegos pirotécnicos en el blog usando un script, seguramente te gustará aun más esta opción que me ha compartido Emilio, pues las luces artificiales están hechas en Flash por lo que tiene una animación más vistosa y colorida.

Puedes ver el demo en este blog de pruebas.

Para colocarlo en el blog sólo entra en Diseño | Edición de HTML y antes de </body> pega lo siguiente:

<style>
.pirotecnicos {display:block;z-index:90;position:absolute;top:0px;left:0px;width:100%;height:900px;}
.pirotecnicos object{position:fixed;top:0px;left:0px;width:100%;height:900px;}
</style>
<div class="pirotecnicos">
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/647003/fireworks.swf" wmode="transparent">
<param name="movie" value="http://dl.dropbox.com/u/647003/fireworks.swf"/>
<param name="wmode" value="transparent"/>
<param name="quality" value="high"/>
</object>
</div>

Habiendo hecho esto ya podrás disfrutar de estos fuegos pirotécnicos en tu blog, pero si te preocupa la velocidad de la carga del blog (espero que sí) entonces puedes alojar el archivo flash en tu propio hosting para que así el ancho de banda de Dropbox (donde lo he alojado) no se vea afectado y no te perjudique la velocidad de la carga de tu blog.

Sólo descarga el archivo que se menciona más abajo, descomprímelo, súbelo a tu servidor y cambia las 2 URLs que están en color verde por la URL del archivo que subiste previamente.

Como estas luces son un archivo creado en formato SWF no hay muchas configuraciones que se le puedan hacer pero no habrá necesidad de hacerle nada por lo bien que están hechas y lo vistoso que se verá en tu blog.

NOTA: Las luces por defecto se mostrarán por encima de todo el blog, por lo tanto es muy posible que los links no puedan estar disponibles o que el texto no se pueda seleccionar.

Una opción para solucionar este problema es cambiar donde dice z-index:90; por z-index:-10;

Esto habilitará de nuevo todos los links y la selección de texto, sin embargo las luces se mostrarán detrás de todo el contenido por lo que no se podrán visualizar de manera completa.

Descargar | Archivo SWF

Fuegos pirotécnicos en el blog

Pues ya que está cerca la celebración del año nuevo veamos cómo poner un script que me compartió xulinho que hará que se muestren fuegos artificiales en el blog.

Es un efecto sencillo pero que puede hacer amenas estas fechas de celebración o cualquier otra. Puedes ver el ejemplo en este blog de pruebas.

Colocarlo es muy sencillo, sólo entra en Diseño | Edición de HTML y antes de </head> agrega lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Fuegos artificiales
var bits=200; // Número de puntos
var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
var speed=30; // Velocidad (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Colores de los fuegos

var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
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";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
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;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

En color verde he puesto las indicaciones de la configuración del script.
Al igual que muchos de estos scripts las luces no llegan hasta abajo del blog; para modificar qué tanto abarcarán las luces se puede modificar donde está en negrita

var swide=800;
var shigh=600;

El primer valor es el ancho y el segundo es el alto.
¿Otra opción? Qué tal esta explosión de estrellas.

Las mayúsculas y las minúsculas en las URLs

Las URLs son poco flexibles cuando se trata de que funcionen de manera correcta, ya sea para una imagen o un enlace deben de ser escritas de forma textual respetando cada caracter que contiene, incluso si estos caracteres son mayúsculas o minúsculas.

Por ejemplo, esta es la URL de una imagen:

http://4.bp.blogspot.com/-Aj4g31qffvg/UTdDWFFr8-I/AAAAAAAAI-s/1X6f9QUaKQQ/s320/Skate.JPG

Esa URL contiene signos, letras y números. Y en el caso de las letras hay tanto mayúsculas como minúsculas. ¿Qué pasaría si cambiara todas las letras a minúsculas? No mucho excepto que la URL simplemente dejaría de funcionar.

http://4.bp.blogspot.com/-aj4g31qffvg/utddwffr8-i/aaaaaaaai-s/1x6f9quakqq/s320/skate.jpg

Lo mismo sucede con las URLs de los enlaces, aunque no aplica para todos los casos sí aplica para las URLs de Blogger. Por ejemplo, yo tengo en el blog la etiqueta Plantillas con P mayúscula, por lo tanto esta URL funcionará:

http://ciudadblogger.com/search/label/Plantillas

Pero esta no:

http://ciudadblogger.com/search/label/plantillas

¿Qué ha cambiado? Sólo una simple y casi insignificante letra que pasó de mayúscula a minúscula, pero ese pequeñísimo cambio ha hecho que la URL deje de funcionar y ahora Blogger me dice que no hay ninguna entrada con esa etiqueta.

Sin embargo, aunque hayamos tenido el cuidado de escribir la URL respetando las formas de las letras seguro muchos notarán que en sus blogs algunas imágenes o enlaces no funcionan, y esto es porque sin importar cuántas veces lo intentemos al momento de guardar los cambios Blogger cambia todos los caracteres de la URL a letras minúsculas.

Ignoro a qué se deba esto y porque en algunos blogs suceda y en otros no, pero por suerte Aresil me compartió un tip.

Si eres de los que están teniendo problemas con las mayúsculas de las URLs al momento de guardar los cambios sólo hay que hacer una pequeña modificación en el código del enlace o de la imagen.

Las URLs las encerramos siempre entre comillas, simples o dobles, usualmente esto no importa, pero esta vez sí, ya que si usamos las comillas simples (') Blogger nos cambia todos los caracteres a minúsculas.

Pero si usamos comillas dobles (") misteriosamente Blogger respeta las mayúsculas y las minúsculas.

Por ejemplo, en lugar de usar la URL así:

<a href='URL de la imagen o del enlace'>

Hay que usarla entre comillas dobles, así:

<a href="URL de la imagen o del enlace">

Y habiendo hecho eso no habrá ningún problema con las mayúsculas y las minúsculas de las URLs por lo que podrán funcionar correctamente. Una solución bastante sencilla ¿no creen?

¡Feliz Navidad!

Trineo de Santa Claus en el blog

Blogger lanza su versión móvil para blogs

Cursores de Navidad

Gadget para compartir enlaces de las entradas del blog

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.

Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.

El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):

Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<data:post.body/>

O si usas el Leer más automático busca este código:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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>

Justo debajo de cualquiera de esos dos agrega lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div class='compartir-post'>
<p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>
<p><label for="aa-url">URL:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="<data:post.url/>" /></p><p><label for="aa-forum">Link HTML:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;<data:post.url/>&quot;><data:post.title/></a>" /></p><p>
<label for="aa-forum">Link para foros:</label><br />
<input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="[url=<data:post.url/>]<data:post.title/>[/url]" /></p>
</div>
</b:if>

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

/* Compartir entradas
----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* Color de fondo del contenedor */
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* Tamaño de texto del mensaje */
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* Borde de las celdas */
}

Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.

Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.

El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.

Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Luces de Navidad en el blog (sin script)

Mostrar notificaciones en el blog con efecto deslizante

SlideNote es un plugin de jQuery que nos permite mostrar notificaciones en el blog de forma deslizante tanto al mostrarse como al cerrarse el anuncio.

Estas notificaciones se muestran cuando se baja el scroll de la página y se pueden mostrar dentro de ellas cualquier tipo de estilos CSS, imágenes, enlaces o cualquier otra cosa. Puedes verlo funcionando en este blog de pruebas, al bajar la página aparecerá el anuncio del lado derecho.

El contenedor del aviso tiene un botón para cerrarse, pero también se oculta si subimos nuevamente con el scroll de la página.

Para colocarlo en tu blog sigue estos pasos:
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='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

<style type='text/css'>
.slidenote {
width: 500px; /* Ancho del anuncio */
height: 120px; /* Alto del anuncio */
background: #FBEC78; /* Color de fondo */
-moz-box-shadow: -0.2em -0.2em 0.7em #333;
-webkit-box-shadow: -0.2em -0.2em 0.7em #333;
padding: 1em;
}
.slidenote img { float: left; margin-left: -2.5em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
.slidenote-titulo {
color: #000; /* Color del título */
font-size:25px; /* Tamaño de la letra del título */
font-weight:bold;
margin-top: -5px;
}
.slidenote p {
color: #000; /* Color del texto */
font-size: 14px; /* Tamaño de la letra */
font-weight: bold;
}
</style>

Cambia donde se indica la URL del archivo que subiste previamente. Luego, y por último, pega antes de </body> esto:

<div class='slidenote' id='Note'>
<span class='slidenote-titulo'>Importante...!</span>
<p>Aquí va el texto de tu anuncio. Puedes incluir estilos, enlaces, imágenes, etc.</p>
</div>

<script type='text/javascript'>
$('#Note').slideNote({
corner: 'right',
where: 80,
});

$('#Note').slideNote({
url: 'ajax.html',
closeImage: 'http://lh3.ggpht.com/_dsEG33PDaHw/TPak5yQRJNI/AAAAAAAAAe0/a5JRc1m-8JA/close-slidenote.png'

});
</script>

En el primer código está señalado en color verde los estilos que podemos cambiar de la estructura del anuncio. Y en color azul se indica donde va el contenido del anuncio.

Como ves la instalación es muy sencilla, práctica, y sus usos pueden ser múltiples, ya sea para sugerir la suscripción al blog, para dar un aviso importante, para mostrar las redes sociales en las que pueden localizarnos, o simplemente para agregar un saludo a los lectores.

Más fuegos pirotécnicos para el blog

Fuegos pirotécnicos en el blog

Las mayúsculas y las minúsculas en las URLs

¡Feliz Navidad!

Trineo de Santa Claus en el blog

Blogger lanza su versión móvil para blogs

Cursores de Navidad

Gadget para compartir enlaces de las entradas del blog

Luces de Navidad en el blog (sin script)

Mostrar notificaciones en el blog con efecto deslizante

Hacer nevar en el blog y en cualquier otra página Web

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog