16 junio 2016

Cómo personalizar el sidebar de Blogger con CSS

como-personalizar-el-sidebar-de-blogger-con-css


Buen jueves! ya andamos otra vez por aquí con nueva entrada para personalizar al máximo tu blog en Blogger con CSS. En el último tutorial publicado, te mostré cómo personalizar el footer del post y hoy le toca el turno al sidebar. Vas a ver qué fácil es darle estilo con un poquito de código ¿preparada? allá que vamos!






Un buen sidebar, gana muchos puntos a la hora de atraer la atención hacia tus contenidos. En esta ocasión, voy a hablarte de cómo atraer con el diseño, pero no te olvides de cuidar también los gadgets que alojas en él para potenciar tus objetivos.



CÓMO PERSONALIZAR LOS TÍTULOS DEL SIDEBAR EN BLOGGER



Voy a empezar con los títulos del sidebar, porque tienen muchas posibilidades. Aquí te dejo una imagen de lo que puedes conseguir, para que mires lo que más se ajusta a tu estilo y justo debajo tienes el vídeo y los códigos que necesitas para llevarlo a cabo:


como-personalizar-los-titulos-del-sidebar-en-blogger


¿Cuál te ha gustado más? elíge el código y dale al play para ver el vídeo en el que te explico el paso a paso:






Aquí te dejo un post con 6 conceptos básicos que debes saber de Blogger, en el que te cuento cómo localizar la dirección de una imagen, entre otras cosas. Y estos son los tipos de líneas más comunes en CSS. Te los nombro, por orden de aparición en la imagen: solid, dashed, dotted, double, ridge y groove:





TÍTULO CON FONDO DE IMAGEN





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: url("DIRECCIÓN DE TU IMAGEN") repeat-x;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




TÍTULO CON FONDO LISO





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #F3C2D8;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




TITULO CON FONDO Y LÍNEA





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #F3C2D8;
border-top: 2px solid #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




TITULO ENMARCADO





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: 5px ridge #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




TITULO ENMARCADO CON REDONDEO





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: 5px double #C38AA3;
border-radius: 25px;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




TITULO CON LÍNEAS INDEPENDIENTES





div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 5px ridge #C38AA3;
border-bottom: 3px dotted #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}




ENMARCAR LOS GADGETS DEL SIDEBAR Y FIJAR EL TÍTULO EN MEDIO DEL MARCO SUPERIOR.




Otra opción es enmarcar el sidebar y fijar el título a mitad del marco superior, que queda también muy bonito, si le sacamos partido con las opciones que te he enseñado anteriormente. Para que te hagas una idea, te dejo esta imagen y también puedes ver otro efecto distinto en este blog de pruebas:




¿Te gustaría adaptarlo a tu blog? pues al lío! bajo el vídeo, tienes el código que necesitas para lograr esta estética en tu sidebar. Dale al play, que te lo cuento con detalle:



.column-right-outer .widget{

border: 2px solid #BBCBE3;

border-radius:0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;

padding:20px;

margin: 50px 0;

}



Si tienes el sidebar a la izquierda, tendrás que sustituir .column-right-outer por .column-left-outer. Un poco más abajo, encuentras el apartado Headings en el que tendrás que reemplazar el código actual, por este otro (mira el vídeo para no equivocarte):


div.widget > h2,

div.widget h2.title {

 margin: -35px 0 1em 0;

 text-align: center;

text-transform: uppercase;

letter-spacing: 1px;

background: #ffffff;

padding: 3px;

}



Listo! El color, la tipografía y el tamaño, mejor lo cambiamos en el diseñador de plantillas. Y con esto me despido, que aún tengo mucho que preparar, porque se avecinan lanzamientos que estoy deseando contarte con detalle. Que tengas un gran día!




¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:





4 comentarios:

demo