Aumentar el título del blog o imagen de la cabecera al pasar el cursor

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.

Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.

Primero hay que procurar tener la imagen en un tamaño grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentará a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o más.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:

#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.
Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:

margin-top:-10px;
margin-left:-30px;

Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.


Nombre de mi blog



El procedimiento es similar; agrega antes de ]]></b:skin> esto:

#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.

Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.

Fecha tipo calendario en las entradas del blog

Hay una forma muy particular de mostrar la fecha que llama mucho la atención a muchos, y es la fecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.

Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las imágenes del calendario, elige la que más te guste y súbela a Picasaweb o al hosting que prefieras.

Luego entra en Configuración | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el día, luego el mes y por último el año, por ejemplo: 29 noviembre 2011

Si usas la nueva interfaz entonces entra en Configuración | Idioma y formato | Formato de cabecera de fecha, y cámbiala de igual forma.

Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Es posible que la encuentres dos veces, la segunda es la que nos interesa.

Ya que la hayas localizado elimínala y en su lugar pon esto:

<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>

Ahora agrega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
</style>
</b:if>

Agrega la URL de la imagen donde se indica y listo. En color verde verás dónde cambiar el color de los datos de la fecha.
Si el calendario no se viera por completo, o si quieres que se muestre dentro del post cambia el -70px  por 0px
El archivo contiene 14 imágenes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.

ACTUALIZACIÓN: Es importante que para que la fecha pueda mostrarse primero deba estar habilitada en las entradas, para ello ingresa a Elementos de la página | Entradas del blog, y haz click en Editar, ahí marca la casilla de la fecha. Si usas la nueva interfaz sigue el mismo procedimiento entrando en Diseño.

El gadget de Páginas que no aparece

No es la primera vez que alguien me dice que cambió la plantilla del blog, quiso poner el gadget de Páginas pero no puede, porque el supuesto gadget ya se ha añadido en el blog, pero éste no aparece por ningún lado de la plantilla. Incluso yo, hace poco en un blog de pruebas cambié la plantilla, quise poner el gadget de Páginas y decía que ya se ha añadido, sin embargo del gadget, no había ni sus luces.

Supongo que son de esas cosas que pasan en Blogger y uno no entiende. El caso es que, si te ha pasado algo similar entonces deberás agregar el gadget manualmente, es decir, habrá que agregar el código del gadget directo en la plantilla.

ACTUALIZACIÓN:

En la nueva interfaz se puede solucionar este problema yendo a la sección "Páginas", y donde dice "Mostrar páginas como" tendremos que seleccionar "Pestañas principales", o "Enlaces laterales", con eso se mostrará el gadget de páginas en el blog.

¿Cómo hacerlo? Asegúrate de no tener gadgets debajo de la cabecera, si los tuvieras arrástralos momentáneamente a la sidebar. Luego ingresa en la Edición HTML de la plantilla, y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>

Elimínala y en su lugar pon esto:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>

Habiendo hecho eso el gadget de Páginas estará en la plantilla. Antes de guardar los cambios usa la Vista Previa para asegurarte que todo ha salido bien.

Ganadores del concurso para seguidores de Facebook y Twitter

Pues sí, al igual que la vez anterior, terminamos regalando un dominio de más, pero es que esto de los concursos se pone siempre tan bueno que es imposible no dejarse llevar por la emoción. Sobre todo esta vez que me quedé sorprendido de lo bien que conocen "las calles de esta ciudad", pues fueron decenas los que sabían a la perfección las respuestas; de verdad que no pensé que conocieran tan bien este blog.

Así que una vez más, no fueron dos los dominios que se regalaron, ¡sino tres¡

Los dos primeros como lo prometimos se entregaron por Twitter y Facebook, pero como la participación en Facebook fue bastante, nos decidimos a regalar uno más por esa vía.

En Twitter Antonella fue la ganadora del primer dominio, y por Facebook Lupita Astro y Lucas Maidana fueron los afortunados ganadores.

Felicidades a los ganadores de los dominios y muchas gracias a todos por participar y siempre estar tan animados con los concursos que realizamos. Con estos ya son 12 los dominios que hemos regalado además de otros premios que se han entregado, así que si aún no has resultado ganador no te preocupes que seguiremos entregando más dominios, y uno de los próximos dominios puede ser tuyo.

¡Hasta la próxima y gracias a todos!

Nota aclaratoria: Facebook a veces oculta mensajes que contienen enlaces a fin de prevenir el SPAM. Cuando eso sucede los demás usuarios no pueden ver esos comentarios, y el administrador de la página ve esos comentarios remarcados con un fondo gris para que decida si debe eliminarlo o no.

