SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.

CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Codigo CSS para personalizar titulos de gadget en tu sidebar


Personaliza los titulos de los gadgets y widgets en blogger paso a paso y bonito


Hoy traigo un tutorial a través del que aprenderás muchísimo si estás en tus inicios, pero no solo por lo que realmente se explica en el tutorial si no que usarás los códigos que proporciona para aplicarlo en otras posibles ocasiones y poder personalizar texto en el blog. Como por ejemplo en el menú de páginas.


Haz click en el siguiente enlace si quieres crear un menú de páginas responsive y con iconos de redes sociales


Si estás empezando o llevas poco tiempo en esto te recomiendo que no te pierdas este post porque los códigos que aquí te explico los podrás usar en muchas ocasiones en las que quieras personalizar partes de tu blog.


Voy a resumir el código total explicando para qué sirve cada código. Esto resulta muy útil si todavía no estás acostumbrada/o a manejar código, ya que a veces se nos olvida lo que significa cada palabra, y es importante conocer cada una para jugar con una buena personalización hasta lograr lo que buscamos.


Para llevarlo a cabo te recomiendo que visites este otro tutorial:

TUTORIAL BLOGGER - PERSONALIZA TITULOS DE SIDEBAR 


EL CÓDIGO para personalizar títulos de gadgets

Trabajaremos siempre sobre este código editando detalles
.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive; /*Tipografía de texto*/font-size:(nº)px; /*Tamaño de texto*/color: #color; /*Color de texto*/text-transform: uppercase; /*Texto en mayúscula*/      text-transform: lowercase; /*Si quieres minúsculas*/letter-spacing: (nº)px; /*Espacio entre letras*/text-align: center; /*Alineación centrada del texto cambia según prefieras a right-derecha left-izquierda*/background-color: #color; /*Color de fondo*/border-radius: 50px; /*para bordear todas las esquinas*/      border-radius: 50px 0px 0px 0px; /*Si prefieres redondear la esquina arriba a la izquierda*/      border-radius: 50px 50px 0px 0px; /*Para redondear las dos esquinas superiores*/      border-radius: 50px 0px 50px 0px; /*Para redondear la esquina arriba izquierda y abajo derecha*/      border-radius: 50px 0px 0px 50px; /*Para redondear las dos esquinas de la izquierda.*/border: (nº)px solid #color; /*Para poner un marco de línea sólida alrededor.*/


  • Sustituye “solid “ para a conseguir el efecto deseado;


solid → solida
dotted → punteada con cuadraditos
dashed → punteada con rayas
double → doble línea sólida




  • O con efecto de botón, con sombras:


groove → marco con sombra oscura
ridge → marco con sombra clara
inset → sombra a la derecha abajo
outset → sombra arriba a la izquierda


Si lo que quieres es poner el borde solo en ciertas partes presta atención.


Tal y como lo tenemos a continuación solo tendríamos




Cómo poner al título del gadget una línea arriba y otra abajo




border-top: 3px double #333;border-bottom: 3px double #333;border-right: 0px double #333;border-left: 0px double #333;

Sustituye el número 3 por el grosor de la línea que quieras. Tiene que ser superior a 0.

Aquí tienes lo que significa cada palabra del código:

top → arriba
bottom → abajo
right → derecha
left → izquierda


Si te fijas le hemos dado valores mayores que cero a top y bottom para que las líneas que aparezcan sean esas.

El código del color corresponde al #333 que deberías sustituir por el código de color de tu paleta de colores que prefieras


Cómo poner al título del gadget una línea a ambos lados



border-top: 0px double #333;border-bottom: 0px double #333;border-right: 3px double #333;border-left: 3px double #333;


En este caso le damos valores mayores a cero a right y left para que las líneas aparezcan a ambos lados del texto. 

Recuerda sustituir el código del color que te interese.


Cómo poner al título del gadget una línea abajo normal y a la derecha doble



border-top: 0px double #333;
border-bottom: 3px solid #333;
border-right: 3px double #333;
border-left: 0px double #333;
padding: 5px; /*espacio entre los bordes para que se alejen del texto*/


→ Si queremos que quede más pegado abajo y más alejado de arriba o viceversa, persolanizamos por separado cada espacio:

padding-rigth: 5px;padding-left: 5px;padding-top: 5px;padding-bottom: 10px;


Si de fondo prefieres poner una imagen que has diseñado para el fondo de tu menú entonces anota;

Cómo poner al título del gadget una imagen de fondo


Este es el código para sustituir por el background-color: #FFFFFF; si queremos insertar de fondo una imagen:

background: url(URL de la imagen) bottom no-repeat; 


Por último os pego un código que usé hace un tiempo , el cual su resultado es este :


Si te gusta puedes usarlo, quizás le cambiaría el tamaño del texto porque queda muy grande, pero en fín, ahora ya puedes modificar lo que quieras! :)


.sidebar h2 {font-family: 'Amatic SC', cursive; /*Tipo de letra*/
font-size:20px;/*Tamaño de texto*/
color: #ffffff; /* Colore del texto*/
text-transform: uppercase;/*Para que el texto se transforme a mayúsculas*/
letter-spacing: 3px;/*Espacio entre carácteres*/
text-align: center;/*Situación del texto en el recuadro, he puesto centrado*/
background-color: #ffd0c4;/*Color de fondo*/
padding-top: 5px;/*Separación arriba*/
padding-bottom: 5px;/*Separación abajo*/
border-radius: 50px 0px 0px 50px;/*Efecto redondeado a la izquierda, en las esquinas de arriba y de abajo*/
}


Recuerda que debes instalar el tipo de letra que quieres usar, tienes un tutorial aquí para instalar fuentes de Google.




ATENCIÓN


-Son importantes los ; (puntos y comas) del final de cada personalización y detalle, porque es como el punto que lo cierra, si no te dará error.

-Son importantes los } de abrir y cerrar, por el mismo motivo que el anterior.

-No son importantes los “no números”, de hecho si no pones nada aquí,

border-radius: 50px 0px 0px 0px;

no va a pasar nada, simplemente no aparecerá. De hecho yo tengo casi todos los códigos en cero, por si quiero cambiarlo he decidido dejarlo ya copiado. Pero queda mucho más limpio si lo eliminamos.

También debes saber que al escribir las cuatro partes aunque tengan valor cero cada parte habla de una zona. La primera  y la última son arriba y abajo y las dos del medio son de izquierda y derecha.


- Eso mismo que comentaba, si no queremos ningún borde, o marco, basta con eliminar ese detalle, esa línea.

- Para conseguir códigos de colores HTML ve a este enlace donde puedes sacar códigos, pero te recomiendo que tengas los códigos anotados de tu paleta de colores para el blog. Así cuando necesites usarlos para este tipo de cosas sólo tendrás que escribirlo ;)

Recuerda que tienes un Curso Gratis paso a paso para crear por tí misma/o el diseño de tu blog.

- Si vas a usar una imagen de fondo en vez de un color deberás tener cuidado con las medidas. Además podemos saber el ancho de nuestro sidebar de la siguiente manera:

Abrimos la ventana de Ver Blog → en nuestro blog colocamos el ratón sobre alguno de nuestros títulos de la sidebar y damos click con el botón derecho → buscamos inspeccionar elemento y le hacemos click.

Entonces aparecerá seleccionada la zona y un cuadradito con la medida. Además en el cuadro que se abre abajo a la izquierda encontrarás la selección concreta del título y así, al pasar el ratón por encima directamente te saldrá la medida :) 

Esta también es muy buena manera para copiar los códigos de colores que existen en el blog. Estos están en el recuadro derecho que sale abajo. Es algo que uso muchísimo. Espero que este truquillo te ayude también a ti ;)


- Recordar que donde pone #333 hay que escribir el código del color elegido, donde pongo 3  es siempre el valor que debes sustituir. En el caso de (URL de imagen) la imagen va entre esos mismos paréntesis, esos sí que permanecen.


Por último adelantaros que si no queréis tener en todos los títulos iguales de la sidebar también es posible a través de otro código que te explico aquí.

Una frase para reflexionar hoy :)

Casi todo lo que realice será insignificante, pero es muy importante que lo haga.

Mahatma Gandhi



2 comentarios

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.