personaliza títulos de gadget

Personalizar títulos de sidebar + DESCARGA WASHI-TAPE digital

personalizar-titulo-gadgets-juntos

Para personalizar los títulos del sidebar lo tenemos muy facilito, ya que solo tenemos que copiar y pegar un código que tendremos preparado en nuestro block de notas, writer o word.  

Lo primero que vamos a hacer es tener claro el estilo que estamos buscando: limpio, tranquilo, que pase desapercibido o que por el contrario sea muy llamativo.   Sinceramente vuelvo a lo mismo que he comentado cuando diseñamos nuestra cabecera; lo sencillo puede enamorar. Así que por esa regla de tres me voy a guiar en este post.  

Voy a ofrecerte varios códigos diferentes para que puedas elegir el que más encaje contigo y con tu blog, y también te aporto cómo modificar partes a tu gusto.

Opciones que directamente puedes copiar de este post:

  • Línea sencilla antes y después
  • Línea triple antes y después
  • Línea doble antes y después
  • Efecto fondo Washi-tape
  • Fondo de color cuadrado
  • Fondo de color redondeado
  • Cuadrado
  • Solo texto

Personalizar títulos de sidebar con Línea sencilla antes y después:

.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
    font-size: 20px;
    content: "2014" "0A0" ;
}
.sidebar h2:after {
font-size: 20px;
content: "0A0" "2014" ;
}

Título de gadget sidebar con Línea triple antes y después:

.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
    font-size: 15px;
    content: "2261" "0A0" ;
}
.sidebar h2:after {
font-size: 15px;
    content: "0A0" "2261" ;
}
   

Personalizar títulos de sidebar con Línea doble antes y después:

.sidebar h2 { font-family: 'Arial' !important;  font-size:12px !important; color: #666;  text-transform: uppercase; letter-spacing: 2px; text-align: center; padding-top: 5px; padding-bottom: 5px;}.sidebar h2:before {    font-size: 15px;    content: "2550" "0A0" ;  }    .sidebar h2:after { font-size: 15px;    content: "0A0" "2550" ;   }

Personalizar títulos de sidebar con Cuadrado:

.sidebar h2 { font-family: 'Arial' !important;  font-size:12px !important; color: #666;  text-transform: uppercase; letter-spacing: 3px; text-align: center; border:1px solid #8fb59e; padding: 15px; } 

  R E C U E R D A  : si modificas los píxeles en la parte de “border” puedes conseguir líneas más gruesas.

Título de gadget sidebar con Línea arriba y abajo:

.sidebar h2 { font-family: 'Arial' !important;  font-size:12px !important; color: #666;  text-transform: uppercase; letter-spacing: 3px; text-align: center; border-top:2px solid #8fb59e; border-bottom:2px solid #8fb59e; padding: 10px; }

Personalizar títulos de sidebar con efecto Washi-Tape:

Para este caso vamos a usar una imagen que parezca Washi-tape y para ello estaría genial que os pudiera hacer unos diseños, pero todavía no he podido y mi prioridad es llevar adelante este curso, así que no pasa nada, porque también existen mucho sitios donde lo podéis conseguir.

Aquí podéis descargaros unos Washi-tape digitales que ha diseñado Miss Lavanda. (hace mucho tiempo que está desaparecida y su blog está eliminado, es una pena por que compartía muchísimos recursos y tutoriales, fue una de las personas de las que aprendí a hacer todo esto)

Es una pasada por que puedes descargar 200 modelos de washi-tape con distintos colores y formas para decorar tu blog. Echa un ojo y luego si te gustan, descárgalos. Miss Lavanda nos dejó mucho material. ¡Gracias maja!

Washi-tape digital con formas geométricas para usar en tu blog

Washi-tape digital bonito con formas geométricas para descargar gratis y usar en tu blog como fondo de títulos
Washi-tape digital bonito con formas geométricas para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital con corazones para tu blog

Washi-tape digital bonito con corazones para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital con cuadrados para descargar

Washi-tape digital bonito con cuadros para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital estampados para descargar

Washi-tape digital estampado bonito para descargar gratis y usar en tu blog como fondo de títulos
Washi-tape digital estampado bonito para descargar gratis y usar en tu blog como fondo de títulos
Washi-tape digital estampado bonito para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital de colores lisos para usar en tu blog

Washi-tape digital de colores lisos para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital para tu blog con rayas

Washi-tape digital con rayas para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital con texturas para descargar

Washi-tape digital con texturas para descargar gratis y usar en tu blog como fondo de títulos

Washi-tape digital con topos para descargar en tu blog

Washi-tape digital con topos para descargar gratis y usar en tu blog como fondo de títulos
Washi-tape digital con topos para descargar gratis y usar en tu blog como fondo de títulos

Creo que está super completo para que puedas elegir el que más te guste. Cuando tenga tiempo prepararé una recopilación de Washi-Tape digital, pero mientras estos están genial, ¿No crees?

 Voy a usar este modelo, que como sabéis hay que optimizar la imagen para que no tengamos que redimensionar las medidas, así que he modificado el tamaño para que me coincida con el de los títulos de la sidebar.  

Pues allá vamos con el código:    

.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #fff !important;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
background-image: url(https://monicalemos.es/wp-content/uploads/2016/06/10washitape-grande-miss-lavanda.png);
padding: 10px;
}

Título de gadget sidebar con Fondo de color cuadrado:

.sidebar h2 { 
font-family: 'Arial' !important; 
font-size:12px !important; 
color: #fff !important; 
text-transform: uppercase; 
letter-spacing: 3px; 
text-align: center; 
background: #8fb59e; 
padding: 10px; 
}

Título de gadget sidebar con Fondo de color  redondeado:

.sidebar h2 { 
font-family: 'Arial' !important;  
font-size:12px !important; 
color: #fff !important;  
text-transform: uppercase; 
letter-spacing: 3px; 
text-align: center; 
background: #8fb59e;
border-radius: 50px; 
padding: 10px; 
}

Título de gadget sidebar Solo texto:

.sidebar h2 {
font-size:20px !important; 
color: #8fb59e !important;
text-transform: uppercase; 
letter-spacing: 5px; 
text-align: center; 
padding: 10px; 
}

En este caso la tipografía es la que hemos elegido en nuestro editor de plantilla de blogger.

En este otro post te explico muchas más opciones de personalización pero si no quieres meterme mucho en código puedes usar estos que te he facilitado. Lo único que debes cambiar en aquel código que elijas es el color.

Para eso sabes que tienes que tener tu paleta de colores, de dónde podrás escoger el color que más te guste para esta tarea de hoy.

Si quieres elegir un color aleatorio puedes obtener el código a través de este recurso.

Vídeo tutorial de apoyo

Para pegar cualquiera de los códigos que te he compartido te he dejado los pasos explicados en el vídeo y espero que te resulte fácil. Cualquier duda ya sabes, un comentario aquí abajo y será respondido en cuanto pueda.



   R E C U E R D A   : tus likes en mis vídeos ayudan mucho a mi canal, si quieres que siga apoyando mis tutoriales del bog con vídeos, compártelos y dale un like     ¡¡Muchas gracias!! 

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

37 comentarios

    • Mónica Lemos

      Hola Dai! En las primeras clases creo que ya comento que elegimos siempre la sencillo para trabajar de manera más limpia en nuestro blog y poder realizar todos los cambios posibles.
      Espero haber resuelto tu duda! Gracias por comentar 🙂

  1. Mari Villen

    Buenas Monica, tengo un problemilla, cuando quiero poner los titulos de sidebar con uno de los washitapes descargados, me sale un lateral del titulo con washitape bien y el otro recto sin las curvitas que tiene el washi.. es raro no se porque le pasa. Alguna solución?

    • Mónica Lemos

      Hola Mari Villen, ¿Tienes la imagen del washi-tape optimizada con el ancho de tu sidebar? Probablemente lo que ocurra sea que es más grande que el ancho de tu sidebar. Existe un post de optimización de imágenes muy sencillo que he publicado hace poco. Échale un ojo y si no se soluciona me vuelves a contactar 😉

  2. Cele NG

    Muchas Gracias por el tutorial! Me ha servido mucho! Pero, me gustaría saber si puedo poner un pequeño icono a la derecha, si sabes, ¿me podrías decir como?
    Bueno, muchas gracias!

    • Mónica Lemos

      Hola Nilba,
      encontrar el contenido deseado en el blog es sencillo, escribe "sobre mi" en el buscador del menú y te saldrán las entradas que hablen sobre ello, el post es "Gadgets imprescindibles" o algo así

      Muchas gracias por tu comentario
      Ánimo
      Un saludo

  3. El soñador de ideas

    Buenos días Mónica! Mira te escribo por un problemilla que tengo. Al pegar el código, solo se me cambia el título de uno de los gadgets, y los demás se quedan como están. ¿Sabes por que puede ser eso? He intentado cambiarlo de mil maneras, cambiando la disposicion del código, cogiendo otros códigos… pero en todos pasa lo mismo! Ah! Y también me pasa que junto con el gadget que cambia también me cambia el título de un gadget que es inherente a él, no es el que yo le he puesto (me entiendes?), y eso no puede cambiar!! Por si quieres, te mando la dirección de mi blog por si te sirve para entender mejor mis explicaciones. gracias!! http://www.elartistadelastras.blogspot.com

    • monicalemos

      Holaaa! puede que sea porque estás usando una clase que corresponde solamente a ese gadget en tu css.
      Lo mejor en estos casos en los que no controlamos código es invertir en alguien nos cree una web profesional
      ¡HAY QUE APOSTAR POR NUESTRO HOBBIE! todos los hobbies requieren inveersión. Y si además lo puedes convertir en tu trabajo ya ni te cuento
      ¡Animo!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *