domingo, 10 de febrero de 2019

Ya he creado un menú de páginas para organizar el contenido del blog mediante una barra de menú horizontal situada bajo la cabecera y con tres pestañas por el momento (Inicio - Blogger - Photoshop).
Ahora quiero personalizar este menú.


CAMBIO DE LA DISPOSICIÓN Y LETRA DEL MENÚ HORIZONTAL DEL BLOG
Voy a empezar centrando las pestañas.
Como tengo que modificar el código HTML de la plantilla, antes hago una copia de seguridad del blog.

Centrado de pestañas

Para personalizar el menú de pestañas que organiza mi contenido por temática, voy al menú de Blogger y selecciono Plantilla - Editar HTML.


Se abre la ventana con el código HTML de la plantilla.
Hago clic con el ratón sobre cualquier punto de esta ventana y pulso las teclas CTRL+F para activar el buscador interno de esta ventana.
Se abre un recuadro Search y escribimos /* Tabs




Localiza la entrada (círculo rojo) a partir de la cual está el código HTML para las páginas que he creado en el blog.
Al final de este código para las páginas (Tabs), y justo antes del código para el módulo siguiente que en mi caso es /*Headings, escribo el siguiente código,



/* Centrar Páginas */
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}





Guardo la plantilla.
Visualizo el blog para ver el resultado. Las pestañas del menù de páginas están ya centradas y en línea horizontal por la propiedad display:inline. Por el momento solo tengo tres pestañas y el efecto no es el mejor, así que puedo eliminar este código para que queden alineadas otra vez a la izquierda.


Si quisiera alinear las pestañas a la derecha el código sería usando right en lugar de center.

/* Centrar Páginas */
.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}


Para alinear las pestañas a la izquierda en forma de columna sería,

/* Centrar Páginas */
.PageList {text-align:left !important;}
.PageList li {display:online !important; float:none !important;}

El efecto es el siguiente,





En cuanto a la propiedad float, hace referencia al posicionamiento flotante de la caja. Como no quiero que las cajas de cada pestaña se desplacen a izquierda (left) o derecha (right), establezco el valor "none" para evitar su desplazamiento.

Personalizar la letra (tipo, tamaño y color)

Como en el caso anterior, voy a Plantilla - Editar HTML y busco mediante CTRL+F el siguiente texto tabs-inner.


Voy a trabajar ahora con el código que está dentro del recuadro en rosa.



<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#1563c3"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#000000"/>
</Group>


Voy a poner una fuente de letra "Century Gothic" con un tamaño de 25px y en color naranja "#ff8c00"


El código pasa a ser el siguiente (en negrilla y azul las modificaciones).

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 25px 'Century Gothic', Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px 'Century Gothic', Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#fffff" value="#FF8C00"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#FF8C00"/>
</Group>


El nombre del tipo de letra, como está formado por dos palabras con un espacio intermedio, debe escribirse entre comillas 'tipo letra'.
Aparecen más tipos de letra después de Century Gothic, esto se debe a que si el sistema no reconoce el primer tipo de letra, mostrará el texto en el siguiente.
<Variable name="tabs.text.color"....> corresponde al texto de las páginas que se han añadido.
<Variable name="tabs.selected.text.color"...> corresponde al texto de la página principal (Inicio). Podemos establecer un mismo color para todas o diferenciar el texto de la página principal con otro color.

Este es el resultado,

Menú Páginas horizontal





Ya tengo una barra de menú para mi blog. Hasta el momento contenía 3 pestañas (Inicio - Blogger - Photoshop) pero he añadido dos más (HTML y CSS.).


Las pestañas están centradas en una barra horizontal bajo el título del blog y está ya personalizado su contenido (texto con el nombre de las páginas) según tipo de letra, tamaño y color.

El siguiente paso es dar formato al fondo de estas pestañas. En principio está en color blanco pero voy a probar cómo resultará el aspecto de mi blog si realizo algún cambio. Al mismo tiempo me servirá para ampliar mis conocimiento en cuanto a la personalización del menú de páginas de un blog.


RGBA_TRANSPARENCIAS

Como voy a trabajar con colores, es importante tener en cuenta que a partir de CSS3 (última versión de CSS) podemos aplicar transparencias a los colores.

Para eso tenemos que trabajar con RGBA que es el modelo RGB con una nueva propiedad "canal alfa" que se usa como índice de la transparencia en un píxel.

Para definir un color RGBA se deben especificar cuatro valores de la siguiente manera:
rgba(255,0,0,0);

Los tres primeros valores corresponden a los valores de rojo, verde y azul y siempre tienen que ser números entre 0 y 255. El cuarto valor es un número entre 0 y 1.

0 totalmente transparente,
1 totalmente opaco
0.5 con una transparencia al 50%, es decir, mitad opaco mitad transparente.



Como tengo que modificar el código HTML de la plantilla antes de nada hago una copia de seguridad del blog.



COMO EDITAR EL CÓDIGO BACKGROUND DE LAS ETIQUETAS (TAGS) DEL MENÚ HORIZONTAL DEL BLOGVoy al menú de Blogger y selecciono Plantilla - Editar HTML.



Dentro de la ventana de HTML me posiciono sobre cualquier punto de ella y hago clic con el ratón, a continuación pulso las teclas CTRL+F para activar el buscador interno de esta ventana. Se abre un recuadro Search y escribo /* Tabs para localizar la entrada (círculo rojo) a partir de la cual se definen las páginas creadas en el blog.

Buscar /* Tabs

Ahora busco el código relacionado con el background de las etiquetas que están en las siguientes líneas,


.tabs-inner .widget ul {
padding: 0;

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

-moz-border-radius: $(tabs.border.radius);
-webkit-border-radius: $(tabs.border.radius);
-goog-ms-border-radius: $(tabs.border.radius);
border-radius: $(tabs.border.radius);}
Todas las líneas que contengan el símbolo $ dentro del diseño de plantilla se pueden personalizar.




Aplicar un color al fondo de las etiquetas_Background.color


Voy a empezar modificando el fondo (background) que aparece en esta línea,

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;


y establezco como fondo de la barra de menú el mismo color del fondo de la cabecera del blog.

Para saber el código de este color voy al menú en el escritorio, selecciono Plantilla-Personalizar-Avanzado-Fondos y copio el código del color del "Fondo de la cabecera" (cuadro morado en la imagen).

Ver color fondo cabecera blog

Ahora regreso al editor HTML de la plantilla y elimino $(tabs.background.color).
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;


y lo sustituyo por este código del color (en azul y negrilla),


.tabs-inner .widget ul {
padding: 0;

background: #0a3161 $(tabs.background.gradient) repeat scroll bottom;

-moz-border-radius: $(tabs.border.radius);
-webkit-border-radius: $(tabs.border.radius);
-goog-ms-border-radius: $(tabs.border.radius);
border-radius: $(tabs.border.radius);
}


Por el momento, el resultado que tengo es el siguiente,








El fondo de las etiquetas de las páginas tiene el mismo color que el fondo de la cabecera, excepto la etiqueta de la página principal que continúa en blanco.






Aplicar un color degradado al fondo de las etiquetas_Background gradient

El segundo elemento de la línea es tabs.background.gradient. Hace referencia a un degradado de colores para aplicar al fondo.

Voy a ver dos tipos de degradado,

Degradado lineal _ linear-gradient
Degradado radial_radial-gradient


En el editor HTML de la plantilla, elimino $(tabs.background.gradient).

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;



1. DEGRADADO LINEAL / LINEAR-GRADIENT


Voy a probar el degradado lineal. Hay dos formas de hacerlo,

Definiendo el punto de inicio, que puede ser top (arriba), right (derecha), bottom (abajo), left (izquierda) o diagonally (diagonalmente).
Definiendo su ángulo de inclinación en grados, grados centesimales o radianes.


A. Degradado lineal definiendo punto de inicio


Ejemplo degragado lineal con tres colores sin definir punto inicio


background: $(tabs.background.color) linear-gradient(red, blue, yellow) repeat scroll bottom;


Como solo especifico colores, por defecto toma el punto de inicio TO BOTTOM (hacia abajo).


El resultado es,





Ejemplo degragado lineal con dos colores definiendo el espacio de posición
Podemos definir el espacio en el que se posicionará el color a lo largo del eje de degradado.


background: $(tabs.background.color) linear-gradient(to bottom, blue 65%, yellow) repeat scroll bottom;






Ejemplo degragado lineal con dos colores y punto de inicio TO BOTTOM (hacia abajo)

Como es el valor por defecto, el resultado será igual en el caso de que incluyamos este valor o no.

background: $(tabs.background.color) linear-gradient(red, yellow) repeat scroll bottom; .....o.....
background: $(tabs.background.color) linear-gradient(to bottom, red, yellow) repeat scroll bottom;








Ejemplo degragado lineal con dos colores y punto de inicio TO TOP (hacia ariba)


background:$(tabs.background.color) linear-gradient(to top, blue, yellow) repeat scroll bottom;








Ejemplo degragado lineal con dos colores y punto de inicio TO RIGHT (hacia la derecha)

background:$(tabs.background.color) linear-gradient(to right, blue, yellow) repeat scroll bottom;









Ejemplo degragado lineal con dos colores y punto de inicio TO LEFT (hacia la izquierda)


background:$(tabs.background.color) linear-gradient(to left, blue, yellow) repeat scroll bottom;









Ejemplo degragado lineal con dos colores en diagonal (de izquierda a derecha - hacia abajo)

El punto de inicio se sitúa en la zona superior izquierda y termina en la zona inferior derecha.
background:$(tabs.background.color) linear-gradient(to bottom right, blue, yellow) repeat scroll bottom









Ejemplo degragado lineal con dos colores en diagonal (de derecha a izquierda - hacia abajo)

El punto de inicio se sitúa en la zona superior derecha y termina en la zona inferior izquierda.
background:$(tabs.background.color) linear-gradient(to bottom left, blue, yellow) repeat scroll bottom




Ejemplo degragado lineal con dos colores en diagonal (de izquierda a derecha - hacia arriba)
El punto de inicio se sitúa en la zona inferior izquierda y termina en la zona superior derecha.
background:$(tabs.background.color) linear-gradient(to top right, blue, yellow) repeat scroll bottom





Ejemplo degragado lineal con dos colores en diagonal (de derecha a izquierda - hacia arriba)

El punto de inicio se sitúa en la zona inferior derecha y termina en la zona superior izquierda.
background:$(tabs.background.color) linear-gradient(to top left, blue, yellow) repeat scroll bottom





B. Degradado lineal definiendo ángulo de inclinación
El ángulo se especifica como un ángulo entre una línea horizontal y la línea de gradiente (línea que une los puntos en una pendiente)

background: $(tabs.background.color) linear-gradient(-40deg, blue, yellow) repeat scroll bottom;



Un valor positivo desplaza el ángulo en el sentido de izquierda a derecha y un valor negativo desplaza el ángulo de derecha a izquierda.




2. DEGRADADO RADIAL / RADIAL-GRADIENT
Este degradado no lo soporta la versión 9 e inferiores de IE.
El centro define el degradado radial y se necesitan al menos dos colores. Puede definir puntos de parada y también tamaño.

Degradado circular_circle
Degradado en elipse_ellipse (por defecto)Los valores que toma por defecto es la elipse, el tamaño es el más alejado de las esquinas y parte de posición centro.



Ejemplo degragado radial en dos colores

background: $(tabs.background.color) radial-gradient(blue, yellow) repeat scroll bottom;



Solo indicamos dos colores, por eso el degradado es en elipse partiendo de la posición centro.

Podemos aplicar porcentajes,

background: $(tabs.background.color) radial-gradient(blue 45%, yellow) repeat scroll bottom;




Ejemplo degragado radial en dos colores en forma de círculo

background: $(tabs.background.color) radial-gradient(circle, blue 2%, yellow) repeat scroll bottom;


Se apreciaría mejor el efecto si se tratara de un cuadrado.





Valores del gradiente
Hay cuatro tipos de valores para definir el tamaño del gradiente

closest-side (el lado más cercano)
farthest-side (el lado más alejado)
closest-corner (la esquina más cercana)
farthest-corner (la esquina más alejada, establecido por defecto)
Ejemplo degragado radial en dos colores (closest-side)

background: $(tabs.background.color) radial-gradient(closest-side at 60% 50%, blue, yellow) repeat scroll bottom;






Repetir fondo_Background repeat
Retomo de nuevo la línea inicial que tenía para el background.

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

Voy a revisar el tercer elemento que es repeat.

La propiedad background-repeat determina cómo se repite la imagen de fondo.

El valor repeat-x repetirá la imagen horizontalmente.
El valor repeat-y repetirá la imagen verticalmente.
El valor no-repeat no repetirá la imagen.
El valor repeat es aleatorio y dependerá del sistema de navegación.


Fijación del fondo_Background Attachment (Scroll)
Por último voy a ver scroll.

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

Esta propiedad determina si la imagen de fondo se desplazará con el contenido (scroll) o será fija (fixed) con respecto al lienzo.





Resultado final


Después de revisar y probar todas estas opciones, la línea para el background la defino de la siguiente forma,


background: $(tabs.background.color) radial-gradient(circle, rgba(10,49,97,1)20%, rgba(218,165,32,.6)) repeat scroll bottom;





Establezco un degradado radial circular en dos colores para los que añado transparencias.
El primer color (azul) tiene una opacidad del 100% (valor 1) y le doy un valor de espacio del 20%. El segundo color (dorado) tiene una opacidad del 40%. (valor 0.4)


Por el momento estos son los cambios y mejoras que he realizado en mi blog de prácticas que sigue en una lenta pero constante evolución al igual que mi aprendizaje en los lenguajes HTML y CSS.



Ahora voy a ver cómo puede mejorar su aspecto añadiéndole bordes.


Realizo previamente una copia de seguridad del blog porque voy a modificar el código HTML de la plantilla.

Voy al menú de Blogger y selecciono Plantilla - Editar HTML.



Me posiciono sobre cualquier punto de la nueva ventana y hago clic con el ratón, a continuación pulso las teclas CTRL+F para activar el buscador interno de esta ventana. Se abre un recuadro Search y escribo /* Tabs para localizar la entrada (círculo rojo) a partir de la cual se definen las páginas creadas en el blog.
Buscando /* Tabs

Localizo el código que está relacionado con el background de las etiquetas. En azul está la línea que ya he modificado en la entrada titulada Personalizar el fondo del menú horizontal en el blog
Todas las líneas que contengan el símbolo $ dentro del diseño de plantilla se pueden personalizar.

.tabs-inner .widget ul {
  padding: 0;
background: $(tabs.background.color) radial-gradient(circle, rgba(10,49,97,1)20%, rgba(218,165,32,.6)) repeat scroll bottom;


  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);


MODIFICANDO LOS BORDES DEL MENÚ DE ENTRADA

Me voy a centrar en la última línea con la propiedad border-radius.

En CSS 3 las etiquetas nuevas pueden ser interpretadas por cada navegador de forma distinta. Debido a esto es necesario añadir prefijos nuevos a las propiedades, que son los siguientes:
-moz-_Para algunas versiones de Firefox.
-webkit-_Para algunas versiones de Google Chrome, Safari y Android.
-ms-_Para algunas versiones de Internet Explorer.
-o-_Para versiones de Opera.


CSS3 (Hoja de estilo en cascada) es la última versión del lenguaje que se utiliza para definir la presentación de un documento escrito en lenguaje HTML, XML o XHTML

Son varias las propiedades que necesitan los prefijos y éstas varían con el tiempo. Por regla general son las que no forman parte del índice oficial de propiedades del W3C. Si una propiedad no se encuentra en este índice lo más seguro es que necesite el uso de prefijos.

El World Wide Web Consortium (W3C) según Wikipedia "es el consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo"


PROPIEDAD BORDER-RADIUS

Esta propiedad no forma parte del índice oficial de propiedades del W3C.
A pesar de esto no necesita prefijos para su soporte en los distintos navegadores. Por esta razón elimino las tres primeras líneas que tienen prefijos delante de la propiedad border-radius.

-moz-border-radius: $(tabs.border.radius);
-webkit-border-radius: $(tabs.border.radius);
-goog-ms-border-radius: $(tabs.border.radius);

Esta propiedad añade esquinas redondeadas al elemento.

Normas de border-radius






Un solo valor: Si la propiedad solo viene definida por un solo valor, éste se aplicará por igual a las cuatro esquinas del elemento. En el cuadro 1 + 2 + 3 + 4
Dos valores:
El primer valor se aplica a la esquina superior izquierda y esquina inferior derecha.
En el cuadro 1 + 3
El segundo valor se aplica a la esquina superior derecha y esquina inferior izquierda. En el cuadro 2 + 4
Tres valores:
El primer valor se aplica a la esquina superior izquierda.
En el cuadro 1
El segundo valor se aplica a la esquina superior derecha y esquina inferior izquierda.
En el cuadro 2 + 4
El tercer valor se aplica a la esquina inferior derecha.
En el cuadro 3
Cuatro valores:
El primer valor se aplica a la esquina superior izquierda.
En el cuadro 1
El segundo valor se aplica a la esquina superior derecha.
En el cuadro 2
El tercer valor se aplica a la esquina inferior derecha.
En el cuadro 3
El cuarto valor se aplica a la esquina inferior izquierda. En el cuadro 4

Atributos de border-radius
border-top-left-radius_Redondea la esquina superior izquierda. En el cuadro 1
border-top-right-radius_Redondea la esquina superior derecha. En el cuadro 2
border-bottom-rightt-radius_Redondea la esquina inferior derecha. En el cuadro 3
border-bottom-left-radius_Redondea la esquina inferior izquierda. En el cuadro 4

Valores de border-radius
length_Define la longitud del radio del círculo con unidades relativas como em | px | ex.
%_Se puede definir también en porcentajes y se basa en la altura o ancho total.

Aplicación en mi blog


 .tabs-inner .widget ul {
  padding: 0;

  background: $(tabs.background.color) radial-gradient(circle, rgba(10,49,97,1)20%,         rgba(218,165,32,.6)) repeat scroll bottom;

   border-radius: 15px;

DEFINIR UN BORDE AL MENÚ

Si quisiera añadir una línea al borde de la caja que rodea la barra de menú, añadiría la siguiente línea de código (en negro).

.tabs-inner .widget ul {
  padding: 0;


  background: $(tabs.background.color) radial-gradient(circle, rgba(10,49,97,1)20%, rgba(218,165,32,.6)) repeat scroll bottom;

  border-radius: 15px;
  border: 12px ridge #000000;
}

Siendo el resultado el siguiente,

Menu horizontal con border-radius
Podríamos utilizar diferentes tipos de bordes, definiendo su grosor y color.
[Ver la entrada Margin, padding y border]






Menú horizontal en un blog
Se puede hacer mediante las herramientas que ofrece Blogger o bien con código CSS.
Voy a empezar por la forma más sencilla, es decir, con los gadgets y páginas de Blogger.


Por el momento mi blog está tratanto temas de photoshop y blogger, y estas serán las dos pestañas que incluiré en el menú de contenidos, a parte de la pestaña que me permita posicionarme en la página principal.


Lo primero que hago es añadir un gadget de "página" a la plantilla del blog.


Para eso voy a Diseño desde la zona de escritorio.
El siguiente paso es añadir el gadget. Como quiero crear un menú horizontal, tendré que añadirlo bajo la cabecera, por ejemplo en Cross-Colum 2.

El problema con el que me encuentro es que no me aparece +Añadir un gadget
Lo he solucionado añadiendo este gadget en el espacio destinado a la columna derecha del blog donde están el cuadro de búsqueda, Etiquetas y Archivo (Sidebar-right-1)

Hago clic en "Añadir un gadget".  
Y se abre una ventana donde selecciono el gadget "Página"
Se abre la ventana para configurar la página.
En título (es opcional) he puesto el nombre de Menú horizontal, para identificar el menú con la lista de páginas.
Y el cuadro de "Seleccionar todas" lo dejo marcado y le cambio el nombre de Página principal por el nombre de Inicio porque llevará a la página principal del blog.
Ahora tengo que mover este gadget y desplazarlo a la zona destinada a Cross-Colum 2 para que se sitúe bajo la cabecera del blog
Si se visualiza el blog, veo que se ha creado una barra en fondo blanco con la palabra Inicio, que es la página que he añadido
Tengo configurada la barra de menú pero ahora tengo que añadir una nueva página.

Para eso regreso al menú de Blogger, selecciono Diseño y hago clic en Editar dentro de Cross-Column 2 (donde tengo el gadget de Página).
Y hago clic en +Añadir enlace externo.
Como título de la página escribo Photoshop y añado la dirección web (URL) de las entradas etiquetadas con el nombre Photoshop. 

Cómo consigo este link? Es fácil. Hago clic en la etiqueta Photoshop (dentro de la sección Etiquetas) y se abre una página con la selección de estas entradas.
Copio la URL y la pego en el recuadro de Dirección web (URL) de la Página nueva (anterior imagen).
Ahora visualizo el blog y veo que se ha añadido una nueva pestaña dentro del menú horizontal con el nombre Photoshop. Al hacer clic sobre él se abrirá una página con las entradas etiquetadas con el nombre de Photoshop.
Me queda completar el menú horizontal para la temática Blogger y encontrar la forma de mejorar su aspecto, y si es posible, eliminar el texto Mostrando entradas con la etiqueta "X". Mostrar todas las entradas.





    Después vamos a 
EDICIÓN HTML y con Ctrl+F abrimos el buscador y buscamos .post-body img, nos saldrá algo como esto:






.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img
{padding: $ (image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); }




Empezamos con el marco, vamos hasta la línea donde dice:



border: 1px solid $(image.border.color);
     
    Aquí podemos aumentar los valores px (pixels) de border para aumentar el tamaño del marco o ponerlo a 0 para quitarlo. Y "solid" define el estilo del borde que puede ser:

SOLID



DOTTED



DOUBLE



DASHED



GROOVE



RIDGE



INSET



OUTSET




    Podemos hacer infinidad de combinaciones cambiando los valores de esta línea y los colores de fondo y de borde en PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES 

O podemos añadir nuevas líneas de código como esta (cada valor corresponde a un borde) que hace que los bordes queden redondeados:

border-radius: 10px 10px 10px 10px ;


O podemos escribir una línea de código para cada lado (superior, inferior, derecho, izquierdo) por separado donde #999999 corresponde al color expresado en forma hexadecimal:





border-top: 1px solid #999999 (image.border.color);
border-bottom: 1px solid #999999 (image.border.color);
border-right: 1px solid #999999 (image.border.color);
border-left: 1px solid #999999 (image.border.color);
     
  
    Vamos ahora con la sombra. Estas tres líneas son las que definen las características de la sombra, en realidad es sólo la tercera, las otras dos llevan los mismos valores y se añaden para que la sombra sea compatible con todos los navegadores. Para quitar la sombra ponemos todos los valores a 0.



-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);


    Si lo que queremos es modificarla jugamos con los valores seguidos de px: el rosa en positivo la coloca a la derecha y en negativo a la izquierda, el verde en positivo abajo y en negativo arriba y los números que asignemos indican el ancho. El azul nos marca el grado de difuminado (va de 0 transparente, a 1 opaco). ¿Y qué pasa si queremos sombra por los 4 lados de la imagen? Pues ponemos a 0 los dos primeros valores o podemos añadir un cuarto valor seguido de px.

Y con los valores de rgba cambiamos el color y la intensidad, los tres primeros números marcan el color y el cuarto la intensidad, va de 0 (transparente) a 1 (opaco). Este es el código que corresponde a la siguiente imagen:




box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, .5);




Bien, ya sabemos cómo quitar y modificar la sombra ( y el marco) a las imágenes del blog, ¿pero qué pasa si lo que queremos es quitarla en algunas imágenes del blog y en otras no?
Lo primero es seguir los pasos para quitar todas las sombras, después vamos a
PERSONALIZAR PLANTILLA>>AVANZADO>>AÑADIR CCS y añadimos este código:




#sombraimg{
-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
}


Ahora sólo tendremos que añadir id='sombraimg' en cada imagen a la que queramos añadir la sombra. Un ejemplo:

Yo quiero poner sombra a la foto de mi entrada pero no a la imagen de la firma. Edito mi entrada y voy a HTML arriba a la izquierda, busco con Ctrl+F "img" para que me aparezcan resaltadas todas las imágenes de mi entrada y localizo la foto a la que quiero poner sombra. Añado id='sombraimg' de la siguiente manera:




<img id='sombraimg' border="0" src="URL DE MI FOTO" />


Y este es el resultado:



http://mientrascuchufletaduerme.blogspot.com/2014/10/tutorial-quitar-poner-y-modificar-marco-y-sombra-en-una-o-varias-fotos-de-blogger.html

Añadir los iconos con HTML

- Dirígete al apartado de diseño de Blogger y haz "Añadir un gadget" en el lugar donde quieras colocarlos.
- Escoge la opción de "HTML/Javascript"
- Pon un título tipo "seguir", "contactar", "otros canales"...., copia el siguiente código para cada una de tus redes sociales y guarda. Pongo el ejemplo con mi Twitter

<a href="https://twitter.com/2ndfunniest" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/twitter.png" alt="Seguir a 2nd Funniest Thing en Twitter"/></a>

La parte escrita en verde es la URL de tu Twitter/Facebook, LinkedIn...
La parte escrita en rojo es la URL donde está colgado el icono que utilizas para esa red social
La parte escrita en azul es lo que verá la gente al pasar el ratón por encima.

- Si quieres poner varios iconos, después de este código da un espacio con el teclado y vuelve a copiar el mismo código pero personalizándolo para cada red social. Aquí ves mi código completo como ejemplo de lo que te quedará:


<a href="https://twitter.com/2ndfunniest" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/twitter.png" alt="Seguir a 2nd Funniest Thing en Twitter"/></a>

<a href="http://www.facebook.com/2ndfunniestthing" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/facebook.png" alt="Seguir a 2nd Funniest Thing en Facebook"/></a>

<a href="http://www.bloglovin.com/en/blog/3732044/tutoriales-y-piezas-unicas-diys-un" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/Bloglovin.png" alt="Seguir a 2nd Funniest Thing en Bloglovin"/></a> 

<a href="http://pinterest.com/2ndfunniesthing/" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/pinterest.png" alt="Seguir a 2nd Funniest Thing en Pinterest"/></a> 

<a href="http://feeds.feedburner.com/TutorialesYPiezasnicas-DiysUniquePieces" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/mail.png" alt="Seguir a 2nd Funniest Thing por email"/></a>

<a href="http://www.linkedin.com/in/2ndfunniestthing" target="_blank"><img src="https://sites.google.com/site/2ndfunniestthing/linkedin.png" alt="Contactar con 2nd Funniest Thing en LinkedIn"/></a>

TÍTULO DE GADGET SIDEBAR CON LÍNEA SENCILLA ANTES Y DESPUÉS:
.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
font-size: 20px;
content: "\2014" "\00A0" ;
}

.sidebar h2:after {
font-size: 20px;
content: "\00A0" "\2014" ;
}


TÍTULO DE GADGET SIDEBAR CON LÍNEA TRIPLE ANTES Y DESPUÉS:





.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
font-size: 15px;
content: "\2261" "\00A0" ;

}

.sidebar h2:after {
font-size: 15px;
content: "\00A0" "\2261" ;
}






TÍTULO DE GADGET SIDEBAR CON LÍNEA DOBLE ANTES Y DESPUÉS:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 2px; text-align: center; padding-top: 5px; padding-bottom: 5px;}.sidebar h2:before { font-size: 15px; content: "\2550" "\00A0" ; } .sidebar h2:after { font-size: 15px; content: "\00A0" "\2550" ; }


TÍTULO DE GADGET SIDEBAR CON CUADRADO:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 3px; text-align: center; border:1px solid #8fb59e; padding: 15px; }
  

R E C U E R D A : si modificas los píxeles en la parte de "border" puedes conseguir líneas más gruesas.





TÍTULO DE GADGET SIDEBAR CON LÍNEA ARRIBA Y ABAJO:


.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-top:2px solid #8fb59e; border-bottom:2px solid #8fb59e; padding: 10px; }





Voy a usar este modelo, que como sabéis hay que optimizar la imagen para que no tengamos que redimensionar las medidas, así que he modificado el tamaño para que me coincida con el de los títulos de la sidebar.


Pues allá vamos con el código:




.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #fff !important;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRPpivLsnDww0hUihfaBpQDmEWnBuYhgJNQ9APEIT46HVLpl9l15rFNV-0HXseQ6Pcpveb9UJzvtVZDPR8CABITxwInT8g9Jwl6D9Km5JecxYb63CJDXYe9ycMbZetgkzjIfG1PxAjbUr/s1600/10washitape-grande-miss-lavanda.png);
padding: 10px;
}






TÍTULO DE GADGET SIDEBAR CON FONDO DE COLOR CUADRADO:



.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #fff !important; text-transform: uppercase; letter-spacing: 3px; text-align: center; background: #8fb59e; padding: 10px; }







TÍTULO DE GADGET SIDEBAR CON FONDO DE COLOR REDONDEADO:



.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #fff !important; text-transform: uppercase; letter-spacing: 3px; text-align: center; background: #8fb59e;border-radius: 50px; padding: 10px; }

TÍTULO DE GADGET SIDEBAR SOLO TEXTO:




.sidebar h2 {
font-size:20px !important; color: #8fb59e !important;
text-transform: uppercase; letter-spacing: 5px; text-align: center; padding: 10px; }



En este caso la tipografía es la que hemos elegido en nuestro editor de plantilla de blogger.


En este otro post te explico muchas más opciones de personalización pero si no quieres meterme mucho en código puedes usar estos que te he facilitado. Lo único que debes cambiar en aquel código que elijas es el color.

Para eso sabes que tienes que tener tu paleta de colores, de donde podrás escoger el color que más te guste para esta tarea de hoy.



FONDO DEL MENÚ CON WASHI-TAPE:



.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px;
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;
}
.tabs-inner .widget ul {
  background-image: url(https://1.bp.blogspot.com/-
Xj8sRQXmTOg/V0_lihNaDKI/AAAAAAAAAEQ/m87XGFP5sJYCBp90iSu5NF
gkWpJsUY0DwCLcB/s1600/fondo-menu-blogger-washitape.png);
  height: 60px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 26px 20px 15px 22px;
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}         
Selecciona el texto y copialo.

FONDO DEL MENÚ DE PÁGINAS CUADRADO


.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; 

}

.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;

}

.tabs-inner .widget ul {
background: #8fb59e;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}

.tabs-inner .widget li a {
  display: inline-block;

padding: 20px;

  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;

  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}



FONDO DEL MENÚ DE PÁGINAS CUADRADO CON BORDES REDONDEADOS


.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/

}

.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;

}

.tabs-inner .widget ul {
background: #8fb59e;
border-radius: 50px;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}

.tabs-inner .widget li a {
  display: inline-block;

padding: 20px;

  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;

  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

MENÚ DE PÁGINAS CON LÍNEA ARRIBA Y ABAJO:


.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; 

}

.tabs-inner .section:first-child ul {
border-top: 2px solid #8fb59e;
border-bottom: 2px solid #8fb59e;

}

.tabs-inner .widget ul {

  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}

.tabs-inner .widget li a {
  display: inline-block;

padding: 20px;

  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #8fb59e;

  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

MENÚ DE PÁGINAS CON LÍNEA ARRIBA Y PUNTITOS ABAJO:


.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/

}

.tabs-inner .section:first-child ul {
border-top: 2px solid #8fb59e;/*bordes del menú*/
border-bottom: 2px dotted #8fb59e;/*bordes del menú*/

}

.tabs-inner .widget ul {

  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}

.tabs-inner .widget li a {
  display: inline-block;

padding: 20px;/*espacio entre pestañas*/

  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #8fb59e;

  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}


MENÚ DE PÁGINAS CUADRADO CON SELECCIÓN EN BLANCO





.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/

}

.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú*/
border-bottom: 0px dotted #000;/*bordes del menú*/

}

.tabs-inner .widget ul {
background: #8fb59e;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}

.tabs-inner .widget li a {
  display: inline-block;

padding: 20px;/*espacio entre pestañas*/

  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;

  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #8fb59e;
  background-color: #fff;
  text-decoration: none;
}



Ey!! ¿A que están chulos? Pues ¿Qué tal si lo personalizamos un poquito más a nuestro gusto? 


PERSONALIZAR LOS CÓDIGOS:

En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo.

.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}

Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.

.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}

.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}

En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
- Si queremos que la línea sea punteada: dotted
- Si queremos que sea a rayas: dashed
- Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
- Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.


.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
  height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
  margin-top: 0; /* margen arriba*/
  margin-left: -30px; /* margen izquierda*/
  margin-right: -30px; /* margen derecha*/
}

.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;/*espacio entre pestañas*/
  font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
  color: #fff; /* color del texto*/

  border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
  border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;  /* borde en la pestaña, así no hay*/
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #8fb59e; /*Color cuando pasamos con el ratón*/
  background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
  text-decoration: none; /* sin subrayado de enlace*/
}

En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.

Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto  #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! ;)

De todas formas cualquier dudita ya sabes, me lo cuentas en los comentarios de aquí abajo :)


.
Ahora vamos a colocar el código en nuestra plantilla para que nuestro menú quede así de bonito.

 Vamos a Plantilla

 Hacemos una Copia de Seguridad

 Le damos a Editar HTML

 Buscamos en plantilla (si no sabes cómo mira este vídeo) el siguiente código: 

.tabs-inner .section
Después borramos todo lo que hay desde ese primer código hasta este otro:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {  color: $(tabs.selected.text.color);  background-color: $(tabs.selected.background.color);  text-decoration: none;}
Este anterior también se elimina.

 En su lugar pegamos el código que hayamos elegido de los anteriores que os he compartido.

https://www.bloggerpasoapaso.com/2016/06/tutorial-blogger-personalizar-menu-paginas.html






BTemplates.com

Con la tecnología de Blogger.

Popular Posts