Poner en el blog aviso En Construcción

Hace poco veíamos cómo hacer para que sólo el administrador del blog pueda ver ciertos gadgets, y los demás lectores no. Usando la misma etiqueta que ocupamos en esa entrada podemos hacer que el blog quede oculto para los demás, y así podemos poner un aviso para decir que el blog está en construcción.

De esta forma mientras cambiamos de plantilla, o hacemos modificaciones al blog, los lectores no podrán ver nada, sólo el administrador podrá ver el blog, los demás verán una imagen que indica que el blog está en construcción.

Para poner este aviso en tu blog entra en la Edición HTML de la plantilla, y agrega justo antes de body { esto:

body#layout #construccion {display:none !important;}
body#layout .blog-admin {display:block !important;}

Luego busca la etiqueta:

<body>

Si usas una plantilla del Diseñador de Plantillas de Blogger entonces debes localizar esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de esas dos agrega esto:

<div id='construccion' style='background:#FFF; height:700px;'>
<div style='margin-top:-30px; text-align: center; padding-top:100px;'>
<img border='0' src='URL de la imagen'/></div>


</div>
<span class='item-control blog-admin'>

Ahora busca la etiqueta </body> y justo arriba de ella agrega esto:

</span>

Ya sólo pon la URL de la imagen que dirá "En construcción" y listo.

En color verde puedes modificar el color de fondo, la altura de la pantalla, y la distancia de la imagen desde arriba.

Pero una imagen no es lo único que puedes poner, de hecho puedes poner cualquier elemento aceptable, como un texto, un video, o un juego en flash para que tus lectores se entretengan mientras terminas de construir el blog. Cualquiera de esos elementos debes ponerlos antes del </div> en color azul.

De esta forma mientras hagas cambios importantes en el blog los lectores no verán todo el tiradero. Pero toma en cuenta que, aunque nosotros sí podremos ver el blog, no podremos verlo completo desde la Vista Previa, y si entras a tu blog mientras tengas el aviso "En construcción" primero verás el mismo anuncio que ven tus lectores, y bajando la página aparecerá todo tu blog.

2 dominios gratis (bueno, 3)

No, no estamos celebrando nada, pero tampoco hace falta una fecha importante para poder dar unos regalitos, aunque ya se nos ocurrirá un pretexto después.

Sé que muchos por ahora no pueden obtener un dominio propio y están deseosos de tener uno, así que vamos a regalar 2 dominios propios con duración de un año cada uno.

La mecánica es sencilla, un dominio se regalará por Facebook y el otro por Twitter, así que para participar debes ser seguidor de nuestra página de Ciudad Blogger en Facebook, y Ciudad Blogger en Twitter.

El lunes 21 de noviembre haremos dos preguntas acerca de Ciudad Blogger, una por Facebook y otra por Twitter, el primero en responder correctamente a una de las dos preguntas se hará acreedor a uno de los dominios que regalaremos.

Las reglas son simples:

• Debes seguirnos por Facebook
• O debes seguirnos por Twitter
• Responde correctamente a una de las preguntas y gana.
• Sólo podrás responder una vez por pregunta.
• Si ya ganaste en una pregunta no podrás responder en la otra.

Así nada más podrás hacerte de 1 dominio gratis por un año. Así que si aún no nos sigues ¿qué esperas? Y si ya nos sigues por las redes sociales entonces a estar atento(a) a las preguntas del lunes pues un dominio te está esperando ;)

¿Algo más? Ah, sí, los Términos y Condiciones del concurso para que esté todo claro.

¡Mucha suerte a todos!

Hacer que un gadget sólo lo pueda ver el administrador del blog

Pues el título de la entrada lo dice todo. Hay gadgets que a veces queremos verlos sólo nosotros y no los lectores del blog, quizá una Encuesta que ya finalizó pero que queremos conservar, un contador de visitas, o cualquier gadget que mientras lo personalizamos no queremos que nadie más lo vea hasta que esté listo el resultado final.

El procedimiento es sencillo, sólo tenemos que agregar dos líneas a nuestro gadget que queremos ocultar.
Lo primero es entrar a la Edición HTML de la plantilla, marcar la casilla Expandir plantillas de artilugios y buscar el código del gadget que queremos ocultar. Será más fácil usando las teclas CTRL+F y localizando el nombre del gadget.

Por ejemplo, en un gadget HTML/Javascript verás un código como este:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

Lo único que tienes que hacer es agregar las partes en color rojo y listo. Si cierras la sesión y entras a tu blog no podrás ver el gadget que ocultaste, pero si inicias sesión verás que sí está visible para ti.

