Decorar tu web con Zombies para Halloween

En estas fechas muchos comienzan a decorar el blog para Halloween, así que por qué no ponemos un zombie caminando en el blog, y mejor aun, sin nada de scripts.


Usaremos la etiqueta MARQUEE que harán que estos tenebrosos muertos vivientes caminen abajo del blog, y al no usar scripts no afectaremos la velocidad de carga del blog.
Tan prácticos son hasta para su instalación, sólo ingresa en Plantilla | Edición de HTML y antes de </body> pega el código del zombie que más te guste.
<!-- Inicio zombie en el blog -->
<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://lh6.googleusercontent.com/-W8z_GYyNYHc/UHmk8llafTI/AAAAAAAADE4/crxCSbzhzJ4/s120/zombie-1.gif' tyle="border:0; background:none; padding:0; box-shadow: none;"/></marquee>
<!-- Fin zombie en el blog -->


<!-- Inicio zombie en el blog -->
<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://lh3.googleusercontent.com/-HmIVL0toLnk/UHmnZDDdkaI/AAAAAAAADFE/3OfeWmwb8g4/s100/zombie-2.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>
<!-- Fin zombie en el blog -->


<!-- Inicio zombie en el blog -->
<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://lh6.googleusercontent.com/-ZyNeK3O7HfY/UHmuzy0BqCI/AAAAAAAADF0/HZcDxf2UyG0/s117/zombie-3.gif' style='border:0; background:none; padding:0; box-shadow: none;'/></marquee>
<!-- Fin zombie en el blog -->


<!-- Inicio zombie en el blog -->
<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://lh5.googleusercontent.com/-7qIMhgVdLLA/UHmw3jFNjaI/AAAAAAAADF8/ovXRaA0kV_0/s138/zombie-4.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>
<!-- Fin zombie en el blog -->


<!-- Inicio zombie en el blog -->
<marquee direction='right' scrolldelay='260' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://lh6.googleusercontent.com/-aOC4xxs2oTU/UHm55XPjjpI/AAAAAAAADGw/E0l9sL4gpKc/s148/zombie-5.gif' style='border:0; background:none; padding:0; box-shadow: none; width:70px;'/></marquee>
<!-- Fin zombie en el blog -->

El zombie que elijas saldrá de la parte inferior izquierda, llegará hasta el final y aparecerá de nuevo. 

Si quisieras modificar la velocidad con la que se desplaza entonces cambia el valor dentro de scrolldelay, con un valor más alto se hará más lento y viceversa. 

Fuente: CiudadBlogger
--> Leer Más...

Galería de Vídeos para tu Blog

En esta entrada vamos a ver cómo crear una galería de vídeos de YouTube usando jQuery.
Es una elegante galería a la que le caben 5 vídeos y que por sus dimensiones la pondremos debajo de la cabecera del blog. En realidad puedes ponerla en cualquier parte, pero se recomienda en esa área por los 765px que mide de ancho la galería. Para agregar este slider de videos en tu blog entra en Plantilla | Edición de HTML y antes de </head> agrega los scripts:

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

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

// Aplicar desde aquí el hack de compatibilidad con Scriptaculous en caso de ser necesario

