16 de mayo de 2016

Tutoriales: Personalizar las viñetas del blog


Son muchos los Blogs que utilizan las listas de viñetas  y una lista de viñetas puede formarse manualmente (html) de este modo:
<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>
O si lo prefieres puedes usar el botón en el del editor de entradas
Para algunos puede ser aburrida ese aspecto, así que ahora les traigo un tutorial en donde aprenderán a mejorarlo y le darán un aspecto muy divertido.

Para cambiar la forma pero seguir en lo tradicional ve a:
  •  Diseño → Personalizar → Avanzado → Anadir CSS. 
Una vez ahí pega el siguiente código:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}
.post ul li {
margin: 0;
padding: 0 0 0 10px;
}
  1.  Donde dice none cámbialo por circle o square, o el estilo que más te guste.

Si prefieres una imagen o gifs

Diseño > Personalizar >> Avanzado >> Anadir CSS. Una vez ahí pega el siguiente código:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}
.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}
  1. Cambia lo que está en negrita por el URL de tu ícono.
Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia
.post ul {
.post ul li {
por 
.sidebar ul {
.sidebar ul li {
¿Ven!? es muy fácil y muy útil... Sobre todo si tu blog refleja el estilo Kawaii

Gifs

Aquí les dejo unos hermosos gifs muy Kawaii que encontré en el blog chicas kawaii ahí siempre busco iconos... Son varios pero estos son mis favoritos...


                                             

No hay comentarios:

Publicar un comentario