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='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 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 128px por 128px 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='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.

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.