$(function(){
$("#slidervideo-tabs a").click(function(){
var container = $("#slidervideo-content");
container.html("<img src='http://3.bp.blogspot.com/-IbCgBm3kukw/UI3nvBbvtUI/AAAAAAAADL0/lfqoLXFkhfU/s400/loading.gif' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#slidervideo-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#slidervideo-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#slidervideo-content").html(video[hash]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#slidervideo-content").html(video[1]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>
Luego agrega los estilos antes de ]]></b:skin>
/* Galería de videos
----------------------------------------------- */
#slidervideo {
background:#000; /* Color de fondo */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#slidervideo, #slidervideo-content, #slidervideo-tabs {height:350px;overflow:hidden;}
#slidervideo-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#slidervideo-tabs {float:right;width:300px;margin:0;}
#slidervideo-tabs li {background:url(http://4.bp.blogspot.com/-qgLr9azZ3kk/UI3nvtqmjBI/AAAAAAAADMA/ASkdnSf4SWA/s000/tab_bg.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#slidervideo-tabs li a {padding:0 !important;border:0 !important;}
#slidervideo-tabs li.hover {background:#333;}
#slidervideo-tabs li.actVid {background:#555;}
#slidervideo-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#slidervideo-tabs li span.vidTit {
display:block;
color:#CD332D; /* Color de los títulos */
font-size:14px; /* Tamaño de los títulos */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs li .vidDesc {
display:block;
color:#fff; /* Color de la descripción */
font-size:12px; /* Tamaño del texto de la descripción */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs a {text-decoration:none;}
#slidervideo-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#slidervideo-tabs li a:hover {background: none !important;}
Ahora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondrás debajo de la cabecera:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="slidervideo">
<div id="slidervideo-content"></div>
<ul id="slidervideo-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/ID_video_2/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/ID_video_3/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/ID_video_4/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/ID_video_5/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

</ul>
</div>
Agrega los IDs de los vídeos  sus nombres y su descripción y listo. La descripción deberá ser muy breve para que no tengas problemas de espacios. Si no sabes cómo obtener la ID de un vídeo abre el vídeo en YouTube y mira en la barra de direcciones, los últimos caracteres son la ID que necesitas.




Toma en cuenta que la ID de cada video se agrega dos veces, uno es para que muestre el video y otra para la miniatura de las pestañas. Es una galería que como funciona con jQuery deberás cerciorarte de no repetir la versión del script en caso de que ya tengas jQuery, y si usas Scriptaculous deberás aplicarle unos cambios, casi al final del primer código verás en color azul desde dónde deberás aplicárselos en caso de que lo necesites.


Fuente: ciudadblogger.com
--> Leer Más...

Efecto Nieve en tu blog

Se acerca fin de año y con ellos las fiesta de Navidad y año nuevo. 

y para quienes quieren tener su blog al tono con las fiestas les dejo un bonito truco blogger para que decoren su blog.

Se trata nada más y nada menos que el efecto nieve en tu blog de Blogger.

Es bastante sencillo de entender de que se trata, ya que aparecerán pequeñas bolas de nieve sobre el blog de forma automática instalando un simple código.

Para instalar el efecto nieve en tu blog debemos ir a la Edición HTML de la plantilla, buscar por </body> y pegar justo antes el siguiente código: <script type="text/javascript" src="http://www.scriptsyclonesweb.com.ar/NieveScriptsCenter.js"> </script> Guardamos los cambios y ya tenemos el efecto nieve instalado en el blog.

Fuente: vidablogger
--> Leer Más...

6 formas de compartir tus artículos en Blogger


Los botones para compartir contenidos son un elemento casi imprescindible en cualquier blog.

No son un solo adorno: permiten que otras personas difundan tus posts para conseguir más tráfico y mejorar el posicionamiento de tu sitio.



¿Cómo incluir estos botones cuando usas Blogger? Hay al menos 6 formas de hacerlo:


Una de las herramientas más populares. Es personalizable, soporta 50 lenguajes (se traduce automáticamente) y más de 150 servicios, incluyendo Twitter, Facebook, Myspace, Menéame y opciones para compartir por correo y agregar a favoritos.

Te da la opción de instalar en la sidebar o incluir el código en el post-footer de tu plantilla, pudiendo hacer un seguimiento de tus estadísticas (mediante registro).



Otra conocida opción fácil de instalar, pero que requiere registro. Se añade como si fuera un widget, incorporándose automáticamente al pie de tus posts. Eso sí, es mucho más limitado que AddThis: Aunque te da la posibilidad de mostrar botones rotatorios, es escasamente personalizable; y además, soporta sólo 45 servicios y está en inglés.



Uno de mis favoritos: amigable, personalizable, e incorpora una gran cantidad de servicios (más de 120), incluyendo Menéame.

Entre las opciones de customización incluye: cambio de colores, encabezados, prioritización de servicios y posibilidad de incorporar servicios adicionales, entre otras. También te ofrece un botón adicional que facilita la suscripción a tus lectores.


Se instala manualmente copypasteando el código bajo el post-body de tu plantilla.


Es el botón de suscripción universal para compartir y votar del cual hablaba hace meses.

Puedes generarlo desde la sección de Herramientas de Wikio, escogiendo los servicios que vas a añadir. Lo que me gusta de Wikio, es que es simple pero llamativo y que incorpora redes sociales hispanas como Bitácoras, Meneame, Fresqui y el mismo Wikio.


Si tienes problemas para incluirlo en tu blog, puedes revisar el video que preparó Wikio (para instalar como widget).



Si eres lector frecuente de Mashable, sabrás que en Septiembre pasado implementaron un sistema para compartir imágenes y videos con el arrastre de tu mouse. El servicio, gentileza de Meebo (sí, el mismo sitio donde puedes acceder a tu messenger online), es pago; no obstante, puedes implementar tu propia versión – que nada tiene que envidiarle a Meebo – con jQuery. En Eliseos, Alexis explica cómo hacerlo.


Probablemente has visto sexy bookmarks en muchos blogs en inglés, con mensajes como “sharing is sexy” o “sharing is caring”. La gracia de sexy bookmarks, es el simple pero atractivo efecto mouse-hover que da “movimiento” a los íconos y hace honor a su nombre.


El plugin ha sido adaptado por CSS Reflex para ser incorporado en Blogger y recreado en su versión latina por Pizcos (recomendado). Puedes adaptar la técnica para poner tus propios botones.

¿Cuál preferir?
Pienso que siempre es mejor añadir íconos de social media de tu preferencia para que éstos se adapten al diseño. Sino, me parece que el botón de Wikio es la mejor alternativa: es funcional, estético e incluye las redes sociales hispanas.

Fuente: chicablogger
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika