Crea y personaliza un Tooltip (Title) para los enlaces [1]

Si quieres que al poner el cursor sobre un enlace,  aparezca un pequeño Título o Title encima de este (que no es más que un cuadrito pequeño con una pequeña descripción) , este truco te permitirá crear y decorar los mismos fácilmente.
Si aún no sabes lo que es un Tooltip, coloca el cursor encima del siguiente texto:

Ejemplo de TooltipAyuda para Blogger

Para agregarlo sólo debes seguir los siguientes pasos:

1.  Nos dirigimos a Diseño>Edición de HTML y Expandimos Artilugios

2. Añadimos antes de ]]></b:skin> el siguiente código:

a.tooltip{
position: relative;
z-index: 24;
color: #0080FF;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #002AFE;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color:#08088A;
}

a.tooltip:active{
z-index: 24;
color: #0000FF;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 2px solid #088A08;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 10em;
background-color: #74DF00;
color: #0B0B0B;
font-size: 8pt;
font-family: Comic Sans MS;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Por cierto, este código es también el empleado en la plantilla de La Trucoteca de Blogs para los Tooltips, y puedes decorarlo a tu gusto. Para ello te indicaremos algunas partes del Css que puedes modificar:

• color: #0080FF;     -> Color del enlace.

• color: #002AFE;     ->Color del enlace al pasar el cursor por encima.

• color: #08088A;     ->Color del enlace mientras se hace clic en él.

• border: 2px solid #088A08;  ->2px (grosor del borde del tooltip), #088A08 (color del borde del tooltip), solid (estilo del borde del tootltip), que también puede ser (y si tu quieres):

none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontinuo - - -
solid - Borde continuo (este es el borde que utilizaremos)
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

• background-color: #74DF00;    ->color de relleno/fondo del tooltip.
• color: #0B0B0B;   ->color de la letra del tooltip.
• font-size: 8pt;   ->tamaño de la letra del tooltip.
• font-family: Comic Sans MS;   ->Fuente (puede ser Segoe UI,  Trebuchet MS, etc).
• text-align: left;   -> Alineación del texto del tooltip.

3. Tras personalizarlo a tu medida, GUARDAMOS CAMBIOS.
4. Ahora, cada vez que queramos usar los tooltips en un enlace deberemos emplear este código:

<a href="URL-DE-LA-PAGINA" class="tooltip">TITULO-DEL-ENLACE<span>CONTENIDO-TEXTO-DEL-TOOLTIP</span></a>

Y sustituye, URL-DE-LA-PAGINA, por la dirección de la página a la que quieres enlazar, como, por ejemplo," http://blogger.com".
TITULO-DEL-ENLACE, por el texto que aparecerá antes de poner el cursor, como, por ejemplo, "Blogger".
CONTENIDO-TEXTO-DEL-TOOLTIP, por el texto que saldrá al poner el cursor sobre el enlace, es decir, lo que saldrá dentro del Tooltip, como, por ejemplo, "en esta página creé mi blog".

¡Y ya podrás disfrutar de un bonito y decorado título para tus enlaces!

Iconos RSS y efecto de nieve para decorar tu blog esta navidad

Bueno, como ya estamos en plena Navidad, que mejor que decorar nuestro blog de esta festividad con unos interesantes iconos RSS navideños, al igual que hicimos con Halloween :)

● Este pack de Christmas RSS contiene 12 iconos muy bonitos, fantásticos para el blog.

La entrada original es ésta, donde podréis acceder a descargarlos :)

● Otros atractivos y brillantes iconos RSS en forma de bolas de navidad: Christmas Feed Icons

Entrada original en Webfruits.it y descarga.

También pueden descargarse mediante IconsPedia en esta página

■ Nieve flotante en el blog

Cómo habrás visto, desde hace muy poco hemos implementado un script en la plantilla de La Trucoteca de Blogs para que el blog esté decorado (¡qué mejor fecha para hacerlo!) con una bonita cortina de copos de nieve.

El Script, que hemos descubierto en El Escaparate de Rosa y original a su vez de Schillmania es muy fácil de colocar.

♦ Nos dirigimos a Diseño>Edición de HTML.

Ahora, antes de </head>, tan solo hay que insertar el siguiente código:

<script type="text/javascript">
//<![CDATA[
/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------
Initializes after body onload() by default (via addEventHandler() call at bottom.
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;
*/
var snowStorm = null;
function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)

this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)

this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---
this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow

this.vMaxY = 4; // Maximum Y velocity range

this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations

/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

return o.addEventListener(evtName,evtHandler,false);

}:function(o,evtName,evtHandler) {

return o.attachEvent('on'+evtName,evtHandler);

});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

return o.removeEventListener(evtName,evtHandler,false);

}:function(o,evtName,evtHandler) {

return o.detachEvent('on'+evtName,evtHandler);

});

function rnd(n,min) {

if (isNaN(min)) {

min = 0;

}

return (Math.random()*n)+min;

}

function plusMinus(n) {

return (parseInt(rnd(2),10)==1?n*-1:n);

}

var s = this;

var storm = this;

this.timers = [];

this.flakes = [];

this.disabled = false;

this.active = false;

var isIE = navigator.userAgent.match(/msie/i);

var isIE6 = navigator.userAgent.match(/msie 6/i);

var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));

var isWin9X = navigator.appVersion.match(/windows 98/i);

var isiPhone = navigator.userAgent.match(/iphone/i);

var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');

var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);

var screenX = null;

var screenX2 = null;

var screenY = null;

var scrollY = null;

var vRndX = null;

var vRndY = null;

var windOffset = 1;

var windMultiplier = 2;

var flakeTypes = 6;

var fixedForEverything = false;

var opacitySupported = (function(){

try {

document.createElement('div').style.opacity = '0.5';

} catch (e) {

return false;

}

return true;

})();

var docFrag = document.createDocumentFragment();

if (s.flakeLeftOffset === null) {

s.flakeLeftOffset = 0;

}

if (s.flakeRightOffset === null) {

s.flakeRightOffset = 0;

}

this.meltFrameCount = 20;

this.meltFrames = [];

for (var i=0; i<this.meltFrameCount; i++) {

this.meltFrames.push(1-(i/this.meltFrameCount));

}

this.randomizeWind = function() {

vRndX = plusMinus(rnd(s.vMaxX,0.2));

vRndY = rnd(s.vMaxY,0.2);

if (this.flakes) {

for (var i=0; i<this.flakes.length; i++) {

if (this.flakes[i].active) {

this.flakes[i].setVelocities();

}

}

}

};

this.scrollHandler = function() {

// "attach" snowflakes to bottom of window if no absolute bottom value was given

scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));

if (isNaN(scrollY)) {

scrollY = 0; // Netscape 6 scroll fix

}

if (!fixedForEverything && !s.flakeBottom && s.flakes) {

for (var i=s.flakes.length; i--;) {

if (s.flakes[i].active === 0) {

s.flakes[i].stick();

}

}

}

};

this.resizeHandler = function() {

if (window.innerWidth || window.innerHeight) {

screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;

screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);

} else {

screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;

screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);

}

screenX2 = parseInt(screenX/2,10);

};

this.resizeHandlerAlt = function() {

screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;

screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;

screenX2 = parseInt(screenX/2,10);

};

this.freeze = function() {

// pause animation

if (!s.disabled) {

s.disabled = 1;

} else {

return false;

}

for (var i=s.timers.length; i--;) {

clearInterval(s.timers[i]);

}

};

this.resume = function() {

if (s.disabled) {

s.disabled = 0;

} else {

return false;

}

s.timerInit();

};

this.toggleSnow = function() {

if (!s.flakes.length) {

// first run

s.start();

} else {

s.active = !s.active;

if (s.active) {

s.show();

s.resume();

} else {

s.stop();

s.freeze();

}

}

};

this.stop = function() {

this.freeze();

for (var i=this.flakes.length; i--;) {

this.flakes[i].o.style.display = 'none';

}

removeEvent(window,'scroll',s.scrollHandler);

removeEvent(window,'resize',s.resizeHandler);

if (!isOldIE) {

removeEvent(window,'blur',s.freeze);

removeEvent(window,'focus',s.resume);

}

};

this.show = function() {

for (var i=this.flakes.length; i--;) {

this.flakes[i].o.style.display = 'block';

}

};

this.SnowFlake = function(parent,type,x,y) {

var s = this;

var storm = parent;

this.type = type;

this.x = x||parseInt(rnd(screenX-20),10);

this.y = (!isNaN(y)?y:-rnd(screenY)-12);

this.vX = null;

this.vY = null;

this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)

this.vAmp = this.vAmpTypes[this.type];

this.melting = false;

this.meltFrameCount = storm.meltFrameCount;

this.meltFrames = storm.meltFrames;

this.meltFrame = 0;

this.twinkleFrame = 0;

this.active = 1;

this.fontSize = (10+(this.type/5)*10);

this.o = document.createElement('div');

this.o.innerHTML = storm.snowCharacter;

this.o.style.color = storm.snowColor;

this.o.style.position = (fixedForEverything?'fixed':'absolute');

this.o.style.width = storm.flakeWidth+'px';

this.o.style.height = storm.flakeHeight+'px';

this.o.style.fontFamily = 'arial,verdana';

this.o.style.overflow = 'hidden';

this.o.style.fontWeight = 'normal';

this.o.style.zIndex = storm.zIndex;

docFrag.appendChild(this.o);

this.refresh = function() {

if (isNaN(s.x) || isNaN(s.y)) {

// safety check

return false;

}

s.o.style.left = s.x+'px';

s.o.style.top = s.y+'px';

};

this.stick = function() {

if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {

s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';

} else if (storm.flakeBottom) {

s.o.style.top = storm.flakeBottom+'px';

} else {

s.o.style.display = 'none';

s.o.style.top = 'auto';

s.o.style.bottom = '0px';

s.o.style.position = 'fixed';

s.o.style.display = 'block';

}

};

this.vCheck = function() {

if (s.vX>=0 && s.vX<0.2) {

s.vX = 0.2;

} else if (s.vX<0 && s.vX>-0.2) {

s.vX = -0.2;

}

if (s.vY>=0 && s.vY<0.2) {

s.vY = 0.2;

}

};



this.move = function() {

var vX = s.vX*windOffset;

s.x += vX;

s.y += (s.vY*s.vAmp);

if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check

s.x = 0;

} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {

s.x = screenX-storm.flakeWidth-1; // flakeWidth;

}

s.refresh();

var yDiff = screenY+scrollY-s.y;

if (yDiff<storm.flakeHeight) {

s.active = 0;

if (storm.snowStick) {

s.stick();

} else {

s.recycle();

}

} else {

if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {

// ~1/1000 chance of melting mid-air, with each frame

s.melting = true;

s.melt();

// only incrementally melt one frame

// s.melting = false;

}

if (storm.useTwinkleEffect) {

if (!s.twinkleFrame) {

if (Math.random()>0.9) {

s.twinkleFrame = parseInt(Math.random()*20,10);

}

} else {

s.twinkleFrame--;

s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {

// main animation loop

// move, check status, die etc.

s.move();

};

this.setVelocities = function() {

s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);

s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);

};

this.setOpacity = function(o,opacity) {

if (!opacitySupported) {

return false;

}

o.style.opacity = opacity;

};

this.melt = function() {

if (!storm.useMeltEffect || !s.melting) {

s.recycle();

} else {

if (s.meltFrame < s.meltFrameCount) {

s.meltFrame++;

s.setOpacity(s.o,s.meltFrames[s.meltFrame]);

s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';

s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';

} else {

s.recycle();

}

}

};

this.recycle = function() {

s.o.style.display = 'none';

s.o.style.position = (fixedForEverything?'fixed':'absolute');

s.o.style.bottom = 'auto';

s.setVelocities();

s.vCheck();

s.meltFrame = 0;

s.melting = false;

s.setOpacity(s.o,1);

s.o.style.padding = '0px';

s.o.style.margin = '0px';

s.o.style.fontSize = s.fontSize+'px';

s.o.style.lineHeight = (storm.flakeHeight+2)+'px';

s.o.style.textAlign = 'center';

s.o.style.verticalAlign = 'baseline';

s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);

s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;

s.refresh();

s.o.style.display = 'block';

s.active = 1;

};

this.recycle(); // set up x/y coords etc.

this.refresh();

};

this.snow = function() {

var active = 0;

var used = 0;

var waiting = 0;

var flake = null;

for (var i=s.flakes.length; i--;) {

if (s.flakes[i].active == 1) {

s.flakes[i].move();

active++;

} else if (s.flakes[i].active === 0) {

used++;

} else {

waiting++;

}

if (s.flakes[i].melting) {

s.flakes[i].melt();

}

}

if (active<s.flakesMaxActive) {

flake = s.flakes[parseInt(rnd(s.flakes.length),10)];

if (flake.active === 0) {

flake.melting = true;

}

}

};

this.mouseMove = function(e) {

if (!s.followMouse) {

return true;

}

var x = parseInt(e.clientX,10);

if (x<screenX2) {

windOffset = -windMultiplier+(x/screenX2*windMultiplier);

} else {

x -= screenX2;

windOffset = (x/screenX2)*windMultiplier;

}

};

this.createSnow = function(limit,allowInactive) {

for (var i=0; i<limit; i++) {

s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));

if (allowInactive || i>s.flakesMaxActive) {

s.flakes[s.flakes.length-1].active = -1;

}

}

storm.targetElement.appendChild(docFrag);

};

this.timerInit = function() {

s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);

};

this.init = function() {

s.randomizeWind();

s.createSnow(s.flakesMax); // create initial batch

addEvent(window,'resize',s.resizeHandler);

addEvent(window,'scroll',s.scrollHandler);

if (!isOldIE) {

addEvent(window,'blur',s.freeze);

addEvent(window,'focus',s.resume);

}

s.resizeHandler();

s.scrollHandler();

if (s.followMouse) {

addEvent(document,'mousemove',s.mouseMove);

}

s.animationInterval = Math.max(20,s.animationInterval);

s.timerInit();

};

var didInit = false;

this.start = function(bFromOnLoad) {

if (!didInit) {

didInit = true;

} else if (bFromOnLoad) {

// already loaded and running

return true;

}

if (typeof s.targetElement == 'string') {

var targetID = s.targetElement;

s.targetElement = document.getElementById(targetID);

if (!s.targetElement) {

throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');

}

}

if (!s.targetElement) {

s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);

}

if (s.targetElement != document.documentElement && s.targetElement != document.body) {

s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions

}

s.resizeHandler(); // get bounding box elements

s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported

fixedForEverything = s.usePositionFixed;

if (screenX && screenY && !s.disabled) {

s.init();

s.active = true;

}

};

function doStart() {

s.start(true);

}
if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);

window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}
}
snowStorm = new SnowStorm();
//]]>
</script>

Y si todo ha salido bien, GUARDAMOS CAMBIOS, y tras esto, ya podemos disfrutar de una magnífica decoración navideña ;)

Muchos saludos a todos y ¡Feliz Navidad!

8 generadores y herramientas web de gran utilidad

Hoy os presentamos una recopilación de generadores que pueden ser de gran utilidad si tienes un blog/web.
Se trata de unas páginas en las que puedes crear fácilmente imágenes, menús, botones, etc.
RECUERDA: Es recomendable que alojes en un servidor propio las imágenes (solo las imágenes).

1. FlashVortex

Página gratuita especializada en la generación de banners, menús, botones, textos, relojes, etc.
Ventajas: Muy buenos efectos, la interfaz de la página es simple y cómoda, en general muy útil, gran variedad de gadgets y de opciones de configuración de los mismos.
Configuración del elemento a generar: Fácil y amplia configuración, instrucciones en inglés, se debe copiar el código para más tarde añadirlo en un Elemento HTML o en una entrada.
Desventajas:  Es necesario registrarse/hacerse miembro (mediante pago) para realizar una imagen sin la molesta publicidad (hacia la página misma) que incorporan en el gadget generado. Página en inglés.

Ejemplo:

Un menú que podría quedar muy bien en las fechas en que estamos:

2. Wigflip 

Pueden conocer algunos detalles de esta página en esta entrada creada anteriormente en La Trucoteca de Blogs,  así como ver algunos ejemplos generados.

3. Email-Icon Generator

En esta página puedes crear tu propio logo para tu correo electrónico. Pueden encontrar más información en la siguiente entrada.

4. Image Chef

 

Compleja web con muchas opciones, así como herramientas para crear tu propia imagen, gadgets, botones, animaciones, etc.

Ventajas: Creación fácil y sencilla, interfaz bien organizada, accesible y cómoda, en español.

Configuración del elemento a generar: Generalemente son pocos los pasos que hay que realizar, además de estar las instrucciones en español.

Desventajas: Presencia de publicidad hacia la página ImageChef en el gadget generado.

Ejemplo:

5.  Widgetbox

