Galer?a de videos para el blog

En esta entrada vamos a ver c?mo crear una galer?a de videos de YouTube usando jQuery. Es una elegante galer?a a la que le caben 5 videos y que por sus dimesiones 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.

Puedes verla funcionando en este demo.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6FhcgNvq5xlUEumf3hw7KIJ3WoeV8N1eTCa7EeHzvT4eByf3hBLTm3nwn0zo_92lVONtAH2GN_WcojzBIWUDoYwOGPMdeEoYlxd5zS-PyhlZgfxzxsDdKfGyQk7N9P8QjP2IgOhsVAI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLdkefXuCKcCxRwurzTzBi6okiERVqHwKSzRrRHxEiX3ZPmxUrDqVOxd90umdpMFOZPOzfSZCXyNrh9Ek0jaXEuvPavBiV4rvaKEFiAqi4FxAwQFQpVcz3oBjNbsp989QdX3KWGQv-Kc/s0/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 videos, 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 video abre el video 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.

Efecto de desvanecimiento al cargar las p?ginas del blog

Un efecto muy habitual en jQuery es el efecto fade que es un efecto de desvanecimiento, y podemos usarlo de tantas maneras como por ejemplo en la navegaci?n del blog. El siguiente script hace justamente eso, carga la p?gina con un efecto de desvanecimiento cuando navegamos en los enlaces internos que hay en el blog, como por ejemplo los t?tulos de las entradas, los enlaces de las etiquetas, los enlaces de navegaci?n, archivo, etc.

Puedes ver un ejemplo en este blog de pruebas, haz click en el t?tulo de alguna entrada y ver?s el efecto de desvanecimiento al cargar la p?gina.

Para poner este efecto de desvanecimiento en tu blog agrega despu�s de <head> el siguiente c?digo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #f2f2f2; /* Color del desvanecimiento */
}
</style>

Guarda los cambios y listo. En color verde puedes ver d?nde cambiar el color con el que se desvanece la p?gina al cargar.

El script original oculta el body de la p?gina mientras carga, yo he preferido cambiar esa propiedad por un z-index negativo para evitar problemas con los robots de los buscadores y que esto pueda efectar el posicionamiento.

?Problemas?

Hay que considerar que este tipo de efectos podr?a reatrasar el tiempo de carga del blog, as? que se recomendar?a su uso s?lo cuando el blog es r?pido en cargar y no tiene tantos scripts.

Si ya usas otra versi?n de jQuery elimina las dem?s y deja s?lo esta que es la que se leer? primero.

Si usas Mootools o Scriptaculous tendr?s que hacerle unas modificaciones al c?digo para que puedan ser compatibles.

Si tuvieras otro script con un efecto de desvanecimiento podr?a interferir con este y hacer que no se vea nada en la p?gina excepto el color del desvanecimiento, en esos casos tambi�n es mejor prescindir de este script.

Tambi�n puedes usar este efecto s?lo en algunos enlaces, por ejemplo, si quieres que se aplique al hacer click en los t?tulos de las entradas, en los enlaces de navegaci?n (entradas antiguas y entradas recientes), y en el gadget de P?ginas, entonces cambia esta l?nea:

$("a").click(function(event){

Por esta:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

En algunos casos podr? cargar la p?gina por un segundo y luego cargarla con el efecto de desvanecimiento, esto puede ser "normal" debido a que el navegador est? tardando en leer el script al cargar la p?gina.

Fuera de estos inconvenientes me parece que es una forma muy elegante de cargar las p?ginas del blog mientras navegamos por ellas, ?no creen?

V?a | CGnauta

C?mo mostrar la foto del autor en los resultados de b?squeda de Google

Seguro muchos de ustedes han visto que al hacer una b?squeda en Google aparecen algunos resultados con el nombre y la foto del autor de dicha publicaci?n. Esto m?s que est�tico puede darnos m?s probabilidades de que los usuarios ingresen a nuestro blog, pues con el avatar del autor sobresale del resto de los resultados, aunado a que da esa sensaci?n de confianza, lo que se convierte en mayores posibilidades de tr?fico en nuestro blog.

Lo primero que tenemos que hacer es vincular nuestro perfil de Blogger con el de Google+, si ya lo has hecho omite este paso.

Luego aseg?rate que tu blog aparezca en la secci?n "Colaborador en" de tu perfil de Google+, en caso de que no aparezca agrega la direcci?n de tu blog.

Ahora s?lo revisa que tengas el c?digo del autor en tu plantilla, si no lo tuvieras agr�galo debajo de:

<div class='post-footer'>

El c?digo del autor que debes tener es el siguiente:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

Si tuvieras otro c?digo del autor distinto c?mbialo por este que es m?s actualizado.

Ahora vamos a verificar que todo est? bien hecho, para ello entra a la Herramienta de pruebas de datos estructurados, pega la URL de alguna entrada de tu blog, si se muestra la foto entonces todo est? bien, s?lo tendr?s que esperar unos d?as a que Google asocie y actualice la informaci?n para que puedas ver tu avatar en los resultados de las b?squedas de Google. En este proceso no hay un tiempo exacto, algunas veces el cambio es r?pido, pero la mayor?a de las veces tarda algunas semanas as? que hay que ser pacientes.

Es preciso decir que Google no garantiza que siempre se ver? la foto en los resultados, podr? haber ocasiones que no la muestre.

Es indispensable que en tu perfil de Google+ tengas una foto como avatar, preferentemente de 250px por 250px y en formato JPG, con esas medidas ser? m?s f?cil para Google mostrar la imagen.

Zombies caminando en el blog sin scripts

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjya7z-vBpugJUzqDshWuPAHr_xIjv1dMoT2VPG_ntDXoZ7Zr8JEWAx8qfeXu5XetxbGf_fpyIvXB9bQxbiPGFVa3pClsLlX_zgfgtFOTS0xiQeUVP2_g-l6GJiMUAJ66WWShctiFW1JfM/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAyb4IxTZMNwQ9uT-4O0Jxvjt3_tLe8EKzqMRA7JBxUncXLrfsC2aK_xIrvx6XrsymAHF5QFtL7XlarMLHrBse3fVcI_S2vHEa7wTKphk-6DaquHvAGjD6jMmzsNA8KeFL41BEXf6WZG0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_2gdH4thbyWs6Kdbjnyf4BiANDscJNo6GlWgT758Q0wG8Kx-go47BG725UKfZVQNgtWT_kZrnrtHgZw_-477ap9hHtINopJoTss2zbk_xxiQxOtdTtGaKZFu6tJKgHnydrldlmQNvmKQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimnAADzj7NtMfcY-npf9Fu3g2_VSURYKqlAZL-V5E_t41c8bor1obZWqR-y5xSCZ3AVokGNDKJA5zwvcPmugdMZjcYhhnvh7_BSUBgYRbElGOIdQlbUnC0MbZBCXfEIYKWhXxZEPpPpM/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQz36TD7rfE9S7gog9R-ekdIBHHTmal8bVkq9KLfunjEjMhdQUmHK1D5nMmuMWiiQrOlf7YgPkKjoQyVJNM_lQ4peXESedl_GZjW1D6U40VpODkKbiibPik09gybbhME05VW4At67uz4A/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.

Si lo prefieres puedes complementarlo con estos sonidos de Halloween o unos cursores de Halloween para el blog.

La nueva configuraci?n de dominios en Blogger, y una soluci?n al problema de la redirecci?n sin las WWW

Desde Septiembre de 2012 Blogger cambi? la forma de configurar el dominio personalizado, un cambio ligero en realidad pero que a muchos trae con dolores de cabeza pues muchos no saben qu� hacer cuando les aparece el mensaje "No hemos podido verificar tu autoridad en este dominio: error 32".
Aunado a eso hay problemas con la redirecci?n, pues por m?s que uno marque esa opci?n se deselecciona por s? sola.

En esta entrada veremos c?mo configurar un dominio en Blogger, y c?mo solucionar el problema de la redirecci?n, para que tus lectores puedan entrar tanto con las WWW como sin ellas.

Lo primero es, entrar a Configuraci?n | B?sico | Publicaci?n y damos click en + A?adir un dominio personalizado.

Ah? ponemos nuestro dominio con las WWW, por ejemplo:
www.divertext.com

En donde dice "?Quieres utilizar un host para los archivos que faltan?" lo dejamos en No, damos click en Guardar y nos aparecer? un mensaje de error.

Abrimos otra ventana y nos dirigimos al sitio donde tenemos nuestro dominio; entramos a la configuraci?n de DNS del dominio (el acceso a esta ?rea es diferente en cada registrante, en este enlace puedes ver c?mo acceder en algunos de ellos).

Ah? crearemos los registros CNAME que aparecen en el error que nos dio antes Blogger. Empezamos con el primero, es un registro CNAME que tendr? como host WWW y que apuntar? a ghs.google.com

Se ver? algo as?:

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
CNAME

Luego vamos con el segundo, creamos otro registro CNAME en el cual el host ser?n los primeros caracteres raros que aparecen en el error que vimos antes, en mi caso el host debe ser XIPEFM5OKDYD y apuntar? a esa URL larga que aparece al lado (no copiar el punto que est? al final) que en mi caso es

gv-IOHXXUWKQWJT2DMA424DBOHYPHDRDPI2IRFHBNA4A.domainverify.googlehosted.com

Se ver? algo as?:

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
CNAME

OJO: No copies los c?digos de aqu?, debes copiarlos de los datos que te dio Blogger pues son datos ?nicos que s?lo le servir?n al due?o del blog.

Luego creamos un registro del tipo A que apuntar? a 216.239.32.21

En host lo dejamos en blanco, pero si no te dejar? guardarlo ponle @

Se ver? m?s o menos as?:

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
A	.divertext.com

De la misma forma agrega tres registros m?s como ese pero con estos valores:

216.239.34.21
216.239.36.21
216.239.38.21

Ahora s?, regresa a la ventana de Blogger y dale nuevamente Guardar, esta vez no te marcar? ning?n error.

Una vez que se guard? marca la casilla que dice:

Redireccionar tublog.com a www.tublog.com

Guarda los cambios de nuevo.

A partir de ese momento el dominio ya est? configurado y debe estar funcionando correctamente, en caso de que no fuera as? espera unos minutos u horas.

---

Pero... en muchos de los casos no se podr? entrar sin anteponer las WWW por un problema de Blogger (qu� raro), si no fuera tu caso no hace falta hacer nada de lo que sigue, pero en caso de que s? entonces vamos a los siguientes pasos.

Lo que haremos ahora ser? crear un redireccionamiento pero desde Google Apps, as? que si a?n no tienes una cuenta ah?, ingresa en Google Apps y escribe el nombre de tu dominio con las WWW

Da click en Enviar y llena los campos para crear tu cuenta.

Una vez que hayas terminado te mandar? al panel de control para que comiences a configurarlo, selecciona el m�todo expr�s.

En las dos pantallas siguientes da click en Siguiente hasta que llegues a la secci?n que te pide que verifiques que eres el propietario de tu dominio, de aqu? no hago captura porque la pantalla podr? depender de d?nde hayas comprado tu dominio, pero sigue las indicaciones que te da para poder demostrar que eres el propietario. En la mayor?a de los casos te pedir? que crees en tu dominio un registro del tipo TXT con unos datos espec?ficos, o un registro CNAME tambi�n con datos que Google Apps te dar?.

Una vez que est� confirmado el dominio ve a Personalizaci?n del dominio y da click en Nombres de dominio.

Una vez que est�s ah? da click en Redireccionar dominio simple.
(Es posible que te pida que agregues unos registros en tu dominio, pero son los mismos que a?adimos en un inicio, as? que no hace falta agregarlos de nuevo.)

Ya que est�s en "Redireccionar dominio simple" pon www si ya los tuviera d�jalo as? y dale click en Continuar.

Si todo ha salido bien te lo confirmar?, y eso ser? todo. Con este procedimiento podr?s entrar a tu blog tanto con las WWW como sin ellas (www.divertext.com | divertext.com).
Si vieras que sigue apareciendo una pantalla de error del tipo 404 espera unos minutos u horas, en algunos casos puede tardar hasta 48 horas en funcionar.

Es importante que una vez que tu dominio ya est� configurado no edites de nuevo la configuraci?n del dominio en Blogger o tendr?s que empezar desde el inicio.

En resumen:
Pon tu dominio en la configuraci?n de Blogger (con las WWW), guarda; crea dos registros CNAME con los datos que indica el mensaje de error; crea 4 registros tipo A como se indican en la entrada; guarda otra vez; marca la casilla de redireecionar y listo.
Si no te dejara entrar sin las WWW crea una cuenta en Google Apps, ve a "Nombres de dominio" y luego "Redireccionar dominio simple", ah? ponle WWW, guarda los cambios y listo.

Si quieres aprovechar que tienes cuenta en Google Apps puedes configurar un correo personalizado.

Problema al intentar acceder a la secci?n Plantilla y Edici?n HTML de Blogger

Desde que la nueva interfaz se instal? por defecto para todos, algunos no pueden ingresar a la secci?n Plantilla del blog ni mucho menos a la Edici?n HTML, ya que al querer entrar aparece una p?gina en blanco.

Esto es causado por un script que evita que nuestro blog pueda ser usado en iframes, muchos lo usan para que en los resultados de b?squeda de im?genes de Google se "rompa" el iframe y mande al usuario directo al blog. El script en cuesti?n es similar a este:

<script type='text/javascript'>if(top.location!=this.location) top.location=this.location;</script>

El problema es que la secci?n Plantilla contiene un iframe que es donde se muestra una vista previa de nuestro blog, entonces el script se carga e impide que se pueda acceder a dicha secci?n.

Leyendo en el foro de ayuda de Blogger me encontr� con una soluci?n bastante pr?ctica, que es impedir la carga de la p?gina y as? evitar que se cargue el script.

Esto es sencillo en realidad, pero requiere de rapidez, una vez que hagas click en Plantilla localiza una marca de X que se encuentra en la barra de direcciones del navegador y haz click en ella, eso impedir? que se cargue la p?gina completa y podr?s acceder a la Edici?n HTML, una vez que est�s ah? elimina el script y listo.

La ubicaci?n de este ?cono para detener la carga var?a en cada navegador, en Chrome est? junto al ?cono de la casa (es el mismo que est? en el lugar del que es para actualizar)

En Firefox est? en el extremo derecho de la barra de direcciones aunque puede variar dependiendo del tema que uses

En resumen: Entra en la secci?n Plantilla, inmediatamente haz click en el signo de X para detener la carga, ingresa a la Edici?n HTML, elimina el script que lo causa y listo.

ACTUALIZACI?N: Tambi�n puedes presionar la tecla ESC para detener la carga de la p?gina en lugar de presionar el ?cono de X. Gracias a Rocker Gk por el consejo.

Si quisieras seguir usando un script similar sin que te d� ese problema puedes optar por el que proponen en Vagabundia.