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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6REXR7D4_7caCWaTWDXMxTlrrK4TfQNoUZUmxMfOsLEsOYqQghsVatxaAe2ytnxoB8xLlKXzIrcF9u5FmNbzZD6HGobjEV0FnB2y8ith8LkL3aP9lETecKlUe-eXVgbk3pFd1E9F3yaQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAR5K73e-3A3NtRAPf29Nssj7kvZM7FR8EEU9Y6XTG6C6LFX9pMKqolpdrpJBHC4SX5EKi6sjyvFdkda4TpxKWdJ8Z50dk0gTtRnVNXIFRZpHMKskBP2MVzKn31zhloz8H-UrZEkY1qv8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nlRyyOqNZMyuUUlgKOp4X9YAZzovLo_qEHnJfZ1UzSkkJTW9iM2zFPGAzChf_w6_BYPzv9CuriLwJvo6i4l3FYdjQ4EgGAHFcH24zvhCXZy3juFCLCYlHbAkl44-jH9sGXlaVKK3IKo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8fyaKsKEnvCXA7Iv8AwgOecX9LuWMxbLs-a3REmJnOluMOhV6YhyphenhyphenaDRs2jcsSy4Zqd3tHNr63s-izMWxJYgkTCSbyqZjHUqJiSaO8RQcPfNrgkHhz87A65D8o7W8F9IRfo_DIOs7FDU/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.