Efecto lluvia que cae por el blog con JavaScript

¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata del efecto de lluvia que cae por nuestro blog o web. Es un efecto muy vistoso y lo agregaremos fácilmente con código JavaScript.

( ↪ Ver DEMO)

Post recomendado:
6 efectos para el cursor de tu web o blog

Empecemos con el tutorial.

1.§ Vamos a Diseño - Añadir un gadget.

2.§ De la ventana emergente, elegimos HTML/Javascript pegaremos el siguiente script:

<script type='text/javascript'>var hpnm092_prj_no = "92";
var hpnm092_prj_nm = "hpnm092";
var hpnm092_ball_num = 30;
var hpnm092_ball_sbt_num =1;
var hpnm092_subball_num = 5;
var hpnm092_subball_sbt_num = 3;

var hpnm092_i, hpnm092_n;
var hpnm092_obj;
var hpnm092_img;
var hpnm092_obj_sub;
var hpnm092_img_sub;

var hpnm092_preimg = new Array();
hpnm092_preimg[0] = new Image();
hpnm092_preimg[0].src = "http://www.hapinemu.net/fobp/bp092/ball1.gif";
hpnm092_preimg[1] = new Image();
hpnm092_preimg[1].src = "http://www.hapinemu.net/fobp/bp092/ball2.gif";

var hpnm092_preimg_sub = new Array();
hpnm092_preimg_sub[0] = new Image();
hpnm092_preimg_sub[0].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";
hpnm092_preimg_sub[1] = new Image();
hpnm092_preimg_sub[1].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";
hpnm092_preimg_sub[2] = new Image();
hpnm092_preimg_sub[2].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";

var hpnm092_objBody = document.getElementsByTagName("body").item(0);
var hpnm092_elem;
for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_elem = document.createElement('div');
hpnm092_elem.id = hpnm092_prj_nm + '_ball' + hpnm092_i;
hpnm092_elem.innerHTML = '<img id="' + hpnm092_prj_nm + '_ball_img' + hpnm092_i + '" style="border:0;">';
hpnm092_elem.style.position = 'absolute';
hpnm092_elem.style.visibility = 'hidden';
hpnm092_elem.style.margin = '0px';
hpnm092_elem.style.padding = '0px';
hpnm092_objBody.appendChild(hpnm092_elem);
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_elem = document.createElement('div');
hpnm092_elem.id = hpnm092_prj_nm + '_subball' + hpnm092_i + hpnm092_n;
hpnm092_elem.innerHTML = '<img id="' + hpnm092_prj_nm + '_subball_img' + hpnm092_i + hpnm092_n + '" style="border:0;">';
hpnm092_elem.style.position = 'absolute';
hpnm092_elem.style.visibility = 'hidden';
hpnm092_elem.style.margin = '0px';
hpnm092_elem.style.padding = '0px';
hpnm092_objBody.appendChild(hpnm092_elem);
}
}

function hpnm092_getViewTop() {
if( window.scrollY ) return window.scrollY;
if( window.pageYOffset ) return window.pageYOffset;
if( document.documentElement && document.documentElement.scrollTop ) {
return document.documentElement.scrollTop;
}
else if( document.body && document.body.scrollTop ) {
return document.body.scrollTop;
}
return 0;
}

function hpnm092_getViewLeft() {
if( window.scrollX ) return window.scrollX;
if( window.pageXOffset ) return window.pageXOffset;
if( document.documentElement && document.documentElement.scrollLeft ) {
return document.documentElement.scrollLeft;
}
else if( document.body && document.body.scrollLeft ) {
return document.body.scrollLeft;
}
return 0;
}

function hpnm092_getViewHeight() {
if( window.innerHeight ) return window.innerHeight;
if( document.documentElement && document.documentElement.clientHeight ) {
return document.documentElement.clientHeight;
}
else if( document.body && document.body.clientHeight ) {
return document.body.clientHeight;
}
return 0;
}

function hpnm092_getViewWidth() {
if( window.innerWidth ) return window.innerWidth;
if( document.documentElement && document.documentElement.clientWidth ) {
return document.documentElement.clientWidth;
}
else if( document.body && document.body.clientWidth ) {
return document.body.clientWidth;
}
return 0;
}

function hpnm092_getViewBottom() {
return hpnm092_getViewTop() + hpnm092_getViewHeight();
}

function hpnm092_getViewRight() {
return hpnm092_getViewLeft() + hpnm092_getViewWidth();
}

function hpnm092_getRandomNum(num) {
return Math.floor( Math.random() * num );
}

function hpnm092_setOpacity(elem, op){
elem.style.filter = 'alpha(opacity=' + (op * 100) + ')';
elem.style.MozOpacity = op;
elem.style.opacity = op;
}
var hpnm092_action = new Array();
var hpnm092_actioncnt = new Array();
var hpnm092_balltop = new Array();
var hpnm092_balltop_to = new Array();
var hpnm092_ballleft = new Array();
var hpnm092_ballspeed = new Array();
var hpnm092_ballopacity = new Array();
var hpnm092_balltype = new Array();
var hpnm092_subballtop = new Array();
var hpnm092_subballleft = new Array();
var hpnm092_subballmovelr = new Array();
var hpnm092_subballspeedv = new Array();
var hpnm092_subballspeedh = new Array();

for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_action[hpnm092_i] = 0;
hpnm092_subballtop[hpnm092_i] = new Array();
hpnm092_subballleft[hpnm092_i] = new Array();
hpnm092_subballmovelr[hpnm092_i] = new Array();
hpnm092_subballspeedv[hpnm092_i] = new Array();
hpnm092_subballspeedh[hpnm092_i] = new Array();
hpnm092_ballopacity[hpnm092_i] = new Array();
}


