Personalizar la cabecera en las Vistas Din?micas de Blogger

Es cierto que las nuevas plantillas de Vistas Din?micas de Blogger han gustado a la mayor?a por los efectos que tienen para mostrar las entradas y la forma como se navega en ellas. Pero tambi�n es cierto que a muchos ha desilusionado el no poder personalizarlas como quisieran.

Por suerte no todo est? perdido, pues aunque no podemos agregar gadgets en ella, s? podemos modificar ciertas ?reas para que tu blog no sea vea igual al de todos. As? pues veremos c?mo ir transformando las partes que se puedan; y empezaremos con esta entrada con la que conseguiremos personalizar la cabecera del blog en las plantillas de Vistas Din?micas.

La cabecera es basicamente lo que define la imagen de todo blog pues ah? se encuentra nuestro logotipo, as? que pasaremos de esto:

A esto: [Ver blog de pruebas]

Lo ?nico que necesitamos es la imagen de nuestra cabecera y nada m?s. Si a?n no tienes una aqu? hay 50 cabeceras de d?nde escoger.
Si usas la nueva interfaz de Blogger entra en Plantilla | Personalizar | Avanzado.
Si usas la vieja interfaz de Blogger entra en Dise?o | Dise?ador de plantillas | Avanzado.

Ahora ah?, donde dice A?adir CSS agrega esto:

.header-bar {
background-color:#738a94 !important; /* Color de fondo */
background-image:url(URL de la imagen) !important; /* Imagen de fondo */
background-repeat:no-repeat; /* Si quieres que la imagen se repita c?mbialo por repeat */
height:149px !important; /* Altura de la cabecera */
border-bottom:25px solid #3b464b; /* Borde inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre la cabecera y el contenido */

Cambia la URL de la imagen donde se indica y personaliza lo dem?s que se indica en color verde.

Algunas propiedades tendr?s que descubrirlas por ti mismo pues aqu? no hay valores espec?ficos ya que depende de cada caso. Por ejemplo, la altura debe ser aproximadamente 20px menos que la altura de la imagen, pero si la imagen es un pattern peque?o entonces la altura la puedes establecer a la medida que quieras.

Yo le he puesto un borde inferior, pero puedes quitarlo, hacerlo m?s delgado, o m?s grueso, eso ya es cuesti?n de gustos.

Como hemos establecido una altura para la cabecera y le hemos puesto (o no) un borde, entonces es muy probable que las entradas y el peque?o men? se hayan tapado, as? que para que eso no suceda hemos establecido un margen en #main, ah? el valor tambi�n tendr?s que irlo descubriendo, s?lo es cuesti?n de probar varios valores hasta que quede tal como te gusta.

?Sencillo? S?, mucho, pero lo mejor de todo es que con este peque?o cambio el blog comenzar? a verse con identidad propia. Y despu�s... bueno, ya veremos despu�s qu� se nos ocurre para irle dando forma a nuestro blog.

Las Vistas Din?micas ya disponibles en Blogger

Algunos recordar?n que desde finales de marzo Blogger hab?a anunciado las Vistas Din?micas, unas nuevas formas de ver el blog; aunque en ese tiempo no le encontramos sentido ya que s?lo era para verlas, mas no para usarlas en forma aplicada en nuestra plantilla. Ayer, desde Blogger Buzz anunciaron la disponibilidad de estas Vistas Din?micas ahora como plantillas que podemos utilizar.

Seg?n Blogger, la carga del blog con estas plantillas es 40% m?s r?pido, y puede ser, ya que s?lo cargan las entradas, as? que no se muestran gadgets o nada parecido pues de hecho no existe la opci?n de agregar nada m?s.

Ciertamente son dise?os muy atractivos, din?micos e interactivos que a muchos puede gustarles, sobre todo aquellos que quieren s?lo publicar y olvidarse de la personalizaci?n.

Quien quiera empezar a usar alguna de estas siete plantillas puede hacerlo desde la nueva interfaz de Blogger en Plantilla, o en el Dise?ador de plantillas del Blogger antiguo; s?lo hay que tomar en cuenta que, son plantillas, por lo que si eliges una de ellas y la aplicas perder?s tu pantilla actual, adem?s que, al elegir una de estas plantillas de Vistas Din?micas se desactiva la Edici?n de HTML. As? que si te decides a usarlas se recomienda hacer primero un respaldo de la plantilla actual, por si despu�s quisieras regresar a la plantilla que tienes.

Lo dicho, son plantillas muy vistosas y originales, pero exclusivas (por ahora) para quienes no pretendan agregar gadgets, o personalizar nada en su blog.

Si a?n no te decides a usarlas puedes echar un vistazo para ver c?mo se ver?a tu blog con una de estas nuevas plantillas.

.blogspot.com

Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bit?coras)

Hay muchos sitios para compartir nuestras entradas, y muchos de ellos proveen un bot?n para compartir, lamentablemente a veces tenemos que elegir s?lo un par de ellos pues si ponemos todos, (o la mayor?a de ellos) entonces el blog se ve muy saturado. As? que una opci?n es poder agruparlos en un contenedor que est� invisible y accesible s?lo cuando el lector haga click sobre �l. De esa forma podemos agregar los botones para compartir de habla hispana m?s importantes, como son Facebook, Twitter, Google+, Taringa y Bit?coras.

Lo que haremos entonces ser? mostrar una burbuja (bot?n) al final de las entradas, y cuando el lector de cick sobre �l se abrir? con un efecto deslizante un contenedor que tendr? dentro los botones de las principales redes sociales de habla hispana. Este gadget para promocionar nuestros posts ser? visible s?lo en las entradas individuales.

Puedes ver un ejemplo al final de esta entrada, haciendo click en el bot?n se desplegar?n los botones para compartir.

El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el bot?n) lo haremos con CSS3.

Empecemos: primero ingresa en la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery(&quot;#msg-compartir&quot;).click(function(event) {
event.preventDefault();
jQuery(&quot;#btns-compartir&quot;).slideToggle();
});
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del tri?ngulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}

Por ?ltimo, busca esta l?nea:

<div class='post-footer'>

Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>

<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

<td><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este art?culo en Bitacoras.com'/></a></td>

</tr>
</table>
</div>
</center>
</b:if>

Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las ?reas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada bot?n.

Recuerda que:

• S?lo ser? visible en las entradas individuales, NO en la portada.
• La burbuja est? hecha con CSS3, as? que si usas un navegador viejo como Internet Explorer 8 s?lo ver?s un rect?ngulo.
• En Internet Explorer el bot?n de Facebook no se ver? bien, aunque s? funcionar?.

Comparte esta entrada

Tweet

El nuevo Lightbox de Blogger

Desde hace unos d?as el nuevo juguete de Blogger ten?a a todos como siempre con la especulaci?n de no saber qu� pasaba, y el d?a de hoy desde Blogger Buzz han anunciado de forma oficial el Lightbox de Blogger, un sistema de ventanas modales para las im?genes que hace que estas se muestren en forma de galer?a con un fondo negro.

Ese nuevo sistema funciona de forma autom?tica en todos los blogs, cuando haya una imagen en una entrada �sta podr? verse con ese "nuevo" sistema al hacer click en ella, pero si la imagen tiene un enlace a otro sitio entonces no surgir? efecto.

A muchos ha gustado, a otros no, y para los que no desean tener este Lightbox de Blogger en su blog hay algunos m�todos para sacarlo, o mejor dicho, para que no pueda cumplir su funci?n.

Jmiur public? hace unos d?as un script para que este sistema de ventanas modales no pueda funcionar en el blog. Vku por su parte public? otro c?digo m?s corto que hace algo parecido.

Yo he elegido quitarlo, una porque no me gusta que Blogger decida por m?, y otra porque ya uso Shadowbox que me parece mucho m?s completo.

As? que quien quiera quitarlo ya tienen un par de m�todos para hacerlo, y los que quieran dejarlo, pues no tienen que hacer nada.

Caja de aviso para el blog con opci?n de cerrar

Esta caja de avisos es la que vieron ahora que me ausent� y que muchos me han estado pidiendo. No es nada del otro mundo, de hecho, es una mezcla del mensaje tipo Post-it, y de las etiquetas Fieldset y Legend.

El resultado es una caja de avisos con opci?n de cerrar y como tiene CSS3 se aprecian sombras tanto en la caja como en el texto de Aviso.

No, no intentes cerrarla, esta es una imagen.

Y bueno, la colocaci?n es pr?cticamente s?lo un paso, ?nicamente hay que entrar en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pegar lo siguiente:

<style type="text/css">
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQl6_WZycfHNEb292u_GPsAqzE98OJu71sShMcESJPKMKpavn3PzUBAMq3ZPmdOtkJuw5cecSlUReS3z4aSR912GVydF8Aevqq9CzuNppPtI7mabw4EQC47Qk8tCFCFID7UOKW99F11q2/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Aqu? va el mensaje...
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFqBlL6Bqs9eu3ic1Q5LNvwZY7zN-WpuGcdzkdTh8GZF5pHzuVi_trARX7gGQPaGoy4jt-qWtfBc0x1WyD-5VnRHeAev0AXMCsOoPSJrMhR5hg3BJ-6fW5Ye-9OdcvBTZANe97jlcjap3K/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxbP0zYY78va_C3FnZzMCmqonTd0PiEIiBZtimzfWcVa685ev4eMt0S6zxW8axWFyB_wEuSXcyonhwC2Cz-ziyF3IzmxBAwz0N6UBEhj3kZFBhK52DEItrOQrLxuDLnilepShXOvc0eA3/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

S?lo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook (si es que tienes, y quieres) donde se se?ala.

En la primera parte del c?digo he se?alado en color verde los estilos m?s importantes que se pueden personalizar como el color de fondo, tama?o y posici?n de la caja, etc.

En donde dice left:300px; top:100px; se puede controlar la posici?n de la caja de avisos, left es la distancia desde la izquierda, y top la distancia desde arriba.

Y, eso es todo. Disculpen la entrada tan escueta pero mis energ?as se quedaron en la playa...