Diego Cabai KEEP I.T. SIMPLE, KEEP I.T. CLEAN

Cómo Sacar el Título y la Descripción de Blogger/Blogspot

Este artículo es para la gente que está iniciando en Blogger o bien hace tiempo que está pero no sabe cómo modificar el título y descripción que aparecen por defecto en un template común y corriente.
Cuando damos de alta un nuevo Blog por ejemplo, pone el título por default en el header de la página. Lo mismo pasa si agregamos una mini descripción del mismo.

Blogger nos da como opción agregar una imágen al fondo del título o header pero si lo hacemos no queda muy bien con el título o descripción que aparece ahí con una fuente standard y los colores standard. Cuando digo standard es a las opciones de customización básicas que nos provee Blogger para modificar el título. Qué pasa si queremos un título mas avanzado o hicimos algún gráfico al estilo 2.0 muy bueno y queremos usarlo como título único sin que figura ni el título ni la descripción?

En el artículo Cómo crear un Logo Web 2.0 en Photoshop se explica de manera muy sencilla cómo hacer un buen título para Blog sin demasiados conocimientos. Si eso sigue siendo difícil para ti entonces prueba con SimWebSol Logo Generator o Web 2.0 Stylr que son herramientas online para generar logos.

Bueno la idea es comentar los pasos para modificar el título, descripción y fondo del header de un template común por default para que todos puedan hacerlo y así darle un mejor look and feel. También al final de regalo comento cómo sacar la barrita de Blogger un tanto molesta que se pone arriba de todo en la ventana.

Como primer paso siempre es necesario registrar el Blog en www.blogger.com o bien ingresar al panel de nuestro blog ya creado.
Una vez que tengamos nuestro Blog necesitamos ver que tengamos el título y la descripción configurada, esto es importante, NO HAY QUE BORRAR EL TITULO Y LA DESCRIPCION, lo que vamos a hacer es una modificación en el código para que no se vea, pero hay que dejar esos datos para que otras páginas como los buscadores por ejemplo nos detecten por esa info o bien ya sea como título de la misma. Esto lo configuramos dentro de "Configuración", solapa "Básico" y campos "Título" y "Descripción".

Si tenemos el Blog por default configurado deberíamos ver algo por el estilo...

Acá podemos ver el título del Blog "Diego Cabai Beta", su descripción justo debajo, el fondo del header que es todo verde y la barra superior de Blogger.
La idea es modificar todo esto para poder poner un lindo logo estilo web 2.0 de fondo. Hacemos el logo en las páginas web que les pasé mas arriba y logramos algo por el estilo que vamos a subir a algún hosting que tengan o bien a su cuenta de picasaweb.google.com.

El logo creado es el siguiente:

Bueno, ahora como siguiente paso vamos a quitar el título y la descripción de la página modificando el código HTML. Para esto vamos dentro de nuestro Panel de Blogger a "Diseño" -> "Edición HTML". Ahí hacemos click en "Expandir plantillas de artilugios" para que muestre todo el código.

Para sacar el título debemos buscar el siguiente código:

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <data:title/>
<b:else/>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

Y modificarlo eliminando el <data:title/> para que quede de la siguiente manera:

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:else/>
  <a expr:href='data:blog.homepageUrl'></a>
</b:if>

Luego hacemos lo mismo para Descripción, buscamos el siguiente código:

<b:includable id='description'>
<div class='descriptionwrapper'>
  <p class='description'><span><data:description/></span></p>
</div>
</b:includable>

Y lo modificamos eliminando el <data:description/> de la siguiente manera:

<b:includable id='description'>
<div class='descriptionwrapper'>
  <p class='description'><span></span></p>
</div>
</b:includable>

Guardamos las modificaciones que hicimos y en este punto podemos ver cómo nos quedó nuestro Blog de prueba y lo muestro en la siguiente imágen:

Podemos ver que el título y la descripción ya no es encuentran, pero el título en la ventana del explorador se mantiene y si pedimos información desde afuera nos trae incluso la descripción.

En el siguiente paso vamos a eliminar la barra de Blogger que aparece arriba de todo, esa azul por default que podemos cambiar de color pero que la verdad a la mayoría nos molesta. Es totalmente legal, se puede hacer y no perjudicás para nada tu sitio, así que si la barra no te agrada seguí estos pasos para quitarla. Luego de este paso vamos a agregar un logo para que quede bien como título.

Para quitarla debemos agregar un código, para esto vamos nuevamente a "Edición HTML", pero esta vez no hace falta expandir los artilugios. Lo que debemos buscar es la línea de código <b:skin><![CDATA[ y poner este código justo una línea debajo. Si al lado de esa línea se encuentra un /* se debe poner entre medio de ambos para que funcione. No hay problema en hacer espacio con la tecla enter, pero asegurate que quede luego del CDATA[ y antes del /* en caso de que exista, repito nuevamente.

Código:

#navbar-iframe {
 height:0px;
 visibility:hidden;
 display:none
}

Guardamos lo que hicimos y vamos a ver que la barra superior ya no se encuentra mas entre nosotros. :)

Ahora como último paso vamos a insertar un logo que creamos como título de nuestro Blog. Debemos subir nuestro logo a un hosting de imagenes o nuestro propio hosting, pero si es un hosting de imágenes gratuitas también sirve. Necesitamos si la dirección URL de la imágen para lograr la customización. El siguiente código se puede insertar justo antes de ]]></b:skin> y luego paso a explicar qué es cada sección para luego poder modificarlo a gusto.

.milogo {position: relative; top: 0px; left: 40px; background: url(http://www.lcinstalaciones.com.ar/dcblog20/img/misc/dcabai_beta.png) no-repeat left top; width: 260px; height: 78px; padding: 0;}

Ese va a ser el código del diseño, ahora el código para insertar el logo es el siguiente y debe estar justo después de <div id='header-wrapper'>.

<div class='milogo'/>

Con ese código ya insertado vamos a ver el siguiente resultado:

Como se puede ver ya el diseño cambió y tiene un poco mejor de look estilo web 2.0. No es la gran cosa pero era simplemente para mostrar cómo hacerlo. Ahora bien, qué significan las líneas de código de diseño del logo y cuáles debemos modificar?

.milogo = Este va a ser el nombre de la clase que va a tener el diseño, si lo modificamos debemos cambiarlo en la segunda parte del código también.

position: relative = Este parámetro puede ser relative o absolute y puede variar según nuestro blog cuando modifiquemos el tamaño de ventana. Probar con el que mejor quede.

top: 0px = La cantidad de píxels que va a tener contando desde arriba de todo.

left: 40px = Idem que el anterior pero desde la izquierda.

background: url(http://milogo.jpg) no-repeat left top = Este ítem es donde debemos poner la URL de la imágen que queremos subir, la misma va dentro de los paréntesis de url, luego el no-repeat le dice que la imagen no se repita y sea una sola y por último diciéndole left y top quiere decir que se va a posicionar arriba a la izquierda.

width:260px = Este es el ancho de la imágen, debe ser exacto para que quede bien.

height:78px = Idem que el anterior pero el alto de la misma.

padding: 0 = El padding es un estilo de margen que se le puede agregar a la imagen, con 0 le decimos que no hay ninguno, pero cambiandolo por un número sería en píxels.

Hay que recordar que NO estamos utilizando la función de agregar gráfico de Blogger ya que no queda muy bien, sino que estamos editando el código directamente.

Eso es todo, cualquier parámetro con dudas o cualquier consulta por favor dejame un comentario que lo voy a responder a la brevedad o bien puedes enviarme un correo desde la botonera haciendo clck en "Contacto".

Artículos relacionados: