Sidebar

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; }

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRPpivLsnDww0hUihfaBpQDmEWnBuYhgJNQ9APEIT46HVLpl9l15rFNV-0HXseQ6Pcpveb9UJzvtVZDPR8CABITxwInT8g9Jwl6D9Km5JecxYb63CJDXYe9ycMbZetgkzjIfG1PxAjbUr/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.

https://www.bloggerpasoapaso.com/2016/06/personaliza-titulos-gadget-sidebar-juntos.html