Adblock Detectado

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

He desactivado Adblock


Wow!! a pasado mucho tiempo desde mi ultima entrada, lamentablemente mi trabajo y mis estudios me atoran un poco a la hora de escribir aquí. Aunque siempre busco un tiempo para poder desarrollar mi blog.



Bueno, comencemos hablando de esta entrada. En este tutorial veremos como agregarle cada entrada una caja separadora. Muchas plantillas que eh visto de bloggers noto que no tienen un caja separadora de entrada.
Este poseso de separación de entradas se logro tan solo con un poco de CSS. Logrando que cada entrada este separada con un bonito relover, esto consiste una ves que pasa el mouse por una entrada esta cambiara de color.

Comencemos: 


  • Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>
  • Paso 2: Buscamos  la siguiente linea (Ctrol +F)
►<b:skin></b:skin>
  • Paso 3: Dentro de ►<b:skin></b:skin> buscamos la siguiente linea (Ctrol + F)
 ]]></b:skin>
  • Paso 4: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS. 
.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}

  • Paso 5: Guardamos los cambios realizados 

Nota:-  Solo cambias rojo los colores por los que desees Colores Hexadecimal 
Rojo es el ancho del borde separador 
- - 3 Comentarios
Tag

Comentarios (3)

  1. Como le puedo hacer para poner ese efecto en los widget se podrá ?

    ResponderEliminar
  2. @Vico Maters Claro solo tienes que agregar este código justo encima de

    ]]></b:skin>

    Código:

    .sidebar {
    background:#FFFFFF;
    border: 2px solid #000000;
    padding-right:7px;
    padding-left:7px;
    }
    .sidebar:hover {
    border: 2px solid #FF0000;
    }
    .sidebar:active {
    border: 2px solid #0004FF;
    }

    ResponderEliminar
:))
:((
: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