Entrada destacada

PƁGINA DE BIENVENIDA

PƁGINA DE BIENVENIDA

Como personalizar la cabecera de la barra lateral de otro color

Como personalizar la cabecera de la barra lateral de otro color


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Ć­:

http://www.blogger.com/rearrange?blogID=7678454437898&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=sidebar

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




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.

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.



Fecha: 04-10-2017

Fuente

Publicado por        






CONVERSATION

0 comentarios:

Publicar un comentario

AddToAny

Printfriendly

Back
to top