No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte, sólo debes colocar el primer código rojo justo después de <b:includable id='main'>
Y el segundo código rojo exactamente antes de </b:includable>

Y con eso el gadget estará oculto para los lectores menos para ti.

Galería de Videos con Coda Slider

AVISO

Esta galería de videos ya no funciona, se recomienda buscar otra opción.

La otra vez veíamos cómo poner una galería de imágenes con Coda Slider, y dado a las posibilidades que tiene el script pensé que podríamos hacer una galería de videos con este mismo slider sólo haciendo unas pequeñas modificaciones.

El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.

El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[

$(function() {
$("#main-video-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>

Ahí coloca donde se indica las URLs de los archivos que subiste previamente.
Luego antes de ]]></b:skin> coloca los estilos de la galería:

/* Coda Slider (Video)
----------------------------------------------- */
#page-wrap {
width: 490px; /* Ancho del contenedor general */
min-height: 354px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(http://lh5.googleusercontent.com/-G4VkOTiq72Y/TroR_ySL7-I/AAAAAAAAB54/Kg92zbZvd80/s490/vid-bg.png) top center no-repeat;
}
.slider-wrap {
width: 450px;
position: absolute;
top: 20px;
left: 20px;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 450px; /* Ancho del contenedor de los videos */
height: 274px; /* Alto del contenedor de los videos */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 16.6%; float: left; }
#movers-row div a.cross-link { float: right; }
.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }

El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:

<div id="page-wrap">
<div class="slider-wrap">
<div class="csw" id="main-video-slider">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 2">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 3">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 4">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 5">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 6">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 7">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>

</div></div>

</div></div>
<!-- Estas son las MINIATURAS de los videos -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>

</div>
</div></div>

Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:

Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.

También puedes poner videos de otros servicios, sólo debes eliminar un código como este:

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:

<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.

Habilitar las plantillas personalizadas para móviles (y administrar gadgets)

Ya hace casi un año que Blogger lanzó las versiones para móviles que poco entusiasmo generaron por la simpleza de estas versiones. Pues hoy Blogger Buzz han anunciado que Blogger habilita las plantillas personalizadas para móviles, esto es que, el diseño actual de tu plantilla podrá conservarse en la versión móvil.

Para activar las plantillas personalizadas entra dentro de la nueva interfaz en Plantilla y haz click en el ícono del engrane que está debajo de la previsualización de la versión móvil.

En "Elegir plantillas para móviles" selecciona Personalizado.

Usa el botón de Vista previa para ver cómo se ve tu blog en la versión móvil con tu plantilla personalizada.

Y guarda los cambios. Tu blog deberá verse igual en los dispositivos móviles.
Si usas la antigua interfaz entra en Configuración | Correo electrónico y móvil y sigue el mismo procedimiento.

Los gadgets que aparecen por defecto (o deberían aparecer) son la cabecera, las entradas, el perfil, el gadget de Páginas, AdSense y el gadget de los créditos.

Pero si deseas que otros de tus gadgets también aparezcan entonces entra en la Edición HTML de la plantilla y SIN expandir los artilugios busca la línea del gadget que te interesa, por ejemplo, el gadget de Etiquetas se verá más o menos de esta forma:

<b:widget id='Label1' mobile='yes' locked='false' title='Etiquetas' type='Label'/>

Agregando lo que está en color rojo indicará que ese gadget debe verse también en la versión móvil del blog.
Por lo contrario, si deseas que un gadget no aparezca en la versión móvil deberás indicarle que no lo haga:

<b:widget id='Label1' mobile='no' locked='false' title='Etiquetas' type='Label'/>

Y mejor aun, si quieres que un gadget únicamente sea visible en la versión móvil entonces le añades lo siguiente:

<b:widget id='Label1' mobile='only' locked='false' title='Etiquetas' type='Label'/>

Ahora sí podrás tener una versión móvil de tu blog mucho más personalizada conservando el diseño de tu plantilla y con la ventaja de decidir qué gadgets quieres que se vean y cuáles no.

Crear una página en Google+ (Google Plus)

Si Google+ le anda pisando los talones a Facebook entonces debía ofrecer la opción de crear páginas, y eso es lo que ha hecho. Ahora ya podemos crear una página de nuestro blog en esta nueva y dinámica red social de Google.

El procedimiento es tan fácil que no nos quita ni un minuto en hacerla. Sólo ingresa a la sección de páginas de Google Plus y selecciona el tipo de página que crearás (para los blogs el más apropiado es "Otro").

Dale un nombre a tu página, escribe la URL de tu blog, selecciona quién puede ver tu página y acepta las condiciones del servicio. Luego click en Crear.

Al instante se crea tu página, ya sólo escribe el slogan de tu blog y sube la foto del perfil que tendrá.

Una vez hecho esto tu página ya está y lista y puedes decirle a tus contactos en tus círculos que ya tienes tu nueva página.

Lo último será mostrarte una página con todo lo que puedes hacer en tus páginas (nada que no podamos hacer en nuestros perfiles de Google+), y ahí vendrá la URL de tu página que podrás usar para promocionar en tu blog.

O si lo prefieres, ahí mismo verás un enlace para crear una insignia que podrás poner en tu blog dentro de un elemento HTML/Javascript.

Si después deseas eliminar tu página sólo entra en Tus páginas y desde ahí podrás administrarla o eliminarla.

Como ves es rápido crear tu página de Google+ y en pocos segundos podrás usar esta nueva opción. Por cierto, si lo deseas puedes unirte a la página de Ciudad Blogger en Google+ haciendo click en el botón.

Ciudad Blogger

en Google+

Reducir el espacio entre las entradas y las sidebar en las plantillas del Diseñador

No sé si sea cuestión de percepción individual, del navegador, o qué se yo, pero muy a menudo me preguntan cómo reducir el espacio que hay entre los posts y la sidebar en las plantillas hechas con el Diseñador de Plantillas de Blogger. Y digo cuestión de percepción porque yo siempre las he visto con una distancia bastante aceptable, pero supongo que aquí ya es más cuestión de gustos.

Como sea, si quieres reducir la distancia entre posts y sidebar basta con agregar un margen con valor negativo y así reducir ese espacio.

Si usas la plantilla Simple, Picture Window, Fantástico S.A, Filigrana o Ethereal, entra en la Edición de HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {margin-left: -20px !important;}

Dale Vista Previa, si tiene la distancia que deseas guarda los cambios y listo.
Pero si usas la plantilla Travel (Viajes) entonces el procedimiento es otro, para ese caso busca una línea como esta:

<Variable name="content.padding" description="Content Padding" type="length" default="20px" value="20px"/>

Tal vez tenga otros valores, pero debes fijarte que tenga lo que está en negrita. Cambia el último valor (el de value) por 0px
Habiendo hecho eso la distancia se habrá reducido.

El espacio lo podemos modificar para hacerlo más separado o más junto; con un valor menor (como -25px) se reducirá más, y con un valor mayor (como -10px) la reducción no será tanta.
Hay que tomar en cuenta que ese valor que reducimos se distribuye uniformemente en la(s) sidebar(s) y el área de las entradas.

Esta modificación aplica para las plantillas con una o dos sidebar, pero todas hechas con el Diseñador de Plantillas de Blogger.

¿Quieres eliminar el espacio que hay arriba de la plantilla? Entonces mira esta entrada.

Coda Slider: Galería de imágenes con miniaturas

AVISO

Este slider ha dejado de funcionar por razones que aun desconozco, se recomienda usar algún otro slider dentro de la categoría de Slideshows.

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.

Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.

Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.

Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function() {
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;

}, 3000);
};