function hpnm092_fire() {

var hpnm092_viewbottom = hpnm092_getViewBottom();
var hpnm092_viewright = hpnm092_getViewRight() - 40;
var hpnm092_viewtop = hpnm092_getViewTop();
var hpnm092_viewleft = hpnm092_getViewLeft();

for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_obj = document.getElementById(hpnm092_prj_nm + '_ball'+hpnm092_i);
hpnm092_img = document.getElementById(hpnm092_prj_nm + '_ball_img'+hpnm092_i);

switch(hpnm092_action[hpnm092_i]) {
case 0:
if( hpnm092_getRandomNum( 100 ) == 0 ) {
hpnm092_balltype[hpnm092_i] = hpnm092_getRandomNum( hpnm092_ball_sbt_num ) + 1;
hpnm092_img.src = hpnm092_preimg[ 0 ].src;
hpnm092_balltop[hpnm092_i] = hpnm092_viewtop - hpnm092_img.height;
hpnm092_ballleft[hpnm092_i] = ( hpnm092_viewleft + hpnm092_getRandomNum( hpnm092_viewright - hpnm092_viewleft - 20 ) );
hpnm092_ballspeed[hpnm092_i] = 30;
hpnm092_balltop_to[hpnm092_i] = ( hpnm092_viewtop + hpnm092_getRandomNum( hpnm092_viewbottom - hpnm092_viewtop - 250 ) ) + 150;
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_obj.style.left = hpnm092_ballleft[hpnm092_i] + 'px';
hpnm092_obj.style.visibility = 'visible';
hpnm092_action[hpnm092_i] = 1;
hpnm092_actioncnt[hpnm092_i] = 0;
hpnm092_ballopacity[hpnm092_i] = 0.5;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
}

break;

case 1:
hpnm092_balltop[hpnm092_i] += hpnm092_ballspeed[hpnm092_i];
if( hpnm092_balltop[hpnm092_i] < hpnm092_balltop_to[hpnm092_i] - 50 ) {
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_balltop[hpnm092_i] = hpnm092_balltop_to[hpnm092_i];
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_img.src = hpnm092_preimg[ hpnm092_balltype[hpnm092_i] ].src;
hpnm092_ballopacity[hpnm092_i] = 0.3;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
hpnm092_obj.style.left = (hpnm092_ballleft[hpnm092_i]-15) + 'px';
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_img_sub.src = hpnm092_preimg_sub[ hpnm092_getRandomNum( hpnm092_subball_sbt_num ) ].src;

hpnm092_subballtop[hpnm092_i][hpnm092_n] = hpnm092_balltop_to[hpnm092_i] + 15;
hpnm092_subballleft[hpnm092_i][hpnm092_n] = hpnm092_ballleft[hpnm092_i];
hpnm092_subballmovelr[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 2 );
hpnm092_subballspeedv[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 3 ) + 1;
hpnm092_subballspeedh[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 3 ) + 1;

hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.visibility = 'visible';
}
hpnm092_action[hpnm092_i] = 2;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

case 2:

for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_subballtop[hpnm092_i][hpnm092_n] -= ( 20 - hpnm092_actioncnt[hpnm092_i] ) * hpnm092_subballspeedv[hpnm092_i][hpnm092_n] / 8;
hpnm092_subballleft[hpnm092_i][hpnm092_n] -= ( hpnm092_subballmovelr[hpnm092_i][hpnm092_n] == 0 ? 1 : -1 ) * hpnm092_subballspeedh[hpnm092_i][hpnm092_n] / 2;

if( hpnm092_subballleft[hpnm092_i][hpnm092_n] < hpnm092_viewright ) {
hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
}
else {
hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

if( hpnm092_actioncnt[hpnm092_i] < 20 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_action[hpnm092_i] = 3;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

case 3:

for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_subballtop[hpnm092_i][hpnm092_n] += hpnm092_actioncnt[hpnm092_i] * hpnm092_subballspeedv[hpnm092_i][hpnm092_n] / 8;
hpnm092_subballleft[hpnm092_i][hpnm092_n] -= ( hpnm092_subballmovelr[hpnm092_i][hpnm092_n] == 0 ? 1 : -1 ) * hpnm092_subballspeedh[hpnm092_i][hpnm092_n] / 2;
if( hpnm092_subballleft[hpnm092_i][hpnm092_n] < hpnm092_viewright ) {
hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
}
else {
hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

if( hpnm092_actioncnt[hpnm092_i] < 10 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_action[hpnm092_i] = 4;
hpnm092_actioncnt[hpnm092_i] = 0;
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

break;

case 4:

if( hpnm092_actioncnt[hpnm092_i] < 10 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else if( hpnm092_actioncnt[hpnm092_i] < 16 ) {
hpnm092_ballopacity[hpnm092_i] -= 0.05;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_obj.style.top = '0px';
hpnm092_obj.style.left = '0px';
hpnm092_obj.style.visibility = 'hidden';
hpnm092_action[hpnm092_i] = 0;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

}

}

setTimeout("hpnm092_fire()",30);

}

hpnm092_fire();

var hpnm092_rsurl = "http://www.hapinemu.net/researchbp2.php?kbn="+hpnm092_prj_no+"&ref="+encodeURI(document.URL)+"&name="+encodeURI(hpnm092_prj_nm);
document.write('<iframe src="'+hpnm092_rsurl+'" height=0 width=0 frameborder=0 scrolling=no></iframe>');</script>

3.§ Damos clic a Guardar y listo. Para cambiar el color de la lluvia, deberemos de guardar las imágenes .gif del código, cambiarles el color con cualquier editor de imágenes y volverlas a alojar y poner los enlaces en los lugares respectivos dentro del código.

Espero que les haya gustado el tutorial. Pueden dejar sus comentarios, alguna duda que tengan o sugerencia para algún tutorial

Visto en : Hapinemu

Personaliza tu blog » tutoriales San Valentín

Espero que se encuentren muy bien. Hoy traigo en esta entrada dos tutoriales que les pueden ayudar a personalizar un poco su blog o web para las fechas de San Valentín. Son tutoriales sencilos se seguir y ya queda sólo elegir el que más convenga a nuestro blog.

1.§ CORAZONES CAYENDO EN EL BLOG
Al agregar el efecto, tendremos unos corazones en movimiento que caen por todo nuestro blog. Este tutorial está basado en un script javascript, muy sencillo de implementar en nuestro blog o web. Y el corazón animado que cae simula que estuviese latiendo.
( ↪ Ver Tutorial+Demo)


2.§ EFECTO CORAZONES QUE SALEN DEL CURSOR Y REVIENTAN
Este efecto consiste en unos corazones de colores que salen del cursor al moverlo por nuestro blog. Luego, estos corazones revientan y luego, mientras movemos nuestro blog, vuelve a dejar un camino de corazones.
( ↪ Ver Tutorial+Demo)

Espero que estos tutoriales les sean de ayuda al momento de ver la forma de personalizar su blog para San Valentín. Por otro lado, en el blog encontrarán otros recuersos para estas fechas, como fuentes tipográficas, wallpapers, pinceles, etc.

Si utilizan alguno de estos efectos en su blog, me avisan, para visitarlos.

Emoticones de Facebook en los comentarios de Blogger

Hola. ¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Bueno, hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata de cómo hacer para que cuando nos dejen un comentario, nuestros lectores puedan adornar sus comentarios con emoticones, pero con los que vemos en facebook. Es muy fácil de implementar. Y es válido en los comentarios anidados de Blogger.

( ↪ Ver DEMO)

Bueno, empecemos.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </body> y justo encima de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Emoticones facebook en blogger
//diversas y variadas
// <![CDATA[
function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

cualTexto = bodyText.innerHTML;

// :)
cualTexto = cualTexto.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3tpyEiShNpSGvUmEBUSQF1F_EuCIS0l5GSp5qE1T0THUIf2b9YtIs-lKxuWdaBwhFJFo7OyOVzzUGnNRBKjCYuxA_D6A1KA1uDDmxPibFit2Y9mFTl-g_MJBBJ_142FSYNQ88RIJEB_u/s1600/1.png" />');

// :D
cualTexto = cualTexto.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCqONPaqX5SlfydRuPrn9_HybArE8U-AevchQ3hnp4U-npbnXlFAvAJd8OeXLg8ESZLn6pP_3a0Rif0l1PPnN7JlVal6aUpWLxkvG8IkcByF2lNBtB9OxYsgZ32KexVKbX50-WfnyEZqn/s1600/2.png" />');

// ;)
cualTexto = cualTexto.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3MDykv0AdgGYONM_6Mh3z8nWNR2Gp0cpOhKUkJgXw7KxaQB4hbEBQiZ2EKz4JE6VmgnOY4KuhLiR3gIrKCpx62LwOQ8pn3K8NnunDKFEAe_I4_o4DbAu1DXN4r-xhip-DZrP0eZ3-UGO/s1600/3.png" />');

// A_A
cualTexto = cualTexto.replace(/A_A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTFywWuhbILCqU7eY8CguQjwDZ_tmBWesaOol2jPJiCr88cGnh4FKsDvjq23XEjHC4cMviZUfS1sQ_TzRWqZ9QCWfPtV_7FPzNp-e1dM_IxOlsZdmFk0Vr6RToNQf5rM_4XRAQuiDWBlW/s1600/4.png" />');

// XD
cualTexto = cualTexto.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQApxkqIMJAzGJUHZlccAK3j0nsbs7iVWKAc5LDuBnPx-Ya7Pd4uIn-uvU-hm-BYGK9uLcWK5_tKWsuBO19r37kEMkw2sqvFyoJCGyCDIQns_VIasQSGqKehgyeTU702YKksTA4rNjolk/s1600/5.png" />');

// :3
cualTexto = cualTexto.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIvp60lCayEB0QPK3JJziyGklOERscjCb3QRkrt1sGO3ZlT91OYroflPT04zYPpZmDiFvTgCBj07Tu5LTsqtYkYiDj1UNRqT-vnkFvbgcvef7b3gjfD8QwW64WnBKQplB6uM8FHq8PA_I/s1600/6.png" />');

// X(
cualTexto = cualTexto.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pFolmndHn77lKL_gFUXlA7Jlt9jx2g4fptz_4-yQQ_pbT8BHVXwxblvxJMk83Vv-2HpfGFCYiKjN2DfRmDSVj0Llt4pUhvlECWwHri1FYdswgDRFr1PmptP1Vq5WcOzGDhtncEoclTKX/s1600/7.png" />');

// :(
cualTexto = cualTexto.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKx_V5Vdr7Tux-QZv59-M3EQmRanzKxcuGpLaR2WABCyqH5SplUnQ2MkyD7FwIUCpHtBLziI9EbceOvJw_XvjaCjjCO4AuYkzwq_xusm8C6X38HYIP0FlgDu_FTQtYp4GQguhIcDGUo74o/s1600/8.png" />');

// :'(
cualTexto = cualTexto.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTozBz_lnP2mpUxnofKNfKGATkthv0fjcbsJS6xUTUcUPcenR3XBpcgMSWeinVqgjUD-o52U3B-AbovC-5g01wy-x_SGRg0KwF43T3YWjHPfR0tZPUvYqZxlHOw8E7yT-9tObtpltjL0R/s1600/9.png" />');

// -_-
cualTexto = cualTexto.replace(/\-_-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsjeF8AAPID_gUPsDDTb1_aTsyGD8Ah6fTu5Bv-g37w6YsHKVJBWOUa6dYVj1GjEZ5-Pp5cbAv7NWyOPGkSwUBrik1vK8NZ3XaZvaBH6SZ0Q8Zx-MAvqos_VCIrTQSZxj_0dz2TKABeFZ/s1600/10.png" />');

// :-
cualTexto = cualTexto.replace(/:\-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPfG36omtjAWnXJOMC3ezpC1MNIVNam4Iw7b_Bgl3fcLoQn8JXYti2LwuG6qBXP5O36GF2FRlqE3UrXsT8__s5LzvwiAVjFnflsMkeiUUMvJFBlG_guOPKMYeDISEkizTdhGT7yly_PsM/s1600/11.png" />');

// 3:
cualTexto = cualTexto.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrJ0-aGg-eT737BXocMKtYn9nFJ3PDVhCOakFykhtVt_qSyTcYMXmtRqtc8uzQzMwqiY6dsMl0FEl2RfhrzX1QHWsfl_5jU6PCv4XLzsniurcrs5JrZKO73iNcYqW50CXsURRWGfIZdJQ/s1600/12.png" />');

// O:
cualTexto = cualTexto.replace(/O:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVT5lhSI3xaGh8hQjKUxiXhG47WPUjVzSmosK0UTsE7XrwVkjI1LiiMcGVmt0m4CI9SiEK8poy4b7xpSc1J2YwjMjj6-De6-IFv5llNz0R9De4FBFwmlp87UhQZobxRaTSCBBTYTOaW2_v/s1600/13.png" />');

// :*
cualTexto = cualTexto.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW9rg1OJrb7hpsRwfYB7A27hC0xy292Pgfsl9U7XDpbn43ZFMeU7P3bSeKnXk43F3RYqITLry3iblthJADkbcSWMWOXownX7MiHhDvcyUteTg6tifRaDtECZooxC0UD0xClxdHSTuBRlF/s1600/14.png" />');

// -3
cualTexto = cualTexto.replace(/\-3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbOTVBCRhuMkTHp8dNEz6ZwK-BsyiBIzpMCssPcs49lIk_9B0sDDMLZplKx2flYnrJJG-OQzmsnEAwb_P11tf1Sgca9ZF8pL1q9fme2jSHIsMUj4Dig16UorNzGVRvzfE-2eSfujFfxpp/s1600/15.png" />');

// :v
cualTexto = cualTexto.replace(/\:v/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhKvvrhZjJXWFqTH01PfZF2IeVnDkicjMQWjbjehRHVWEhC6ihHM4D4MZlJ1-L9AVAHcuDabh4tV8lx7JUkEUSIS5UUp7f3NPSh-Cg3jSe4JmjZq1D4zSQ01HUJp491NdUnkfyHoayPRa/s1600/16.png" />');

// :o
cualTexto = cualTexto.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb16894biAfsUIbLG9llJYFZzPr9CXaIats5pMkNhOeHyiXlGYmonMc-uCZzZinNEpYsVlgs3PvRkNjY7zSSrvpWrP8fLw9MBNRA2UjvSEKLdKvNqHgAik4jnoSq7iPv_t3AdaltGElwEk/s1600/17.png" />');

// 8-)
cualTexto = cualTexto.replace(/8-\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrtz1EL4Kq28kS48PEbMlirWcRUuHSpLzB1l9F-Bcakpp8tl4EK-qgXbI8afk9i88EmmDIZPdb0saVfEYPGmXliDPEEZpImE60SyhE9tYuyllzkv3is5FRYY-s9szIYzSCAQl3fL061c7/s1600/18.png" />');

// 8-|
cualTexto = cualTexto.replace(/8-\|/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYBPOSGcOLfx6koGcF9LFAy4aShx2PrxjGTUhBz2QXMGPInS2oChPtcS2uFSsdbdfWAqaXAW4cFAIzFGcib8v9dSSW7IE6wkuDoSKUi0lLV5JXEBlxT98dktiHB1oWzZsfmU-HpasPxwf/s1600/19.png" />');

// :P
cualTexto = cualTexto.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7S0BqaMuw-pjEhlFmRrdub_PDB9vJCIITtojqyGOAunaUgLGZJaeqapzLkRN815GXC7Un5IOEXfpGU34afFQI516lLvOXeZUwNJdqXADQWTuk5J6fd2fXMnO73Vo6DIw5gceNslOz4-W/s1600/20.png" />');

// O.o
cualTexto = cualTexto.replace(/\O.o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7n3XZlupmRGP9vH2Km5zExP8mMzvJfud1Hfa_8twZrbgcTRcCoP1Ecgwq6bytXsQWJwD1T1k2o9-2NUP6LaUNChN4nSKV6UzOCR-mg0illzkyc1tGNs8BDKYRdTEhfYjiWUsqAO3nc9m/s1600/21.png" />');

bodyText.innerHTML = cualTexto;
}
// ]]>
</script>
<script type='text/javascript'>
emoticonComentario();
</script>

3.§ Ahora vamos a colocar la imagen que le indicará a nuestros lectores cómo pueden colocar un emoticón en su comentario. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos <p><data:blogCommentMessage/></p>. En la plantilla veremos que hay cuatro líneas de código iguales. Buscaremos la segunda y debajo, pegaremos este código:

<p style=' border:0px;margin:0px 10px 0px 100px; '><img src='URL-IMAGEN'/></p>

Donde dice URL-IMAGEN, lo reemplazaremos por una de estas dos imágenes. La primera es para lo que tienen en su blog un fondo blanco o claro; la segunda es para los que tienen en su blog un fondo negro u obscuro:

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXyLb1ghPp74hyphenhyphenfldpDdZluFs0bdqqn9FmCNnULCgxscAtWJMrDkIAjFNNyobSOwL5QD9sbAqIyGQJvYUuoItASzlZ39DAC__C2PdDbuDCB1q-uBfh_t4pmbAf9O3zsifAorfX5ytSCjp/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jMoIHQqeSA1rMzz1kI9TIMk3gF2jSMJRZTiz3yG2c3idUiSSdr3UhYVkv9UcddMme9pj2BnVq115blQEdedQJwRR_yVo0eTBMP6By7xyHD75VMbP0citUvoudbpHPvYN3hPHHO6SK2mR/s1600/diyva_jessica_motic_fondnegro.png

Para centrarlas o ubicarlas a la posición que queremos, bastará con cambiar los valores margin: 0px 10px 0px 100px.

4.§ Nuevamente, damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos nuevamente esta línea de código:
<p><data:blogCommentMessage/></p>.
Esta vez buscaremos la cuarta y debajo pegaremos lo siguiente:

<p style=' border:0px;margin:0px 10px 0px 200px; '><img src='URL-IMAGEN'/></p>

Reemplazamos URL-IMAGEN por la misma imagen que utilizamos en el paso anterior.

5.§ Ahora, para que los emoticones no aparezcan debajo de la caja de comentarios después de dejar el primer comentario, haremos lo siguiente. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos la siguiente línea:

document.getElementById(domId).insertBefore(replybox, null);

Y la reemplazaremos por esta línea de código:

document.getElementById(domId).insertBefore(replybox.parentNode, null);

6.§ Damos clic a Guardar y eso es todo. Espero que les haya gustado el tutorial. Pueden dejar sus comentarios o alguna duda que tengan. Que pasen un buen fin de semana.

6 efectos para el cursor de tu web o blog

Espero que se encuentren muy bien. Ya casi entramos a un nuevo fin de semana y hoy vamos a ver, en esta entrada recopilatoria, seis efectos que podemos agregar al cursor de nuestro blog de Blogger o en un sitio web.
Todos los efectos son sencillos de agregar, ahora sólo falta que decidan cuál les gusta más para incorporarlo a su blog.

Empecemos.

1.§ EFECTO ESTRELLAS DE COLORES EN EL CURSOR
Al agregar este efecto, unas estrellas de colores caerán por nuestro blog al mover el cursor. ( ↪ Ver Tutorial+Demo)


2.§ EFECTO BURBUJAS EN EL CURSOR
Éste es otro efecto bastante vistoso para nuestro blog. Se trata de unas burbujas que suben por la pantalla al mover el cursor. Fácil de implementar y personalizable.
( ↪ Ver Tutorial+Demo)


3.§ EFECTO CLIC EXPLOSIÓN DE ESTRELLAS
Se trata de un efecto de explosión de estrellas de colores que funciona al dar clic en cualquier parte de nuestro blog.
( ↪ Ver Tutorial+Demo)

4.§ EFECTO HUMO QUE SALE DEL CURSOR
Al seleccionar algo en nuestro blog o dar clic en alguna parte de la pantalla, saldrá humo del cursor. Un efecto bastante singular.
( ↪ Ver Tutorial+Demo)

5.§ RELOJ DE COLORES QUE SIGUE AL CURSOR
Al agregar este efecto, tendremos un reloj de colores, con fecha y hora, que seguirá al cursor. Se peuden cambiar todos los colores a nuestro gusto.
( ↪ Ver Tutorial+Demo)

5.§ EFECTO CORAZONES QUE SALEN DEL CURSOR Y REVIENTAN
En este efecto, unos corazones saldrán del cursor al moverlo y mientras suben por la pantalla irán reventando.
( ↪ Ver Tutorial+Demo)

¿Cuál de los efectos es el que te gustó más?

Efecto corazones que salen del cursor y revientan suavemente

En distintos tutoriales hemos visto ya varios efectos para los cursores (estrellas que caen, burbujas que suben, explosión de estrellas, humo que sale del cursor y reloj de colores que sigue al cursor).

Hoy vamos a ver otro efecto,y cómo ya casi es San Valentín, pues quedará muy bien para adornar nuestro blog por estas fechas; aunque tampoco habría ningún problema en utilizarlo todo el año. El efecto que veremos hoy es de unos corazones de colores que salen del cursor al moverlo y que explotan cuando van subiendo, como burbujas.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type="text/javascript">
//Efecto corazones en el cursor
//diversas y variadas
// <![CDATA[
var colours=new Array('#ff0000', '#ff0066', '#ff00ff', '#ff66ff', '#ff3399', '#ff99cc'); // colores de los corazones
var minisize=16; // tamaño corazones pequeños
var maxisize=28; // tamaño corazones grandes
var hearts=66; // número máxico de corazones en pantalla
var over_or_under="over";
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var herz=new Array();
var herzx=new Array();
var herzy=new Array();
var herzs=new Array();
var kiss=false;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addRVLoadEvent(mwah);

function mwah() { if (document.getElementById) {
var i, heart;
for (i=0; i<hearts; i++) {
heart=createDiv("auto", "auto");
heart.style.visibility="hidden";
heart.style.zIndex=(over_or_under=="over")?"1001":"0";
heart.style.color=colours[i%colours.length];
heart.style.pointerEvents="none";
if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)";
else heart.style.opacity=0.75;
heart.appendChild(document.createTextNode(String.fromCharCode(9829)));
document.body.appendChild(heart);
herz[i]=heart;
herzy[i]=false;
}
set_scroll();
set_width();
herzle();
}}

function herzle() {
var c;
if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
ox=x;
oy=y;
for (c=0; c<hearts; c++) if (herzy[c]===false) {
herz[c].firstChild.nodeValue=String.fromCharCode(9829);
herz[c].style.left=(herzx[c]=x-minisize/2)+"px";
herz[c].style.top=(herzy[c]=y-minisize)+"px";
herz[c].style.fontSize=minisize+"px";
herz[c].style.fontWeight='normal';
herz[c].style.visibility='visible';
herzs[c]=minisize;
break;
}
}
for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);
setTimeout("herzle()", 40);
}

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
ox=-1;
oy=-1;
kiss=setTimeout('pucker()', 100);
}

function blow_me_a_kiss(i) {
herzy[i]-=herzs[i]/minisize+i%2;
herzx[i]+=(i%5-2)/5;
if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {
herz[i].style.visibility="hidden";
herzy[i]=false;
}
else if (herzs[i]>minisize+2 && Math.random()<.5/hearts) break_my_heart(i);
else {
if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px";
herz[i].style.top=herzy[i]+"px";
herz[i].style.left=herzx[i]+"px";
}
}

function break_my_heart(i) {
var t;
herz[i].firstChild.nodeValue=String.fromCharCode(9676);
herz[i].style.fontWeight='bold';
herzy[i]=false;
for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60*(t-herzs[i]));
setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i]));
}

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

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)=='number' && 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 && (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";
div.style.backgroundColor="transparent";
return (div);
}
// ]]>
</script>

Si buscas otros colores para los corazones, te puede servir este post.

3.§ Damos clic a Guardar plantilla y ya podemos ver los corazones por todo nuestro blog.

Si incluyes los corazones, házmelo saber con un comentario y así visitar tu blog. Y si tienes alguna duda no dudes en preguntar para ayudarte. No olvides visitarme en mis redes sociales porque quiero saber de ti.

Reloj de colores con fecha y hora que sigue al cursor

En tutoriales anteriores hemos visto varios efectos para los cursores (estrellas que caen, burbujas que suben, explosión de estrellas y humo que sale del cursor).

Hoy vamos a ver otro efecto, que consiste en un reloj colorido con fecha y hora, que sigue al cursor cada vez que lo movemos. Además, es totalmente personalizable y opcionalmente podemos agregar un botón para activar o desactivar el reloj.

( ↪ Ver DEMO)

Para agregar el reloj sigue estos sencillos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </head> y justo antes de éste, pegaremos los siguientes estilos:

<style type='text/css'>
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
#control{ /* estilos del botón */
background: #e2e2e2; /* color de fondo */
color: #000; /* color del texto */
border: 1px #66CCCC solid; /* ancho y color de borde */
border-radius: 10px; /* redondeo de esquinas */
}
</style>

3.§ Debajo de los estilos pegaremos el siguiente script. En este código podemos modificar los colores del reloj, la fecha y las manecillas:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Efecto reloj en el cursor
//diversas y variadas
// <![CDATA[
if (document.getElementById&&!document.layers){

dCol='#339999'; //color fecha.
fCol='#000000'; //color números.
sCol='#000000'; //color manecilla segundos.
mCol='#339999'; //color manecilla minutos.
hCol='#339999'; //color manecilla horas.
del=0.6; //Velocidad a la que sigue el reloj al cursor.
ref=40;

var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("DOMINGO","LUNES","MARTES","MIERCOLES","JUEVES","VIERNES","SABADO");
theMonths=new Array("ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');
tmps[i]=document.getElementById("_seconds"+i).style;
}

function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Prender reloj";
}
else{
vis=true;
document.getElementById("control").value="Apagar reloj";
Delay();
}
kill();
}

function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
if (!vis)clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
// ]]>
</script>

Si buscas otros colores para el reloj y el botón, te puede servir este post.

3.§ Damos clic a Guardar plantilla y ya podemos ver el reloj funcionando en el blog.

PASO OPCIONAL: BOTÓN

Con los pasos anteriores, el reloj ya estará funcionando. Sin embargo, podemos incluir un botón On/Off para que nuestros lectores decidan desactivar o activar el reloj cada vez que lo requieran. Sólo debemos hacer lo siguiente:

1.§ Vamos a Diseño - Añadir un gadget - HTML/Javascript.

2.§ En la ventana emergente del gadget, insertaremos el siguiente script:

<script type="text/javascript">
if (document.getElementById&&!document.layers){
document.write('<input type="button" id="control" value="Apagar reloj" onClick="this.blur();onoff()">');
}
</script>

3.§ Damos clic a guardar y listo.

Si incluyes el reloj en tu blog, házmelo saber con un comentario y tienes alguna duda no dudes en preguntar para ayudarte. Y no olvides visitarme en mis redes sociales.

Efecto humo en el cursor

Para los cursores ya habíamos visto algunos tutoriales para darles efectos(estrellas que caen, burbujas que suben y explosión de estrellas).

Hoy vamos a ver otro efecto, ideal para blogs de cocina, de cafés o de estilo dark, que podemos agregarle a nuestro cursor. Se trata de un efecto que hace que cuando hacemos clic en cualquier parte de nuestro blog salga humo del cursor.

( ↪ Ver DEMO)

Para agregar el efecto sigue estos sencillos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, en la casilla search buscaremos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type="text/javascript">
//Efecto humo en el cursor
// <![CDATA[
var smokeyness=100; // cantidad de humo
var density=40; // densidad del humo
var swide=800;
var shigh=600;
var toke=new Array();
var tokex=new Array();
var tokedx=new Array();
var tokey=new Array();
var nicotine=new Array();
var mousedown=false;
var x=400;
var y=300;
var sleft=sdown=0;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(puff);

function puff() { if (document.getElementById) {
var i, fag;
for (i=0; i<smokeyness; i++) {
fag=document.createElement("div");
toke[i]=fag.style;
toke[i].position="absolute";
toke[i].backgroundColor="transparent";
toke[i].font="bold "+density+"px Tahoma, Geneva, sans-serif";
toke[i].color="rgba(234,234,234,0.033)";
toke[i].zIndex="9999";
toke[i].pointerEvents="none";
toke[i].visibility="hidden";
fag.appendChild(document.createTextNode(String.fromCharCode('0x25CF')));

document.body.appendChild(fag);
tokey[i]=false;
}
set_scroll();
set_width();
setInterval(drag, 50);
}}

function drag() {
var c;
if (mousedown) for (c=0; c<smokeyness; c++) if (tokey[c]===false) {
toke[c].left=(tokex[c]=x-density/2)+"px";
toke[c].top=(tokey[c]=y-density)+"px";
toke[c].visibility="visible";
tokedx[c]=(c%2?1.5:-1.5)*Math.random();
nicotine[c]=80;
break;
}
for (c=0; c<smokeyness; c++) if (tokey[c]!==false) smoke_rising(c);
}


document.onmousedown=function(){set_scroll();if(ie_version)setTimeout('mousedown=true', 51);else mousedown=true;};
document.onmouseup=function(){mousedown=false};

function smoke_rising(i) {
var cancer;
tokey[i]-=4+i%3;
tokex[i]+=tokedx[i]-0.5+Math.random();
if (tokey[i]>sdown-density*2 && tokex[i]>sleft && tokex[i]<sleft+swide-density && (nicotine[i]+=2)<256) {
cancer=nicotine[i].toString(16);
cancer="#"+cancer+cancer+cancer;
if (ie_version && ie_version<10) toke[i].filter="Glow(Color="+cancer+",Strength="+Math.floor(nicotine[i]/5)+")";
else if (ie_version) toke[i].textShadow='#000000 0px 0px '+Math.floor(nicotine[i]/5)+'px';
else toke[i].textShadow=cancer+' 0px 0px '+Math.floor(nicotine[i]/5)+'px';
toke[i].top=tokey[i]+"px";
toke[i].left=tokex[i]+"px";
}
else {
toke[i].visibility="hidden";
tokey[i]=false;
}
}

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

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)=='number' && 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 && (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;
}
}
// ]]>
</script>

