Diversas y Variadas (Ayuda Blogger)

Cambiar color de selección de texto en el blog

2012-05-27T16:02:00.006-07:00

Varias personas me han estado preguntando que cómo hago para poner un color de selección al texto de mi blog, como pueden ver en esta imagen:

Éso se puede hacer de una forma muy sencilla:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y justo antes de éste, pegaremos el siguiente código:

::-moz-selection { background: #ff0066; color: white; /* Firefox */ }
::-moz-selection { background: #ff0066; color: white; /* Opera */ }
::-moz-selection { background: #ff0066; color: white; /* Chrome */ }

Donde #ff0066 es el color de selección, que podemos cambiar por cualquier otro; white es el color del texto al momento de seleccionarlo.
Lamentablemente, el color de selección no funciona en IE.

Menú vertical multinivel con jQuery

2012-05-18T16:29:00.006-07:00

Hoy vamos a ver cómo hacer un sencillo menú multinivel usando jquery, html y css. Este menú es bastante sencillo de implementar y de personalizar.

( ↪DEMO)Pasar el cursor sobre la Pestaña 3

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:

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

3.§ Debajo del código anterior, pegaremos el siguiente script:

<script type='text/javascript'>
$(document).ready(function(){
$('#fmt li').hover(function (){
$(this).addClass('selected'); $(this).find('ul:first').slideDown();},
function (){$(this).removeClass('selected'); $(this).find('ul.fmtDrpDwn').hide()});
$('.fmtDrpDwn li').hover(function (){
$(this).find('ul:first').show('slide', {direction: 'left'}, 10000);},
function (){$(this).find('ul').hide()});
});
</script>

4.§ Ahora agregaremos los estilos CSS encima de ]]></b:skin>. Estos estilos podemos modificarlos a nuestro gusto, cambiando los colores, tamaño de fuente,etc. :

#main{width:190px; height:auto; margin:0;}
#fmt {width:auto; height:auto;background:#e2e2e2; padding-top:12px; margin-left:20px; border:1px solid #666666;-moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1;}
#fmt ul {margin:0px; padding:0px; list-style:none;}
#fmt ul li {position: relative; width:auto; text-align:left; margin:0 0px; }
#fmt ul li ul { display:none ;}
#fmt ul li a { font-family:Tahoma;text-decoration:none;color:#636363; display:block; font-size:12px;}
#fmt ul li a span {display:block; height:31px; line-height:31px;padding-left:20px;}
#fmt ul li a:hover {background:; color:#e8fffa; font-weight:bold;}
#fmt ul li a.active span, #fmt ul li a.active:hover { background:#FAC61C!important; color:#fff; font-weight:bold; height:31px; line-height:31px; }
#fmt ul li.selected { background: #FAC61C; color:#FFFFFF; font-weight:bold; }
#fmt ul li.selected a { color:#fff;}
#fmt ul li ul.fmtDrpDwn, #fmt ul li ul.fmtDrpDwn ul { position:absolute; left:168px; top:0; background:#FAC61C; width:185px; -moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1; padding-left:2px; border-top:solid 2px #fbc67a;}
#fmt ul li ul.fmtDrpDwn li, #fmt ul li ul.fmtDrpDwn ul li{ text-align:left; float:none; display:block; width:183px;}
#fmt ul li ul.fmtDrpDwn li a { font:normal 11px 'Tahoma', Arial, Helvetica, sans-serif; color:#fff; display:block; height:23px; line-height:23px; display:block; text-indent:15px;}
#fmt ul li ul.fmtDrpDwn li a:hover { font-weight:bold; background:#f47d12;}
#fmt ul li ul.fmtDrpDwn li.selected {background:#f47d12; font-weight:bold; -moz-box-shadow:none; -webkit-box-shadow:none;box-shadow:none;}
#fmt ul li ul.fmtDrpDwn ul { position:absolute; left:100%; top:0px; }

5.§ Finalmente, para agregar el menú, armaremos el siguiente HTML en el lugar donde queramos agregarlo (como es un menú vertical, tendría que ser dentro de un gadget, en la sidebar). Si queremos, también podemos quitar niveles :

<div id="main">
<div id="fmt">
<ul>
<li ><a href="#"class="active"><span>Pestaña 1</span></a></li>
<li class=""><a href="#"><span>Pestaña 2</span></a></li>
<li><a href="#"><span>Pestaña 3</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 3.1</a></li>
<li><a href="#">Nivel 3.2</a>
<ul>
<li><a href="#">Nivel 3.2.1</a></li>
<li><a href="#">Nivel 3.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 3.3</a></li>
<li><a href="#">Nivel 3.4</a></li></ul>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
<li><a href="#"><span>Pestaña 6</span></a></li>
<li><a href="#"><span>Pestaña 7</span></a></li>
</ul>
</div>
</div>

- Para agregar una nueva pestaña, agregaremos lo siguiente antes de la </ul> que está en negrita:

<li><a href="#"><span>Pestaña 8</span></a></li>

- Si queremos agregar una pestaña con niveles interiores, tendríamos que agregar lo siguiente, siempre antes de la última </ul> :

<li><a href="#"><span>Pestaña 8</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 8.1</a></li>
<li><a href="#">Nivel 8.2</a>
<ul>
<li><a href="#">Nivel 8.2.1</a></li>
<li><a href="#">Nivel 8.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 8.3</a></li>
<li><a href="#">Nivel 8.4</a></li></ul>

En un próximo tutorial, veremos cómo hacer un menú multinivel, pero horizontal.

I Love You Icons

2012-05-08T09:30:00.003-07:00

I love you es un set de íconos que pueden ser usados para hacer tarjetas por el día de la madre o simplemente para decorar nuestro blog o PC.

CARACTERÍSTICAS

El pack contiene 13 íconos: dos cajas de bombones, cuatro osos de peluche, dos cartas, un plato de galletas, dos tazas de café y un regalo.
Autor : kzzu
Formato: PNG, ICO.
Tamaño: 256x256.

Descargar

Texto con efecto colorido en Photoshop

2012-04-28T17:54:00.005-07:00

En este video-tutorial les enseñaré como hacer un texto con un efecto muy vistoso, con sombras y color. Les dejo también el link de los materiales.

Descargar materiales

Añade el botón de Pinterest para compartir tus post

2012-04-18T14:28:00.008-07:00

Pinterest es una red social que está de moda y si queremos tener en el blog un botón para compartir nuestras entradas, hoy les ensñaré cómo hacerlo.

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Escogemos el lugar donde queremos que está el botón (puede ser al inicio o al pie de le entrada).

3.§ Una vez decidido el lugar para colocarlo, escogemos uno de estos tres botones.

Cabe indicar que podemos pegar el código tal como está o sino podemos separarlo y pegar el script antes de </body>:

» Botón Vertical:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

» Botón Horizontal:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

» Botón sin contador:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='none' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

Visto en : LatestHack y Tumblring

Enfocar una parte de una imagen en Photoshop

2012-04-07T09:47:00.002-07:00

En este tutorial haremos que el resto de la imagen quede desenfocado y que una parte quede resaltada. Esto lo lograremos mediante el uso de dos filtros: desenfoque y enfoque.

Nivo Slider » slideshow con varios efectos

2012-03-27T16:03:00.008-07:00

Hoy les traigo un slideshow de imágenes muy vistoso, bonito y fácil de instalar en nuestro blog.

( ↪DEMO)

El slider se llama Nivo y a continuación les enseñaré cómo instalarlo:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:

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

3.§ Debajo del código anterior, pegaremos el siguiente script de Nivo Slider o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:

✵ Ver SCRIPT [+/-]

4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

#slider-container {
width: 940px;
height: 380px;
background: #FFF;
margin-bottom: 15px;}

