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 suscríbete a la Comunidad Demo 2.0 y podrás acceder a este y otros tutoriales privados, que guardo en exclusiva para mis suscriptores. Anímate, porque ser miembro de la comunidad tiene muchas ventajas, ¿aún no las conoces?








¿Quieres entender el CSS para personalizar tu plantilla Blogger? no te pierdas este tutorial Tuitéalo





Y con esto me despido, que aún tengo mucho que preparar, porque se avecina un gran lanzamiento que estoy deseando contarte con detalle. De momento, te dejo con la Agenda anual Demo 2.0 2016/2017, que ya está disponible y de la que sólo quedan 4 unidades.


Este año, planifica tu futuro, viviendo al máximo el presente: AGENDA 2016/2017 DEMO 2.0.

agenda-anual-2016-2017


4 comentarios:

demo