Muchas veces al instalar una plantilla Blogger no quedamos muy contentos con el diseño en general, y buscamos distintas formas de cambiar algunas partes de nuestro blog para que este mas harmonioso y con diseño mas atractivo para nuestros lectores.En este articulo les voy a dejar tres exelentes diseños de lista de Etiquetas para Sidebar de blogger, que mantienen el mismo estilo pero con distintas opciones de color y muy esteticos.
La instalacion de estas listas de Etiquetas es muy sensilla siguiendo estos pasos:
Para cualquiera de estas tres variedades deben incorporar el codigo CSS en la plantilla Blogger de la siguiente manera.
1. Ir el la plantilla de Blogger en modo de edicion HTML.
2. Con CTRL+F buscar ]]></b:skin>.
3. Copiar el estilo CSS elejido de los tres mas abajo.
4. Pegar el estilo elejido arriba de ]]></b:skin> y guardar la plantilla.
5. Por ultimo van a Diseño, buscan donde esta su Sidebar, Añadir gadget, elijen gadget Etiquetas lo configuran y Guardar. Eso es todo.
Custom Blogger Labels style 1:
{{ css }}
/* STYLE 1 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.Label ul {
text-align: center; /* center aligns text in sidebar */
}
.Label ul li {
margin: 7px 0; /* Adds space above and below each link. Change the 7 to adjust your spacing */
}
.Label ul li a {
color: #272727; /* Link Color */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
.Label ul li a:hover {
color: #C39F76; /* Link hover color */
}
Custom Blogger Labels style 2:
{{ css }}
/* STYLE 2 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.Label ul li a {
display: block;
width: 100%;
text-align: center; /* center aligns text in sidebar */
margin: 7px 0; /* White space between links */
padding: 12px 0; /* Padding for colored background */
color: #272727; /* Link Color */
background-color: #f3f3f3; /* Background Color */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
.Label ul li a:hover {
color: #ffffff; /* Link hover color */
background-color: #C39F76; /* Background Color */
}
Custom Blogger Labels style 3:
{{ css }}
/* STYLE 3 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.Label ul li a {
box-sizing: border-box;
display: block;
width: 100%;
text-align: center; /* center aligns text in sidebar */
margin: 7px 0; /* White space between links */
padding: 12px 10px; /* Padding for colored background */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
/* LABEL COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
color: #272727; /* Link Color */
background-color: #b0a8a6; /* Background Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
color: #272727; /* Link Color */
background-color: #c3c5c4; /* Background Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
color: #272727; /* Link Color */
background-color: #e5d7ca; /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #272727; /* Link Color */
background-color: #e0e1e6; /* Background Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
color: #272727; /* Link Color */
background-color: #f0ede4; /* Background Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
color: #272727; /* Link Color */
background-color: #f5f6f1; /* Background Color */
}
/* HOVER COLORS */
/* First Label Hover Colors */
.Label ul li:nth-child(6n+1) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Second Label Hover Colors */
.Label ul li:nth-child(6n+2) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Third Label Hover Colors */
.Label ul li:nth-child(6n+3) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Fifth Label Hover Colors */
.Label ul li:nth-child(6n+5) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Sixth Label Hover Colors */
.Label ul li:nth-child(6n+6) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}