.nivoSlider {
position:relative;}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;}

.nivo-caption {
position:absolute;
right:0px;
top:250px;
background: #ffffff; /*color del rectángulo transparente*/
color:#DF7BDA;
opacity:0.8;
width: 100%;
z-index:89;
display: inline;}

.nivo-caption p {
padding:3px;
margin:0;
font-size: 20px;
color: #DF7BDA; /*para modificar color del texto*/
text-align: right;
font-family: 'PT Sans', Helvetica, Arial;
}

.nivo-caption a {
display:inline !important;
color: #DF7BDA;}

.nivo-html-caption {
display:none;}

.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;}

.nivo-prevNav {
left:0px;}

.nivo-nextNav {
right:0px;}

.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;}

.nivo-controlNav a.active {
font-weight:bold;}

#slider {
float: left;
position:relative;
width:600px;
height:300px;
background: #000 url(http://img833.imageshack.us/img833/4175/loadingpy.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:230px;
bottom:-40px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://3.bp.blogspot.com/-uY-843TxLu4/T3D3Bk4mxoI/AAAAAAAABfo/CL-VgavJWxk/s000/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:none;
height:0px;
background:url no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position: -30px 0;
right:15px;
}

a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
}

.nivo-caption a {
color:#000;
text-decoration:underline;
}

5.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :

<div id='slider'>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
</div>

6.§ Vamos a vista previa y si todo está bien le damos a Guardar. Ahora pueden modificarlo a su gusto. En la página web del slide podrán ver todos los efectos que pueden agregarse.

Nivo Slider

ClipYourPhotos » añade marcos a tus fotos

2012-03-16T15:41:00.004-07:00

ClipYourPhotos es una herramienta online que nos permitirá añadir bonitos y coloridos marcos a nuestras fotor o imágenes.

Aquí, un video con todos los marcos que tiene esta útil herramienta:

ClipYourPhotos

My Secret Icons

2012-03-13T01:03:00.001-07:00

My Secret es un pack de hermosos íconos creados por ArtDesigner.

CARACTERÍSTICAS

El pack contiene 10 íconos: un cofre, llave, diamante, flor, sobre cerrado, antifaz, recipiente con monedas, una botella con una carta, un libro y un oso de peluche.
Autor : ArtDesigner
Formato: PNG.
Tamaño: 128x128.

Descargar

Punto de fuga en Photoshop

2012-03-09T14:55:00.003-08:00

En este tutorial de Photoshop, les enseñaré a usar el filtro Punto de Fuga de Photoshop, que les va a ayudar cuando quieran crear algo con perspectiva.

Wallpapers-calendario para marzo

2012-03-06T13:35:00.006-08:00

Para este mes, no puede faltar en el escritorio de nuestra PC uno de los espectaculares wallpapers calendario que nos trae Smashing Magazine. Aquí una pequeña muestra.

Descargar

Efecto burbujas en el cursor

2012-03-01T15:31:00.009-08:00

Hace un tiempo vimos un tutorial de cómo agregar un efecto de estrellas en el cursor. Hoy les traigo otro efecto similar para el cursor del blog, agregando burbujas que suben por la pantalla.

( ↪ Ver DEMO)

Bien, para agregar este efecto seguimos los siguientes pasos :

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Cursor burbujas
// <![CDATA[
var colours=new Array("#FF9900", "#FF9900", "#FF9900", "#FF9900", "#FF9900");
var bubbles=70;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
if (navigator.appName=="Microsoft Internet Explorer") div.filter="alpha(opacity=50)";
else div.opacity=0.5;
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
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;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

3.§ Para cambiar el color de las burbujas, sustituímos los cinco #FF9900 del código por otro color

4.§ Damos click a guardar y listo!

Ver demo

Pixlr-o-matic » editas tus imágenes online

2012-02-24T15:44:00.016-08:00

Pixlr-o-matic es una herramienta online que nos permitirás agregar, de forma sencilla y rápida, efectos a nuestras imágenes o fotos.

Podemos agregar Actions ( acciones parecidas a las que encontramos en Photoshop), Texturas y Marcos. Aquí les dejo un video con todos los efectos disponibles:

Pixlr-o-matic

Corazones cayendo en el blog

2012-02-06T15:54:00.000-08:00

Ya faltan pocos días para el 14 de febrero, así que hoy les traigo un tutorial que les servirá para colocar corazones que caen por su blog. Es muy sencillo de aplicar al blog, como ya se darán cuenta.

( ↪ Ver DEMO)

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y elegimos HTML/Javascript.

2.§ Pegaremos el siguiente script:

<script type='text/javascript'>
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>

Lo que está en negrita, es la URL del gif de corazón, que podemos reemplazar por otra imagen.

3.§ Finalmente, damos click en Guardar.

Dos sets de íconos de redes sociales

2012-01-30T17:41:00.001-08:00

Aquí les dejo dos packs de íconos de redes sociales. Disfrútenlos!

TAKEOUT COFFEE CUP ICONS

Contiene 10 íconos de redes sociales: facebook, twitter, google+, rss, flickr, yahoo, deviantart, dribble, digg y delicious.
Autor : Land of web
Formato: PNG.
Tamaño: 512x512px, 256x256, 128x128, 64x64, 32x32.

Descargar

COFFEE PAGES ICONS

Contiene 6 íconos de redes sociales: facebook, twitter, technorati , rss, yahoo, y youtube.
Autor : Alenet21tutos
Formato: PNG, ICO.
Tamaño: 128x128.

Descargar

RoundPic » añadiendo esquinas redondeadas

2012-01-21T14:56:00.000-08:00

RoundPic es una herramienta gratuita, de fácil uso, que permite redondear las esquinas de nuestras imágenes, consiguiendo un efecto similar al que se logra con Photoshop.

Lo único que tenemos que hacer es subir una imagen, seleccionar las opciones para redondear las esquinas de la imagen, dar click en Round y listo.

RoundPic

La Bruxa (corto animado) + Pinceles Anime Eyes

2012-01-07T13:35:00.000-08:00

Bueno, en este primer post del año voy a compartirl con ustedes dos cositas: un cortometraje y unos pinceles.

La Bruxa: cortometraje animado
La Bruxa es un cortometraje animado que me gustó mucho; además, fue ganadora de los premios Goya en el 2011, en su categoría, al mejor corto de animación. Tiene una duración de 11 minutos.

Click en la imagen para ver el video (esperad unos segundos a que cargue)

Anime Eyes Brushes
Este es un pack de pinceles de ojos de Anime, que pueden ser muy útiles para nuestras creaciones. Autor: Coby17

Descargar

Plastic Icon Set

2011-12-14T01:05:00.000-08:00

Plastic es una colección de íconos navideños.

CARACTERÍSTICAS

Pack de siete íconos navideños: calendario, velas, gato navideño, bola navideña, tarjeta navideña y Santa.
Autor : PaintIcon
Formato: PNG.
Tamaño: 256x256, 128x128, 64x64, 48x48, 32x32, 24x24, 16x16.

Descargar

Título de los post con sombra y efecto Mouseover

2011-12-10T13:21:00.000-08:00

Hoy vamos a ver cómo agregar un efecto bonito para darle un poco de dinamismo a los títulos de los post. Para ello, agregaremos una sombra y el efecto mouseover a los títulos.

( ↪ Ver DEMO)

1.§ Vamos a Diseño - Edición de HTML y buscamos .post h3 {

2.§ Entre llaves, debajo de .post h3 { veremos un código y una llave de cierre } antes de esa llave de cierre, dentro de .post h3 { pegaremos el siguiente código:

border-left:7px solid #666;
border-right:7px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 4px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 4px #666;

Lo que está en negrita es el color de la sombra; podemos reemplazarlo por otro color, pero debe ser el mismo en los cinco casos en que se repite. También podemos modificar el ancho de la sombra.

3.§ Antes de .post h3 { pegaremos lo siguiente, que es el código para darle el efecto Mouseover:

.post h3:hover {
font-style:italic;
border-left:7px solid #FF133F;
border-right:7px solid #FF133F;
box-shadow:0px 0px 4px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 4px #FF133F;
}

Igual que en el caso anterior, podemos reemplazar lo que está en negrita por otro color. Ese será el color de la sombra cuando pasemos el cursor por encima del título del blog. Para ver el efecto en funcionamiento puedes pasar el cursor encima de los títulos de mi blog de pruebas.

4.§ Damos click en Guardar.

Cartel de aviso flotante

2011-11-15T01:01:00.000-08:00

Hoy veremos cómo agregar a nuestro blog un cartel de aviso flotante, con botón de cerrar, que puede sernos de mucha utilidad cuando queremos comunicar algo o simplemente para dar la bienvenida a nuestro blog e invitar a nuestros lectores a suscribirse.

El cartel, lo pueden ver funcionando en mi blog de pruebas. Aquí les dejo una imagen:

Bien, entonces empecemos:

1.§ Vamos a Diseño - Edición de HTML y buscamos ]]></b:skin>.

2.§ Encima pegaremos los estilos:

#aviso {
background-color: #e2e2e2; /* color del fondo */
border: 3px solid #CA185F; /* color del borde */
color: #000000; /* color del texto */
font-size: 14px; /* tamaño de fuente */
font-family: Arial; /* tipo de fuente */
text-align: center;
padding: 5px;
position: fixed;
top: 20px;
right: 65%;
width: 250px;
}

