SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger - Personaliza titulos de sidebar - C9-P1

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

Comenzamos

Título de gadget 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" "\00A0" ;
}
 
.sidebar h2:after {
font-size: 20px;
    content: "\00A0" "\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" "\00A0" ;

}
 
.sidebar h2:after {
font-size: 15px;
    content: "\00A0" "\2261" ;
}


Título de gadget 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" "\00A0" ;  }    .sidebar h2:after { font-size: 15px;    content: "\00A0" "\2550" ;   }



Título de gadget 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; }  



Título de gadget 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 como un año que está desaparecida y su blog está desactualizado) Haz click en la imagen para descargar.


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?

ACTUALIZACIÓN ;  Misslavanda ha desaparecido del "mapa" así que no hay recurso. Puedes hacer click derecho sobre la que yo he escogido y guardar la imagen. O también puedes buscar en Google porque te aseguro que hay un montón de recursos gratis.




 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://1.bp.blogspot.com/-UdCgaNoaaOU/V06iz1msjfI/AAAAAAAAG5k/5LD9MnGTMVEUGdyEsBe8ii1IBF3cMUkggCLcB/s1600/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 donde 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

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!! 




   

19 comentarios

  1. Muchísimas gracias Monica!!!

    Era una cosa que me hacia falta, ya que tenia la barra lateral muy amontonada sin diferenciarse las secciones.

    ResponderEliminar
    Respuestas
    1. Genial!! de eso se trata de mejorar la visual y el entorno de nuestro blog!! Me alegro de que te haya servido de ayuda!!
      Gracias por comentar! ;)

      Eliminar
  2. Muchas gracias!! Que post más útil :D

    ResponderEliminar
    Respuestas
    1. De nada Dácil!! :) me alegra mucho que te resulte útil, para eso estamos! ;)
      Besitos

      Eliminar
  3. Holi te quiero preguntar algo, que plantilla es mejor y si influye en tratar de editar el blog como el tuyo o cual plantilla usar?

    ResponderEliminar
    Respuestas
    1. 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 :)

      Eliminar
  4. 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?

    ResponderEliminar
    Respuestas
    1. 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 ;)

      Eliminar
  5. Vaya, esto si no lo sabia jajaja. Me ha servido muchísimo Gracias, gracias, gracias!!

    ResponderEliminar
  6. Respuestas
    1. Gracias por avisar, Misslavanda ha desaparecido.

      Haz click derecho sobre el washi que he escogido y guarda imagen, usa ese y cambia su color.

      Un besin! 🌟

      Eliminar
  7. Estupend tuto Monica me gusto + el codigo del titulo de gadget sidebar con efecto washi-tape lastima ke la pagina wed ya no esta.pero ise mi propia vs washi-tape .checalo http://novafullprograms.blogspot.com/ .Saludos ;)

    ResponderEliminar
    Respuestas
    1. Ey!te ha quedado muy original :) me alegra que te resultará de ayuda.
      Un saludo!

      Eliminar
  8. Hola! Muchísimas gracias por este genial tutorial :) Fácil y muy útil.

    Te paso mi blog para que veas cómo ha quedado :)

    Saludos

    ResponderEliminar
  9. Increible tu blog, me encanta, muchas gracias por todos los recursos... besosss

    ResponderEliminar
    Respuestas
    1. Gracias! Me encanta que te sirva de ayuda!
      Muack

      Eliminar
  10. Hola, no me aparece el código h2 :(

    ResponderEliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.