// DOM Ready
$(function() {
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>

Ahí agrega donde se indica las URLs de los archivos que subiste previamente.
Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider
----------------------------------------------- */
#page-wrap {
width: 500px; /* Ancho del contenedor general */
min-height: 420px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(http://lh3.googleusercontent.com/-T3CeFMv7TuY/TrG39iTPVMI/AAAAAAAAB30/Xj01daCeVD0/s501/bg.png) top center no-repeat;
}
.slider-wrap {
width: 419px;
position: absolute;
top: 40px; left: 40px;
background:#DADADA;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 419px; /* Ancho del contenedor de las imágenes */
height: 285px; /* Alto del contenedor general */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data {
background: url(http://lh4.googleusercontent.com/-eGusptX3R34/TrG4KBNKsQI/AAAAAAAAB4E/T5eyooRo_hs/s10/transpBlack.png);
padding: 10px;
height: 40px;
margin-top: -60px;
position: relative;
z-index: 100;
color: #FFF; /* Color del texto de las descripciones */
}
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }
.active-thumb { background: transparent url(http://lh6.googleusercontent.com/-NCDDHCav-NU/TrG4Hv2KO8I/AAAAAAAAB38/Wsgxy7dTeEU/s14/icon-arrow.png) top center no-repeat; }

Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>
<div class='slider-wrap'>
<div class='csw' id='main-photo-slider'>
<div class='panelContainer'>

<div class='panel' title='Panel 1'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 2'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 3'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 4'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 5'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 6'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


</div></div>
<!-- Estas son las MINIATURAS -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>

</div>
</div></div>

Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.

Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.

Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.

Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.