Para cambiar la posición del cartel, debemos de cambiar los valores top y right. Si deseamos podemos agregar más estilos como sombras, bordes redondeados, etc.

3.§ Ahora buscaremos </body> y encima de éste pegaremos lo siguiente:

<div id='aviso'>
<div align='right' style='margin-bottom:-15px;'><a href='javascript:void(0);' onclick='document.getElementById('aviso').style.display='none';'>
<img src='http://4.bp.blogspot.com/-gGArecPnSoc/TsGjlbSfbcI/AAAAAAAABbA/CKc046eGiQI/s1600/Close.png'/>
</a></div>
<p>Aquí pegar el contenido del aviso</p>
</div>

Lo resaltado en negrita es la URL de la imagen del botón; podemos reemplazarla por otra. En donde dice Aquí pegar el contenido del aviso, colocaremos el contenido del cartel. En el ejemplo, puse un texto de bienvenida y dos botones, uno de Twitter y otro de Facebook.

4.§ Una vez terminado esto, damos click en Guardar y listo.

Ver demo

Stripe Patterns

2011-10-17T01:01:00.000-07:00

Stripe Patterns es una colección de 6 motivos o patrones para Photoshop.

CARACTERÍSTICAS

Pack de seis motivos en varios colores: rojo, violeta, azul, verde, amarillo y anaranjado en tonos pastel.
Autora : Jessica YK (DiyVa-Jessica)
Formato: PAT
Licencia: Este trabajo está bajo una licencia Creative Commons.

Descargar

RedKaraoke » un karaoke online

2011-10-12T01:07:00.000-07:00

Red Karaoke es una página que ofrece un karaoke online, con muchas canciones, además permite grabar tu canción, de modo que puedas compartirla en Facebook, Twitter o por correo.

Ofrece también la posibilidad de descargar la pista instrumental y además puedes participar en juegos, retos y concursos. Es decir una página muy completa y donde podrás divertirte cantando!

Click en la imagen para ampliar

Red Karaoke

Efecto estrellas de colores en el cursor

2011-10-10T15:30:00.000-07:00

Hoy les traigo un tutorial con un efecto muy bonito que pueden implementar en su blog o web. Se trata de uns estrellitas de colores que caen cuando se mueve el cursos. Pueden ver los resultados en mi blog de pruebas.

Bien, para implementar este efecto, seguimos los siguientes pasos :

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Cursor estrellas
// <![CDATA[
function initCursor() {
if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}

var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
var sparkles = 35;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}

function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}

function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
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;
}
}

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;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
rainbow="#"+hex[r]+hex[g]+hex[b]
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.zIndex="10";
div.style.backgroundColor=rainbow;
return (div);
}
window.onload=function()
{
initCursor()
initImage()
startTime()
}

function initImage() {
imageId = 'menu'
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

function changeNav(id) {
document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
document.getElementById('rabbit').style.top="275px"
document.getElementById('penguin').style.top="532px"
}

function hidestatus(){
window.status=""
return true
}
// ]]>
</script>

3.§ Damos click a guardar y listo!

Ver demo

Twitter to RSS » seguir twitter desde un lector feed

2011-10-05T01:03:00.000-07:00

Twitter to RSS es una herramienta online y gratuita que nos permite seguir una cuenta de Twitter mediante nuestro lector de feeds favorito.

Es bastante sencilla de usar. Bastará con escribir el nombre de usuario de la cuenta de Twitter y dar click en Send. Aparecerá una lista con los tweets al lado de una lista de lectores de feed. Escogemos uno de éstos y listo.

Click en la imagen para ampliar

Twitter to RSS

Vistas dinámicas en Blogger

2011-10-03T16:26:00.001-07:00

Durante estas últimas semanas y meses, Blogger ha ido introduciendo nuevos cambios y novedades.

Y una de las novedades que se ha venido comentando a lo largo de la última semana son las Vistas dinámicas que pueden ser usadas ahora como plantillas.

Para acceder a ellas, vamos a Plantilla; si tenemos la interfaz anterior, podemos acceder a las plantillas desde el Diseñador de Plantillas.
Son siete plantillas nuevas: Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot y Timeslide.

Si no estamos seguros de cambiar nuestra plantilla por una de estas nuevas, podemos ir probándolas en un blog de pruebas.

Click en la imagen para ver el video

Más información en : Blogger Buzz