Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Esquinas redondeadas 【Sidebar】

Hoy ando inspirada! ᕙ(⇀‸↼‶)ᕗ Publicaré todos los tutoriales que encuentre!! WUW!

Ya les enseñe como Colocar 3 columnas bajo la cabeceraAsí que aprovechando eso, aquí dejo una forma muy pero MUY FACIL de convertir las esquinas de los Sidebar a redonditas! ¿Listos para el paso a paso? GO!!!!!!

Clic en las img. para agrandar
PRIMERO: Escogemos el sidebar que deseamos modificar las esquinas. En mi caso, escogí 'Crosscol'.

Y así es como se vé mi Sibebar, cuadradito.

Así que trabajaremos en base a ese. Vamos a 'Diseño → Plantilla → Edición de HTML'

Buscamos (Control+F): #crosscol-columna-contenedor{
Aparecerá lo siguiente:
#crosscol-columna-contenedor{
background: #000;
margin: 0 -20px 0 -20px;
clear:both;
}

SEGUNDO: Existen MUCHAS formas para modificar las esquinas, y hoy les enseñaré 2 de ellas...

A) Todas las esquinas curvas: Pega el sgte. código después de 'margin'

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

Deberá de quedar así:
#crosscol-columna-contenedor{
background: #000;
margin: 0 -20px 0 -20px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
clear:both;
}

Clic en 'Vista previa' y se verá esto:
Ahora todas las equinas son curvas

B) Esquinas superiores curvas: Pegamos el sgte. código después de 'margin'

-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;

Quedando así:
#crosscol-columna-contenedor{
background: #000;
margin: 0 -20px 0 -20px;
-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
clear:both;
}

Clic en vista previa:
Y este es el que he escogido yo (✪㉨✪)

TERCERO: Una vez escogido la foma A o B le damos clic en 'Guardar plantilla' y LISTO!

Nota:

- Para modificar cuán grande va a ser la curva solo cambiamos el 24px por cualquier otro número.

- Mientras menor sea el número, menor será la curva. Es decir que si es 0 la curva será nula.

- Puede modificarse cualquier Sidebar, sólo elige el tuyo y sigue los mismos pasos.

Es todo y espero que les haya sido útil, bye byeeeeeeeee!!! \(・`(ェ)・)/

2 comentarios:

  1. no me sale porque no me aparece esto #crosscol-columna-contenedor{ que puedo hacer?

    ResponderEliminar
    Respuestas
    1. linda si no sale es porque no tienes ese widget agregado en la plantilla.... #crosscol-columna-contenedor{ es del anterior tutorial que menciono arriba "Colocar 3 columnas bajo la cabecera" funciona con ese, si quieres puedes agregar ese widget.

      O dime donde lo quieres aplicar en que parte de tu blog y te ayudo :D

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.