Como personalizar la cabecera de cada barra lateral de otro color


Como personalizar la cabecera de cada barra lateral de otro color en Blooger

Estuve observando algunas plantillas de Wordpress y me di cuenta que algunas de ellas tenían en sus barras laterales encabezados con diferentes colores. Es por esta razón que comencé a investigar a fondo de cómo realizar este truco en las plantillas de blogger y apenas la semana anterior durante la edición de prueba de mi blog me encontré con un hecho interesante acerca de los widget de Blogger. Todos los widgets que he añadido en mi barra lateral derecha tienen un identificador único asignado por blogger. Al final utilice el ID de cada widget para tratar de conseguir el cambio de colores de la cabecera de cada una de ellas y me funciono correctamente. Así que con este identificador único pude personalizar cualquier parte del widget. Ahora quiero compartir con ustedes este maravilloso tutorial en el cual aprenderán a como personalizar los encabezados de la barra lateral de cada widget de blogger. A continuación siga mis instrucciones paso a paso.  

Primero vamos averiguar el nombre de nuestro identificador único de cada widget de Blogger

1 Acceder a Blogger
2 Haga un clic donde dice “Ver blog”
3 En su blog, debajo de cada widget va ha encontrar una imagen similar a esta


Sitúe el cursor del ratón sobre él y haga clic derecho y seleccione “Copiar la ruta del enlace”, una vez hecho esto copie la ruta de su enlace en Word o en su blog de notas, esto es para asegurarnos de no borrarlo y tenerlo listo para implementarlo en nuestro blog de blogger.

Su ruta de enlace se vera así:


4 Ahora lo que queremos saber es cual es nuestro identificador único de cada widget, es fácil, por ejemplo mi identificador único es “Profile1”, y mis otros identificadores son “HTML15”, “HTML6” y así sucesivamente de cada widget. Para que ustedes no fallen en su identificador, este se encuentra antes de &action, entonces por lo general ustedes encontrarían su identificador único así Profile1&action, lo que resta es solo copiar Profile1 cuando ya nos vayamos a la configuración de blogger.   

¿Cómo personalizar un widget usando su ID unico?

Ahora viene la parte interesante. Vamos a personalizar el widget del estilo de encabezado, es decir vamos a poner un código H2.

1 Dirijase a “Plantilla

2 De un clic donde dice “Editar HTML” 

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como personalizar la cabecera de cada barra lateral de otro color

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Como personalizar la cabecera de cada barra lateral de otro color

3 Busca este código ]]></b:skin>  
4 Pegue el siguiente código justo encima de ]]></b:skin>  

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

Ahora reemplace ID por su identificador único del widget que quiera personalizar su color. Para cambiar el fondo de color del encabezado, cambie este #575656 por el que usted quiera. Y por ultimo para cambiar el color del texto, cambie este #ffffff  por su color preferido.

Por ejemplo así es como debería de quedarles

#Profile1 h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

5 Ahora dele un clic donde dice “Guardar plantilla” y listo diríjase a su blog y mire sus cambios.

Nota: Si quieres cambiar de color todos los encabezados de tus widget de blogger, tendrás que repetir todos los pasos antes mencionados para cada uno de ellos.

Espero que les haya encantado esta publicación y lo hayan podido realizar, he tratado de ser lo mas explicativo posible.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

6 comentarios:

  1. Hola Luis, no se porque, a mi no me funciona. No consigo poner la barra superior del titulo de cada widget del color que quiero.
    Podrías ayudarme ?
    Tengo esta plantilla. http://btemplates.com/2013/blogger-template-alfa/ Creo que de la otra manera se vería mejor con ese relleno. Ya me cuentas. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola he actualizado este post, mira de nuevo los pasos a seguir y si todabia no puedes me avisas para poder ayudarte de otra forma.
      Saludos.

      Eliminar
  2. Hola Luis, he seguido paso por paso y no consigo modificar los colores, me da el siguiente error cuando hago una vista previa: BAD REQUEST Error 400
    Mi blog (aunque a medio hacer) es http://cincotapas.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola, no estas siguiendo correctamente las instrucciones de este tutorial. Siguelo al pie de la letra y notaras que te funciona..
      Saludos

      Eliminar
  3. una consulta por favor como puedo colocar una imagen que diseñe en photoshop en la cabecera de la barra lateral, muchas gracias por la respuesta

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, abra una entrada, cargue ola imagen que creo en photoshop en la entrada, luego habilite el modo HTML de la entrada y copie todo el código generado. Luego no publica la entrada solo le pone Guardar como borrador, y se dirige a Diseño, un clic en Añadir un gadget, busque el widget HTML/Javascript, ábralo he ingrese el código que copio de su entrada, luego le da un clic en Guardar y ubica su nuevo widget en el sidebar de su blog.

      Saludos.

      Eliminar