6 jun. 2016

Tutorial Blogger - Personaliza titulos de sidebar + DESCARGA WASHI-TAPE digital

  • 8:00
  • por
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.




Si quieres tener un blog renovado, bonito, elegante y profesional en 2 días, echa un ojo al servicio estrella que llevo a cabo con el que todos mis clientes están 100% satisfechos.





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

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





Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 29 veces:

  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
    Respuestas
    1. Hola, es bastante difícil eso... sin más datos no puedo ayudarte
      Un saludo

      Eliminar
  11. Buen dia, saludes estos codigos en que parte del blog se pegan... gracias

    ResponderEliminar
  12. Gracias, ya entendi, debajo de h2 {
    font-size: 22px;
    }

    Gracisa

    ResponderEliminar
    Respuestas
    1. genial que llegaras a solucionarlo por tu cuenta Julio Vega,

      gracias por comentar, un saludo!

      Eliminar
  13. 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!

    ResponderEliminar
    Respuestas
    1. Sí, podrías probar con este código debajo del que comparto en la entrada.

      .sidebar h2:after{content:'CÓDIGO DEL ICONO'; color:#000;}

      el código lo puedes sacar de aquí http://fontawesome.io/cheatsheet/ siempre que tengas instalada la fuente Font Awesome.

      esos códigos vienen tal que así

      []

      Pero solo debes poner una barra acostada hacia la izquierda como esta \ y 4 dígitos desde la F del código. En ese caso que te comparto antes sería así:


      .sidebar h2:after{content:'\f042'; color:#000;}



      Espero que te sirva, muchas gracias por el comentario!! :)

      Eliminar
    2. Como puse el código como sale me lo ha transformado. Sale algo así: (sin espacios)
      [ &# x f042; ]

      Eliminar
  14. Hola Mónica, tengo una duda y estoy buscando en tus videos como solucionarla pero no la encuentro, en el siderbar tienes un gadget que se llama sobre ti ¿como lo creaste?. Gracias.

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

      Eliminar