Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En un tutorial anterior vimos como editar nuestras "Lista con viñetas" con un poco de css. Y pensamos por que no hacerlo con nuestra lista numerada. Como las viñetas, la lista numera son bastante apagadas y hoy veremos como agregarle un
poco de css para hacerlas un poco atractivas.
Antes de comenzar veremos una demostracion en vivo: 

  1. Blogger
  2. CSS
  3. HTML

Comencemos: 

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS.
.post ol li {  position: relative;  display: block;  padding: .4em .4em .4em .8em;  *padding: .4em; > margin: .5em 0 .5em 2.5em;  background: #ddd;  color: #444;  text-decoration: none;  transition: all .3s ease-out; } .post ol li:hover{  background: #eee; } .post ol :before{  content: counter(li);  counter-increment: li;  position: absolute;  left: -2.5em;  top: 50%;  margin-top: -1em;  background: #fa8072;  height: 2em;  width: 2em;  line-height: 2em;  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: #fa8072; } .post ol{  counter-reset: li;  list-style: none;  *list-style: decimal;  font: 15px 'trebuchet MS', 'lucida sans';  padding: 0;  padding-left:100px;  padding-right:190px;  margin-bottom: 4em;  text-shadow: 0 1px 0 rgba(255,255,255,.5); } .post ol ol{  margin: 0 0 0 2em; }

  • Paso 4: Guardamos los cambios realizados.

Como agregarlo en nuestra entrada.  

  • Paso 1: Vamos a nuestra entrada y damos clic en lista numera 



- - 2 Comentarios
Tag

Comentarios (2)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar