Tutorial:Personalizar lista numerada ♥


Hola,hoy vengo con otro tutorial :3 ,espero que les guste, es una lista numerada ,aqui les dejo como queda




  1. Blogger 
  2. CSS
  3. HTML
  4. OTROS


Para Plantilla Basica o Blogger: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
.post ol li {  position: relative;
display: block;
margin-left: 10px;
margin-right: 30px;
padding: .4em .4em .4em .3em;
background: #A9E2C7;/*Color de Fondo de la lista*/
color: #FF9494;/*Color de la letra*/
text-decoration: none;
transition: all .3s ease-out;
border-radius: 5px; }
.post ol li:hover{  background: #FFB5BE;/*Color de Fondo de la lista al pasar el cursor*/ }
.post ol :before{  content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #FFB5BE;/*Color de Fondo de la numeracion*/
height: 2em;
width: 2em;
color: #A9E2C7;/*Color de la letra* de la numeracion*/
line-height: 2em;
border-radius: 5px;
text-align: center;
font-weight: bold; }
.post ol :after{  position: absolute;  content: '';
 border: .5em solid transparent;  left: -1em;  top: 50%;
  margin-top: -.5em;  transition: all .3s ease-out; }
.post ol :hover:after{  left: -.5em;  border-left-color: #FFB5BE;/*Color de fondo de la flechita*/ }
.post ol{  counter-reset: li;
  list-style: none;  *list-style: decimal;  font: 15px 'trebuchet MS', 'lucida sans';  padding: 0;  padding-left: 50px;
padding-right: 5px;
  margin-bottom: 4em;  text-shadow: 0 1px 0 rgba(255,255,255,.5); } .post ol ol{  margin: 0 0 0 2em; }

Para Plantilla Basica o Blogger:Para colocarlo en gadgets te vas a añadir un nuevo gadget/htmlJavascript
Para Plantilla Clasica o Blogskin:Colocas donde lo desees
<ol>
<li>Blogger</li>
<li>CSS</li>
<li>HTML</li>
<li>OTROS</li>
</ol>
Para poner mas solo aumenta antes de de </ol>
<li>OTRO</li>
Si lo quieres poner en una entrada, solo seleccionas tu lista y le ases clic al icono lista numerada :3

y listo .
Creditos:tutoriales blogger


12 comentarios :

  1. Que lindo me encantó , buen tuto , bye :3

    ResponderEliminar
  2. Que lindo tuto, gracias por compartirlo :D

    ResponderEliminar
  3. Wow que bonita!, al principio no entendia para que podia utilizarlo, pero despues *-*

    ResponderEliminar
  4. esta re lindo gracias por el tuto ヾ(≧∪≦*)ノ〃
    saludos

    ResponderEliminar
  5. Waa precioso el tutorial! Me encanta, se agradece. La usaré en la próxima plantilla si o si :3
    Besos♥

    ResponderEliminar
  6. super*3*
    gracias por el tutorial!
    saludos!!~

    ResponderEliminar
  7. wooo q monada mas cute ^^ jeje lo quieroo lo quierooo ~ ( ahora tengo que pnsar donde lo pongo xD ) jajaja muy bueno ^^

    ResponderEliminar
  8. Me encantó el tuto :))) Muy util y es una monada :3

    ResponderEliminar
  9. sin duda esta lista es muy linda que no importa si no encuentro su uso, quiero intentar probarla a ver si me sale :3
    muchas gracias por la enseñanza! <3

    ResponderEliminar
  10. ¿Se puede aplicar un estilo sólo en una entrada sin que afecte a las demás? Mi idea es aplicar de forma puntual diferentes estilos de este tipo de listas, y aunque dispongo ya de los códigos CSS que me interesan no sé cómo trasladar cada uno sól a una entrada concreta. Gracias.

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