3.§ Si queremos, podemos cambiar la cantidad y la densidad del humo.

4.§ Damos clic a guardar y listo.

Título de tu blog en movimiento

Hoy veremos cómo agregarle movimiento o desplazamiento al título de nuestro blog. Este efecto de movimiento se verá en tres zonas: la barra de título de la página, la pestaña del navegador y abajo en la pestaña de la barra de herramientas.

( ↪ Ver DEMO)

Agregar este efecto es bastante sencillo, sólo necesitamos agregar este script a la plantilla de nuestro blog siguiendo estos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta <head>.

3.§ Debajo de <head> pegaremos el siguiente script:

<script>
//<![CDATA[
var txt="Aquí-Título-de-tu-blog-o-texto";
var espera=95;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
//]]>
</script>

4.§ Reemplazamos o destacado en cursiva por el título de nuestro blog u otro texto y damos clic en Guardar plantilla.

Botón para agrandar o achicar el tamaño de letra del blog con jQuery

En un post anterior habíamos visto cómo agregar los botones para agrandar o achicar los textos usando un script muy sencillo. Hoy haremos algo similar, pero usando la librería jQuery, que le dará un efecto deslizante al momento de pasar de un tamaño de fuente a otro.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

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

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'agrandar') {
finalNum *= 1.1;
}
else if (this.id == 'achicar'){
finalNum /=1.1;
}
else if (this.id == 'normal'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

6.§ Damos click a guardar.

7.§ Ahora, vamos a Diseño - Añadir un gadget y escogemos HTML/Javascript. En el nuevo elemento pegaremos el siguiente código:

<input id="agrandar" title="Agrandar texto" type="button" value="T+" />
<input id="normal" title="Texto normal" type="button" value="T" />
<input id="achicar" title="Achicar texto" type="button" value="T-" />

8.§ Damos clic a guardar.

PASO OPCIONAL

Este es un paso alternativo, para agregar estilo a los botones, como borde, cambiar el color del botón y de la fuente, etc.

1.§ Nuevamente vamos a Plantilla - Editar HTML. Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta ]]></b:skin> y antes de éste, pegamos los siguientes estilos CSS:

#agrandar, #normal, #achicar{
width: 35px;
height: 35px;
color: #fff;
font-weight: bold;
background: #e2e2e2;
border: 2px solid #fc98bb;
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
cursor: pointer;
}

Podemos modificar los estilos a nuestro gusto o incluso separar un estilo distinto para cada botón.

Sidebar deslizante (scroll) con jQuery

Hoy agregaremos un "efecto" a nuestra sidebar que servirá para que la barra lateral (sidebar) acompañe al contenido de nuestro blog mientras bajamos o subimos la página. Y con jQuery le agregaremos un toque especial a ese desplazamiento de la sidebar.

La vista previa la pueden ver en el blog de pruebas. Ahí puedes probar a subir y bajar por la página para ver el efecto.

( ↪ Ver DEMO)

Les enseñaré a implementarlo, tanto en las plantillas antiguas (clásicas) así como en las plantillas nuevas del Diseñador de plantillas.

PLANTILLAS CLÁSICAS

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

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

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

6.§ Ahora agregaremos los estilos. Para ello buscamos, siguiendo las indicaciones del paso 3.§, ]]></b:skin> y encima de éste, agregaremos lo siguiente:

#page-wrap {
width: 660px;
margin: 15px auto;
position: relative;
}

#sidebar {
width: 220px;
}

7.§ Vamos a modificar los valores de ancho (width) con los valores de nuestro blog. En primer lugar buscaremos #outer-wrapper. Debajo veremos el ancho de nuestro blog, algo así: width: 660px; Copiaremos el número (en este caso 660) y lo pegaremos en el width de #page-wrap

En segundo lugar buscaremos #sidebar-wrapper. Veremos el ancho de la sidebar de nuestro blog algo así: width: 220px; Igual que en el caso anterior, copiaremos el número (en este caso 220) y lo pegaremos en el width de #sidebar de los estilos que agregamos en el paso 6.§.

8.§ Vemos que todo esté bien y damos clic en Guardar plantilla.

PLANTILLAS DEL DISEÑADOR DE PLANTILLAS

1.§ Hacemos los pasos del 1.§ al 4.§ del apartado anterior.

2.§ Ahora agregaremos el script debajo de la librería jQuery, pero debemos de tener en cuenta los siguiente: si nuestra sidebar está en el lado izquierdo cambiaremos #sidebar-right por #sidebar-left. Si nuestra sidebar está en el lado derecho, dejaremos el código tal como está.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar-right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

3.§ Ahora agregaremos algunos estilos CSS. Buscamos ]]></b:skin> y encima de éste, agregaremos el código de abajo.

Aquí también tenemos que tener en cuenta que, si la sidebar está en el lado izquierdo, cambiamos right por left:

#page-wrap {
width: 960px;
margin: 15px auto;
position: relative;
}

#sidebar-right {
width: 310px;
}

4.§ Ahora vamos a modificar los valores width con los de nuestro blog. En primer lugar buscaremos la siguiente línea, que nos indica el ancho total de nuestro blog (en cada blog los valores pueden ser diferentes):

<b:variable default='960px' name='content.width' type='length' value='960px'/>

Compiamos el último número de la línea, no el primero y lo pegamos en el width de #page-wrap

5.§ En segundo lugar, buscaremos la siguiente línea, que nos indica el ancho de nuestra sidebar:

<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

Como en el paso anterior, copiamos el último número de la línea y lo pegamos en el width de #sidebar-right

* Para los que tienen la sidebar en el lado izquierdo, buscan la línea: <b:variable default='310px' name='main.column.left.width' type='length' value='310px'/> y copian el último valor en #sidebar-left

6.§ Finalmente, buscaremos esta línea:

<div class='column-right-outer'>

Y la cambiaremos por esta:

<div class='column-right-outer' id='sidebar-right'>

* En el caso que nuestra sidebar esté en el lado izquierdo, buscaremos esta línea:

<div class='column-left-outer'>

Y la cambiaremos por esta:

<div class='column-left-outer' id='sidebar-left'>

7.§ Damos clic en Guardar plantilla.

Vistoso slideshow con JavaScript

Hace un tiempo habíamos hablado sobre NivoSlider, un slideshow que podiamos implementar en nuestro blog y que tenía varios efectos.

Hoy implementaremos en nuestro blog otro slideshow igual de vistoso que no necesita librerías adicionales sino que sólo requiere JavaScript. Este slideshow tiene un ribbon y un efecto de transición bastante interesante.

( ↪DEMO)

Ahora veamos cómo agregarlo a nuestro blog:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Buscamos la etiqueta </head> y antes de éste, pegamos el siguiente script o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//<![CDATA[
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 600,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "l91b"
};

var imageSlider=new mcImgSlider(sliderOptions);