Otra web con un amplio contenido relacionado con los widgets: relojes, botones para compartir el blog, etc.
Contituye, para entendernos, un almacén de gadgets que puedes poner facilmente en tu bitácora, al estilo de los que Blogger pone a la disposición, pero con publicidad hacia su sitio web, además de continuos anuncios desplegables.
Configuración del elemento a generar: Al ser simplemente widgets, no pueden ser personalizados y el único paso que se tiene que seguir es el de seleccionar el deseado y copiar/pegar el código que te ofrecen pinchando sobre Get Widget. Interfaz de la página en inglés.
Desventajas: Publicidad en los widgets "un poco" abusiva, página en inglés.

6. Buttonator

Crea botones de alta calidad gratuitamente con esta sencilla página, cuyas instrucciones están en Inglés.
Ventajas: No tiene ni publicidad ni enlace hacia la web creadora. Variedad de opciones en la personalización del botón, con algunos iconos incluidos.

7. PicJoke
Una de las webs más sencillas para realizar retoques fotográficos, sin complicaciones, cuyo único "pero" sería la incrustación del nombre de la pagina (Picjoke.com) en la fotografia retocada.
Aquí os dejamos un ejemplo de los muchos tipos de fotografias que se pueden generar:

8. Pixel Button
Ya no tienes excusas para no disponer de un banner, por pequeño que sea, en tu blog, y es que con esta página podrás crear facilmente botones anti-pixel muy atractivos, que constituyen una buena opción a la hora de enlazar.
Puedes cambiar el color del fondo del botón, el color de la letra, y se puede descargar en dos formatos: .gif y .png

Ejemplo:

Esperamos que os sirvan estas 8 webs.
Y tú, ¿conoces alguna página más relacionada con el tema? Si es interesante, la añadiremos en esta entrada. Nos interesa tu opinion, ¡anímate y comenta!

Añadir fondo a un gadget:

Añadiendo unos cuantos codigos a nuestra plantilla vamos a conseguir agregar un fondo a un Elemento/Gadget de la sidebar o de cualquier otra parte del blog.
El fondo puede ser una imagen o un color en particular.

En este blog se puede apreciar claramente como algunos elementos de la sidebar disponen de una imagen como fondo: solo tienes que expandir, por ejemplo, el etiquetador o el archivador.

1. Nos dirigimos a Diseño>Edicion de HTML y Expandimos Artilugios

Debes de tener claro cual va a ser el elemento al que queremos añadir un fondo. Por ejemplo, si quieres agregarselo al Archivo del Blog, tienes que encontrar este codigo (recuerda expandir artilugios y buscar con Ctrl+F):

<b:widget id='BlogArchive1' locked='false' title='Archivador' type='BlogArchive'>

2. Ahora tienes que copiar el id del elemento, que en este caso seria BlogArchive1, y colocarlo con este codigo:

ATENCIÓN: Este codigo lo pondremos encima de ]]></b:skin>

#BlogArchive1{
background: #000000; 
}

3. Debes cambiar  000000, que en este caso corresponde al color negro, por el que tu quieras.

• El fondo de este gadget sería de color NEGRO, pero, como ya he dicho, puedes cambiarlo por el que tu quieras. Puedes utilizar la siguiente página para obtener el código hexadecimal del color que prefieras.

■ Para agregar de fondo una imagen debes de hacer lo mismo que en el paso anterior, pero poniendo este codigo:

ATENCIÓN: Este codigo lo pondremos también encima de ]]></b:skin>

#BlogArchive1{
background: url(URL-DE-TU-IMAGEN) ;
}

Solo tienes que cambiar URL-DE-TU-IMAGEN, por la correspondiente.

Y si todo se ha hecho correctamente, GUARDAMOS CAMBIOS :)

Saludos!!!

Decora y personaliza tu blog para Halloween:

 Especial entrada Halloween 2009!

Como sabréis, este Sábado se celebra la fiesta de Halloween, asi que, ¿que mejor idea que decorar tu blog aprovechando esta fiesta?
Pues bien, en esta entrada te vamos a mostrar un montón de trucos para que puedas dejarlo fantástico.

1. Pon un cursor halloweño en tu blog (También sirve para cualquier otro cursor):

Probablemente ya habrás visto el cursor del fantasmita que sale en este blog.
Pues ponerlo es muy fácil, basta con añadir un poco de CSS en la Edición de Html de tu plantilla.

1º: Buscamos un cursor que nos guste por internet. En la página www.totallyfreecursors.com/search.cfm?q=halloween  puedes encontrar muchos cursores de Halloween, aqui tienes varios ejemplos y la URL que ahora después utilizaremos:

 