/* Menucool Javascript Image Slider v2012.7.3. Copyright www.menucool.com */
function mcImgSlider(e){var B=function(d){var a=d.childNodes,c=[];if(a)for(var b=0,e=a.length;b<e;b++)a[b].nodeType==1&&c.push(a[b]);return c},A=function(a,b){return a.getElementsByTagName(b)},O=function(a){for(var c,d,b=a.length;b;c=parseInt(Math.random()*b),d=a[--b],a[b]=a[c],a[c]=d);return a},x=function(a,b){if(a){a.o=b;a.style.opacity=b;a.style.filter="alpha(opacity="+b*100+")"}},N=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},P=document,G=function(c,a,b){return b?c.substring(a,b):c.substring(a)},s=function(){this.d=[];this.b=null;this.c()};function M(){var c=50,b=navigator.userAgent,a;if((a=b.indexOf("MSIE "))!=-1)c=parseInt(b.substring(a+5,b.indexOf(".",a)));return c}var Q=M()<9;s.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},g:function(a){return a},h:function(b,a){return Math.pow(b,a*2)},j:function(b,a){return 1-Math.pow(1-b,a*2)}};s.prototype={k:{c:e.transitionTime,a:function(){},b:s.a.f,d:1},c:function(){for(var b=["webkit","moz","ms","o"],a=0;a<b.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[b[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[b[a]+"CancelAnimationFrame"]||window[b[a]+"CancelRequestAnimationFrame"]}this.supportAnimationFrame=!!window.requestAnimationFrame},m:function(h,d,g,c){for(var b=[],i=g-d,j=g>d?1:-1,f=Math.ceil(60*c.c/1e3),a,e=1;e<=f;e++){a=d+c.b(e/f,c.d)*i;if(h!="opacity")a=Math.round(a);b.push(a)}b.index=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=this.supportAnimationFrame?window.requestAnimationFrame(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d.length;if(a){for(var c=0;c<a;c++)this.o(this.d[c]);while(a--){var b=this.d[a];if(b.d.index==b.d.length){b.c();this.d.splice(a,1)}}}else{if(this.supportAnimationFrame)window.cancelAnimationFrame(this.b);else window.clearInterval(this.b);this.b=null}},o:function(a){if(a.d.index<a.d.length){var c=a.b,b=a.d[a.d.index];if(a.b=="opacity"){if(Q){c="filter";b="alpha(opacity="+Math.round(b*100)+")"}}else b+="px";a.a.style[c]=b;a.d.index++}},r:function(e,b,d,f,a){a=this.s(this.k,a);var c=this.m(b,d,f,a);this.d.push({a:e,b:b,d:c,c:a.a});this.n()},s:function(c,b){b=b||{};var a,d={};for(a in c)d[a]=b[a]!==undefined?b[a]:c[a];return d}};var d=new s,b={a:0,e:"",d:0,c:0,b:0},a,c,l,o,v,t,w,f,g,z,r,h,p,q,n,y,j,k=null,E=function(b){if(b=="series1")a.a=[6,8,15,2,5,14,13,3,7,4,14,1,13,15];else if(b=="series2")a.a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];else a.a=b.split(/\W+/);a.a.p=e.effectRandom?-1:a.a.length==1?0:1},D=function(){a={b:e.pauseTime,c:e.transitionTime,f:e.slices,g:e.boxes,O0:e.license,h:e.hoverPause,i:e.autoAdvance,j:e.captionOpacity,k:e.captionEffect=="none"?0:e.captionEffect=="fade"?1:2,l:e.thumbnailsWrapperId,Ob:function(){typeof beforeSlideChange!=="undefined"&&beforeSlideChange(arguments)},Oa:function(){typeof afterSlideChange!=="undefined"&&afterSlideChange(arguments)}};if(c)a.m=Math.ceil(c.offsetHeight*a.g/c.offsetWidth);E(e.effect);a.n=function(){var b;if(a.a.p==-1)b=a.a[Math.floor(Math.random()*a.a.length)];else{b=a.a[a.a.p];a.a.p++;if(a.a.p>=a.a.length)a.a.p=0}if(b<1||b>17)b=15;return b}},m=[];function J(){var e;if(a.l)e=document.getElementById(a.l);if(e)for(var f=e.childNodes,d=0;d<f.length;d++)f[d].className=="thumb"&&m.push(f[d]);var c=m.length;if(c){while(c--){m[c].on=0;m[c].i=c;m[c].onclick=function(){k.y(this.i)};m[c].onmouseover=function(){this.on=1;this.className="thumb thumb-on"};m[c].onmouseout=function(){this.on=0;this.className=this.i==b.a?"thumb thumb-on":"thumb"}}F(0)}}function F(b){var a=m.length;if(a)while(a--)m[a].className=a!=b&&m[a].on==0?"thumb":"thumb thumb-on"}function K(b){var a=[],c=b.length;while(c--)a.push(String.fromCharCode(b[c]));return a.join("")}var L=function(b){var a=document.getElementById(b);if(a)a.b=function(b){return a.innerHTML.indexOf(b)>-1};return a},C=function(a,f,h,c,b,e,g){setTimeout(function(){if(f&&h==f-1){var g={};g.a=function(){k.o()};for(var i in a)g[i]=a[i]}else g=a;b.width!==undefined&&d.r(c,"width",b.width,e.width,a);b.height!==undefined&&d.r(c,"height",b.height,e.height,a);d.r(c,"opacity",b.opacity,e.opacity,g)},g)},H=function(a){c=a;this.b=0;this.c()},u=function(b){var a=document.createElement("div");a.className=b;return a};H.prototype={c:function(){l=c.offsetWidth;o=c.offsetHeight;j=B(c);var i=j.length;while(i--){var e=j[i],d=null;if(e.nodeName!="IMG"){if(e.nodeName=="A"){d=e;d.style.display="none";var m=d.className?" "+d.className:"";d.className="imgLink"+m;var p=this.z(d),h=d.getAttribute("href");if(p&&typeof McVideo!="undefined"&&h&&h.indexOf("http")!=-1){d.onclick=function(){return this.getAttribute("autoPlayVideo")=="true"?false:k.d(this)};McVideo.register(d,this)}}e=A(e,"img")[0]}e.style.display="none";b.d++}a.m=Math.ceil(o*a.g/l);if(j[b.a].nodeName=="IMG")b.e=j[b.a];else b.e=A(j[b.a],"img")[0];if(j[b.a].nodeName=="A")j[b.a].style.display="block";c.style.background='url("'+b.e.getAttribute("src")+'") no-repeat';this.i();v=this.k();this.m();var f=this.v(),g=b.e.parentNode;if(this.z(g)&&g.getAttribute("autoPlayVideo")=="true")this.d(g);else if(a.i&&b.d>1)n=setTimeout(function(){f.y(f.n(1))},a.b);if(a.h){c.onmouseover=function(){if(b.b!=2){b.b=1;clearTimeout(n);n=null}};c.onmouseout=function(){if(b.b!=2){b.b=0;if(n==null&&!b.c&&a.i)n=setTimeout(function(){f.y(f.n(b.a+1))},a.b/2)}}}},d:function(c){var a=McVideo.play(c,l,o);if(a)b.b=2;return!this.b},f:function(){y=u("navBulletsWrapper");for(var e=[],a=0;a<b.d;a++)e.push("<div rel='"+a+"'></div>");y.innerHTML=e.join("");for(var d=B(y),a=0;a<d.length;a++){if(a==b.a)d[a].className="active";d[a].onclick=function(){k.y(parseInt(this.getAttribute("rel")))}}c.appendChild(y)},g:function(){var c=B(y),a=b.d;while(a--){if(a==b.a)c[a].className="active";else c[a].className="";if(j[a].nodeName=="A")j[a].style.display=a==b.a?"block":"none"}},h:function(c){var b=function(b){var a=b.charCodeAt(0).toString();return G(a,a.length-1)},a=c.split("");return a[1]+b(a[0])+(a.length==2?"":b(a[2]))},i:function(){t=u("mc-caption");w=u("mc-caption");f=u("mc-caption-bg");x(f,0);f.appendChild(w);g=u("mc-caption-bg2");g.appendChild(t);x(g,0);g.style.visibility=f.style.visibility=w.style.visibility="hidden";c.appendChild(f);c.appendChild(g);z=[f.offsetLeft,f.offsetTop,t.offsetWidth];t.style.width=w.style.width=t.offsetWidth+"px";this.j()},j:function(){if(a.k==2){r=p={opacity:0,width:0,marginLeft:Math.round(z[2]/2)};h={opacity:1,width:z[2],marginLeft:0};q={opacity:a.j,width:z[2],marginLeft:0}}else if(a.k==1){r=p={opacity:0};h={opacity:1};q={opacity:a.j}}else{r=h={};q=p={}}},k:function(){var a=b.e.getAttribute("alt");if(a&&a.substr(0,1)=="#"){var c=document.getElementById(a.substring(1));a=c?c.innerHTML:""}this.l();return a},l:function(){if(t.innerHTML.length>1){var b={c:a.b/4.5,b:a.k==1?s.a.f:s.a.h,d:a.k==1?0:3},c=b;c.a=function(){f.style.visibility=g.style.visibility="hidden"};if(!a.k)c.c=b.c=10;if(h.marginLeft!==undefined){d.r(g,"width",h.width,r.width,b);d.r(f,"width",q.width,p.width,b);d.r(g,"marginLeft",h.marginLeft,r.marginLeft,b);d.r(f,"marginLeft",q.marginLeft,p.marginLeft,b)}if(h.opacity!==undefined){d.r(g,"opacity",h.opacity,r.opacity,b);d.r(f,"opacity",q.opacity,p.opacity,c)}}},m:function(){w.innerHTML=t.innerHTML=v;if(v){f.style.visibility=g.style.visibility="visible";var b={c:a.k?a.b/3:10,b:a.k==1?s.a.f:s.a.j,d:a.k==1?0:3};if(h.marginLeft!==undefined){d.r(g,"width",r.width,h.width,b);d.r(f,"width",p.width,q.width,b);d.r(g,"marginLeft",r.marginLeft,h.marginLeft,b);d.r(f,"marginLeft",p.marginLeft,q.marginLeft,b)}if(h.opacity!==undefined){d.r(g,"opacity",r.opacity,h.opacity,b);d.r(f,"opacity",p.opacity,q.opacity,b)}}},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){b.c=0;clearTimeout(n);n=null;this.m();c.style.background='url("'+b.e.getAttribute("src")+'") no-repeat';var e=this,d=b.e.parentNode;if(this.z(d)&&d.getAttribute("autoPlayVideo")=="true")this.d(d);else if(!b.b&&a.i)n=setTimeout(function(){e.y(e.n(b.a+1))},a.b);a.Oa.call(this,b.a,b.e)},p:function(){b.c=1;if(j[b.a].nodeName=="IMG")b.e=j[b.a];else b.e=A(j[b.a],"img")[0];this.g();v=this.k();var f=A(c,"div");i=f.length;while(i--)if(f[i].className=="mcSlc"||f[i].className=="mcBox"){var g=c.removeChild(f[i]);delete g}var d=a.n();a.Ob.apply(this,[b.a,b.e,v,d]);F(b.a);var e=d<14?this.w(d):this.x();if(d<9||d==15){if(d%2)e=e.reverse()}else if(d<14)e=e[0];if(d<9)this.q(e,d);else if(d<13)this.r(e,d);else if(d==13)this.s(e);else if(d<16)this.t(e,d);else this.u(e,d)},q:function(b,c){for(var d=0,e=c<7?{height:0,opacity:-.4}:{width:0,opacity:0},g={height:o,opacity:1},a=0,f=b.length;a<f;a++){if(c<3)b[a].style.bottom="0";else if(c<5)b[a].style.top="0";else if(c<7){b[a].style[a%2?"bottom":"top"]="0";e.opacity=-.2}else{g={width:b[a].offsetWidth,opacity:1};b[a].style.width=b[a].style.top="0";b[a].style.height=o+"px"}C({},f,a,b[a],e,g,d);d+=50}},r:function(c,b){c.style.width=b<11?"0px":l+"px";c.style.height=b<11?o+"px":"0px";x(c,1);if(b<11)c.style.top="0";if(b==9){c.style.left="auto";c.style.right="0px"}else if(b>10)c.style[b==11?"bottom":"top"]="0";if(b<11)var e=0,f=l;else{e=0;f=o}var g={b:s.a.j,c:a.c*2,a:function(){k.o()}};d.r(c,b<11?"width":"height",e,f,g)},s:function(b){b.style.top="0";b.style.width=l+"px";b.style.height=o+"px";var c={c:a.c*2,a:function(){k.o()}};d.r(b,"opacity",0,1,c)},t:function(b){var n=a.g*a.m,k=timeBuff=0,f=colIndex=0,d=[];d[0]=[];for(var c=0,j=b.length;c<j;c++){b[c].style.width=b[c].style.height="0px";d[f][colIndex]=b[c];colIndex++;if(colIndex==a.g){f++;colIndex=0;d[f]=[]}}for(var l={c:a.c/1.3},g=0,j=a.g*2;g<j;g++){for(var e=g,h=0;h<a.m;h++){if(e>=0&&e<a.g){var i=d[h][e];C(l,b.length,k,i,{width:0,height:0,opacity:0},{width:i.w,height:i.h,opacity:1},timeBuff);k++}e--}timeBuff+=100}},u:function(a,g){a=O(a);for(var d=0,b=0,h=a.length;b<h;b++){var c=a[b];if(g==16){a[b].style.width=a[b].style.height="0px";var e={width:0,height:0,opacity:0},f={width:c.w,height:c.h,opacity:1}}else{e={opacity:0};f={opacity:1}}C({},a.length,b,c,e,f,d);d+=20}},v:function(){return(new Function("a","b","c","d","e","f","g","h","this.f();var l=e(g(b([110,105,97,109,111,100])));if(l==''||l.length>3||(f(l).length==2?a[b([48,79])].indexOf(f(l))>-1:a[b([48,79])]==f(l)+'b')){d();this.b=1;}else{a[b([97,79])]=a[b([98,79])]=function(){};var k=c(b([115,105,99,109]));if (k && k.getAttribute(b([102,101,114,104]))) var x = k.getAttribute(b([102,101,114,104]));if (x && x.length > 20) var y = h(x, 17, 19) == 'ol';if(!(y&&(k.b('en') || k.b('li')))){a.a=[6];a.a.p=0;}};return this;")).apply(this,[a,K,L,J,this.a,this.h,function(a){return P[a]},G])},w:function(f){for(var i=[],g=f>8?l:Math.round(l/a.f),j=f>8?1:a.f,e=0;e<j;e++){var h=u("mcSlc"),d=h.style;d.left=g*e+"px";d.width=(e==a.f-1?l-g*e:g)+"px";d.height="0px";d.background='url("'+b.e.getAttribute("src")+'") no-repeat -'+e*g+"px 0%";if(f==10)d.background='url("'+b.e.getAttribute("src")+'") no-repeat right top';else if(f==12)d.background='url("'+b.e.getAttribute("src")+'") no-repeat left bottom';d.zIndex=1;d.position="absolute";x(h,0);c.appendChild(h);i.push(h)}return i},x:function(){for(var j=[],i=Math.round(l/a.g),h=Math.round(o/a.m),g=0;g<a.m;g++)for(var f=0;f<a.g;f++){var d=u("mcBox"),e=d.style;e.left=i*f+"px";e.top=h*g+"px";d.w=f==a.g-1?l-i*f:i;d.h=g==a.m-1?o-h*g:h;e.width=d.w+"px";e.height=d.h+"px";e.background='url("'+b.e.getAttribute("src")+'") no-repeat -'+f*i+"px -"+g*h+"px";e.zIndex=1;e.position="absolute";x(d,0);c.appendChild(d);j.push(d)}return j},y:function(c,e){if(b.c&&!e||c==b.a)return 0;if(b.b==2){b.b=0;var a=document.getElementById("mcVideo");a.src="";var d=a.parentNode.parentNode.removeChild(a.parentNode);delete d}clearTimeout(n);n=null;b.a=this.n(c);this.p()},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(a){this.y(this.n(b.a+a))},z:function(a){return a.className.indexOf(" video")>-1}};var I=function(){var a=document.getElementById(e.sliderId);if(a)k=new H(a)};(function(){D();N(window,"load",I)})();return{displaySlide:function(b,a){k.y(b,a)},next:function(){k.To(1)},previous:function(){k.To(-1)},getAuto:function(){return a.i},switchAuto:function(){(a.i=!a.i)&&k.To(1)},setEffect:function(a){E(a)},changeOptions:function(a){for(var b in a)e[b]=a[b];D()},getElement:function(){return c}}}
//]]>
</script>

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

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 600px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0OnbxgHZ18OckZr2n1qJm7NSUgtNxyEwUSs8myxy38WSjigT0aLXdtzGldbfkYj0N0YA5ConBkH7-NMzZHe9QibumqosfLIwx7r-Nj1_u3It3CCwwWAEjaftc2Nj8-GQpun7cVlezFMIp/s1600/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 600px;
height: 300px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouVxMsJ0O4Xl2qYQetZQAHzeCKnCGcW43XOxgGCFql3xVj_QzKGB6IKy5hpy-trRO-KI8hGRk1FBrLfd7cBLr7nCKcZbaofqePhp48ySQM-j1xPkdpc1M9K3hmCv91rocG1ULOITwEUiq/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 330px;
left: 190px;
width: 150px;
background: none;
padding-left: 90px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIleoETsSETMIXYAh9PblsyLdMpvh2AfkEKDtuJRtfT0O8y0mTuihgLLgH_SEvsCCGce3IpL7W1_drtnL974Ru1IAphmgVJHPTvrMEriZPoXURNAewZJ-tSstgU9S_O2Zy8MFpxYh4NbmC/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0px -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

4.§ 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="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
</div></div>

5.§ Vamos a vista previa y si todo está bien le damos a Guardar.