http://downloads.totallyfreecursors.com/cursor_files/ghost.cur

http://downloads.totallyfreecursors.com/cursor_files/pumpkin.cur

http://downloads.totallyfreecursors.com/cursor_files/witchmoon.ani

http://downloads.totallyfreecursors.com/cursor_files/frankenstein.ani

http://downloads.totallyfreecursors.com/cursor_files/ghost4.ani

http://downloads.totallyfreecursors.com/cursor_files/scream1.ani

http://downloads.totallyfreecursors.com/cursor_files/femalevampire2.cur

http://downloads.totallyfreecursors.com/cursor_files/tombstone1.ani

http://downloads.totallyfreecursors.com/cursor_files/witch2.ani

2º: Con nuestro cursor elegido, vamos a Diseño> Edicion de HTML de la plantilla:

(Puede que os salga despues de algo asi:   /*-- (Generales) --*/  )

Ahora buscamos (Ctrl+F):  body {

Y debajo pegamos...

cursor: url("AQUI-LA-URL-DEL-CURSOR-QUE-NOS-GUSTE");

Y ahora ya puedes GUARDAR LA PLANTILLA.

2. Iconos de Halloween para tu blog:

Si, navegando por internet y la blogosfera, hemos visto muchos iconos para este Halloween. De redes sociales, Twitter, de Blogging, y otros cuantos más, asi que ¿porque no hacer una pequeña recopilación? (y de paso les promocionamos un poco )

• Halloween Twitter Icons, de nuestro amigo Iván de BanakaBanaka!, que aprovechando esta fiesta ha creado unos fantásticos iconos:

Solo tienes que ir a esta entrada y descargarlos totalmente gratis para empezar a disfrutar de ellos.

•  Trick or tweet pack:

Una colección de graciosas calabazas de Design Blog, disponibles en varios tamaños en ésta dirección.

• Free Jack-o’-lantern Social Media Icons – Halloween Edition
  
  

Todo tipo de logotipos de redes sociales esculpidos en calabazas :) . Aqui toda la información y descarga:

Free Jack-o’-lantern Social Media Icons – Halloween Edition

• Social Media Icons de TNerd.com 

  Un fantástico pack de iconos de redes sociales muyyy terrorificos y de buenísima calidad, que aunque son del año pasado, te pueden ser de mucha utilidad . Toda la información y su descarga en http://tnerd.com/2008/10/31/halloween-wallpapers-and-social-media-icons-from-tnerdcom
  

3. Flecha de subir con imagen de Halloween:

Habrás visto que en la esquina de éste blog, estos días hemos reemplezado el cartoncito por una calabaza, y  que al pinchar sobre ella, se sube hasta arriba con un efecto deslizante muy elegante.

Pues bien, es muy fácil ponerlo, tan solo tienes que seguir los pasos de esta entrada, y utilizar si quieres esta imagen especial que hemos hecho para Halloween:

En el apartado "Paso para colocar la flechita de "ir arriba" en la parte inferior derecha de la página" que saldrá en esa entrada, tendrás que cambiar la URL DE LA IMAGEN O FLECHA por la de la imagen anterior, o por la que tu quieras.

4. GIF permanente animado de Halloween en la esquina superior de tu blog.

Antes de </body> en Edición de HTML de nuestra plantilla, pegamos lo siguiente:

<img src='http://www.halloween.com.es/images/brujas.gif' style='position:fixed; top:0; left:0;'/>

Como veréis, la imagen que saldrá es la que tenemos puesta en este blog, pero puedes cambiarla por cualquier imagen que te guste. También puedes poner ésta imagen que nos proporcionaba El Potro en esta entrada de Ciudad Blogger.

Gracias, El Potro una vez más :-)

Nosotros también te recomendamos una página donde podrás encontrar interesantes gifs animados para decorar tu blog: Gifs de Halloween.com.es

Unos cuantos ejemplos:

 

 

 

 

Pues ya está, seguro que habras dejado tu blog monstruosamente fantástico con estos truquitos. Nosotros dejaremos todos estos trucos durante unos días para que veas como quedan :).

Y por cierto, si lo has decorado "Halloweñamente", nos puedes dejar tu comentario y participar en el listado de sitios Halloweños, gratuitamente.

¡¡¡Promoción!!

Aquí puede estar tu blog, anímate a decorarlo y déjanos un comentario!

Esperamos que te haya gustado la entrada, ¡¡muchos saludos!!