martes, 22 de junio de 2021

Personalizar los títulos de los Gadgets ♪ ☆

martes, junio 22, 2021 0 Comments
Es muy fácil solo debemos ir a:

Plantilla Personalizar Opciones avanzadasAgregar Css

y agregamos el siguiente código:

/*Adornar el título del gadget*/

.sidebar h2{
padding:10px; /*Tamaño*/
background-color: #ADD8E6; /* color de fondo*/
border:2px dashed #FFC0CB; /*color ,tamaño y tipo de contorno*/
border-radius: 5px; /*para redondear las esquinas */
text-align: center;} /*Para centrar el texto*/


El resultado sería este:

Pueden cambiar dashed por otro estilo, por ejemplo estos:

Dotted
Solid

Estos son otros estilos ,pero deberán cambiar los px del border , ya que si los dejan del mismo tamaño se verá como estilo "solid ", pueden cambiarlo por 4 o 5px.


/*Adornar el título del gadget*/

.sidebar h2{
padding:10px; /*Tamaño*/
background-color: #ADD8E6; /* color de fondo*/
border:4px double #FFC0CB; /*color ,tamaño y tipo de contorno*/
border-radius: 5px; /*para redondear las esquinas */
text-align: center;} /*Para centrar el texto*/

Double

Groove
Inset

Outset
Ridge

Si desean que el redondeado de las esquinas sea diferente,pueden cambiar el border-radius

/*Adornar el título del gadget*/

.sidebar h2{
padding:10px; /*Tamaño*/
background-color: #ADD8E6; /* color de fondo*/
border:2px dashed #FFC0CB; /*color ,tamaño y tipo de contorno*/
border-radius: 15px; /*para redondear las esquinas */
text-align: center;} /*Para centrar el texto*/


15px

25px

lunes, 21 de junio de 2021

Blogger como Crear y Personalizar ♪ ☆

lunes, junio 21, 2021 0 Comments

Menú de personalización



En la página anterior vimos cómo aplicar una plantilla al blog para cambir su estilo y apariencia.

En esta página veremos cómo podemos cambiar muchos aspectos de la plantilla,

Conseguimos así personalizar la plantilla, de forma que dos blogs con la misma plantilla pueden tener un aspecto totalmente diferente después de personalizarlos.

Para personalizar la plantilla abrimos la página de bloger de aplicar plantila, par ello en el menú de administración pulsamos en "Plantilla".

Ahí nos fijamos en el cuadro llamado "Mi blog ahora". Vemos que debajo del mismo hay un botón que pone "Personalizar". Pulsamos en ese botón y vemos que nos cambia la vista de la página.

En la parte superior, sobre fondo oscuro nos sale un panel para trabajar con la personalización.

En la arte inferior, se nos muestra el blog, que se ve tal como está ahora.



Encima del panel, a la derecha tenemos unos botones con las opciones "Volver a Blogger", que nos devuelve a la página anterior; "Ver blog"; para ver el estado del blog; "Ayuda", que nos abre una página de ayuda; y "Aplicar al blog", para guardar los cambios que vayamos haciendo.

Debajo del panel vemos el blog. Este tiene una barra de desplazamiento a la derecha, para poder desplazarnos y verlo entero.

En el propio panel vemos que a la izquierda hay un menú de opciones. Éstas son: Plantillas, Fondo, Ajustar Ancho, Diseño, Avanzado. Veamos ahora las distintas opciones.

Plantilla

Esta es la opción que nos sale por defecto al abrir la página. Nos permite poder aplicar otra plantilla. Las plantillas disponibles son las mismas que las vistas en la página anterior, y también están agrupadas por secciones.

Fondo


Al pulsar sobre esta pestaña aparecen dos opciones: Imagen de fondo y Gama de colores principal.

Si pulsamos sobre Imagen de fondo, se nos abre un cuadro para cambiar la imagen de fondo.

Desde ahí tenemos varias opciones, o subir una imagen de nuestro ordenador, (en subir imagen), o elegir una imagen entre las distintas colecciones que aparecen.


Para elegir la imagen pulsamos sobre la colección, y después sobre la imagen. Una vez que hemos elegido la imagen pulsamos el botón "Listo" para hacer el cambio en el blog.

Veremos cómo en la parte de abajo de la página en donde se ve el blog, se ha aplicado el cambio.

Nosotros aquí hemos elegido la imagen "Storman" de la colección "Abstracto".

La opción Gama de colores principal nos permite cambiar la gama principal de colores del blog. Podemos elegir cualquiera de los "Temas sugeridos", o pulsar sobre el cuadrado superior, ahí se nos abrirá una paleta de colores en donde podemos elegir un color distinto en torno al cual tendremos la gama principal. Nosotros dejaremos nuestro blog tal como está sin cambiarle la gama de colores.


Ajustar ancho

En esta pestaña elegimos la anchura que ocupará el blog completo, y también la barra lateral.

al desplazar el puntero de la barra de desplazamiento podemos elegir la anchura que creamos más adecuada.

Nosotros para nuestro blog elegiremos 1100px para el blog completo, y 320px para la barra lateral.


Diseño

Aquí podemos elegir entre distintas estructuras de página en "Diseño del cuerpo del blog". Las distintas figuras nos muestran si lo queremos con una, dos o tres columnas laterales, y si estas estarán a la izquierda o a la derecha. Para elegir una opción pulsamos sobre la figura que se ajuste al diseño que queremos.

Nosotros hemos elegido la opción que muestra una única columna a la izquierda, por lo que pulsamos ahí.

El apartado "Diseño de pie de página", nos permite poner el pie de página a una, dos o tres columnas. Nosotros lo dejaremos tal como está, a dos columnas.

Si has cambiado el diseño del blog es posible que se haya modificado el ancho de página, por lo que después de cambiar el diseño, volvemos a esta pestaña, para poner las anchuras que teníamos antes.
Avanzado

Desde esta pestaña se nos abre un submenú con varias opciones en las que podemos modificar distintas partes del blog. Veamos estas opciones.


BodyText

Modificamos aquí el aspecto del texto, en gadgets y pie de página, El texto del contenido de la pagina o entrada, se modifica desde la edición de la misma, y aquí sólo se modificarán aquellos aspectos que no hayamos modificado allí (por ejemplo el color).

El primer apartado "Fuente" nos permite modificar tanto la fuente o tipo de letra, como su tamaño y apariencia (negrita o cursiva).

En el segundo apartado podemos modificar el color del texto, para ello podemos elegir un color de la paleta o escoger entre los colores de la plantilla o colores recomendados.

En nuestro blog nosotros hemos cambiado la fuente a "verdana", el tamaño a "14px", y el color de texto a un color totalmente negro.

En el resto de pestañas que iremos viendo encontraremos también estos dos tipos de apartados, es decir, apartados tipo texto (para modificar texto) o tipo color (pra modificar color).

Background

Aquí podemos modificar el color de fondo. Aparecen tres apartados para modificar colores. El primero es "Fondo exterior". Si hemos puesto una imagen no transparente, el cambio no se verá, ya que la imagen está siempre encima del color de fondo. Si no es así podemos modificar el color.

El segundo apartado es "Fondo principal". En este apartado modificamos el fondo del blog. Nosotros desde la paleta de colores, hemos pulsado en la opción "Transparente", que tenemos el la parte de abajo de la misma.

El tercer apartado es "Color del borde": En este apartado cambiamos el color del borde del espacio que ocupa el blog. Nosotros hemos elegido el penúltimo color de "Colores de esta plantilla", que es un morado oscuro.

Enlaces

En esta pestaña encontramos también tres apartados para modificar colores. Todos ellos relacionados con los enlaces, Tanto en el contenido como en los gadgets y pie de página.

El primer apartado sirve para modificar el color del enlace en su estado normal. El segundo es para indicar el color de enlace una vez que ha sido visitado. En el tercero indicaremos el color del enlace cuando estemos pasando el ratón por encima.

Nosotros hemos cambiado los colores. En el primer apartado hemos puesto un azul oscuro, en el segundo un azul un poco menos oscuro, y en el tercero un morado.

Título del blog

En esta pestaña podemos modificar el título del blog. Tenemos aquí dos apartados, El primero es de tipo texto , y permite cambiar la "Fuente" del texto del título.

El segundo apartado es de tipo color, y permite modificar el color de texto del título.

Nosotros aquí sólo hemos cambiado el color, por un azul un poco más oscuro (el segundo empezando por abajo de la columna de los azules en la paleta).

Descripción del blog

En esta pestaña aparece sólo un apartado de tipo color, en el que podemos cambiar el color de texto del subtítulo del blog.

Nosotros lo hemos cambiado a un color azul más oscuro, el de abajo de todos de los azules de la paleta.

Texto de la pestaña

Se refiere a las pestañas del menú de navegación que hemos puesto antes mediante el gadget "Páginas". 

Les cambiamos aquí el color del texto. Aparecen tres apartados.

El primer apartado es de tipo texto, y permite cambiar la fuente, el tamaño y el estilo del texto de las pestañas.

El segundo es de tipo color, y es para cambiar el color del texto de la pestaña de la pagina que está abierta.

El tercero, de tipo color, es para cambiar el color del texto de las pestañas que nos llevan a otras páginas que no sean la actual.

Nosotros cambiaremos sólo el tamaño de letra a 14px y el tipo de letra a negrita, en el primer apartado.
Fondo de las pestañas

Aquí cambiamos el color de las pestañas del menú de navegación. Aparecen tres apartados de tipo color.

en el primero ,"Color seleccionado", podemos cambiar el color de fondo de la pestaña de la pagina que estamos viendo.

El segundo es para cambiar el color de fondo del resto de las pestañas.

El tercero (Color del biselado), es para cambiar el color de la línea de separación que aparece debajo.

Título de entrada

Tenemos aquí dos apartados, el primero de tipo texto, para cambiar el estilo del texto, y el segundo de tipo color, para cambiar el color del texto.

Nosotros en nuestro blog cambiaremos en el primer apartado, la fuente a Georgia, y la pondremos en negrita. También cambiamos en el segundo apartado el color, al mismo color que hemos puesto en el título del blog.

Titulo del gadget

Aquí se cambian los titulos de los gadgets, y los elementos de los títulos de entrada que no estuvieran definidos en el la propia entrada. Aparecen aquí tres apartados.

El primero, de tipo texto, cambia el estilo del texto.

El segundo, de tipo color, cambia el color del texto.

El tercero, de tipo color, cambia el biselado, es decir el color de la línea que aparece debajo del título.

Nosotros cambiaremos en el primero, la fuente a Georgia, el tamaño a 16px, y el estilo a negrita. En el segundo y en el tercero, pondremos en los dos el mismo color que el título del blog.

Acentos

Aparecen aquí dos apartados de tipo color que sirven para cambiar el estilo a los botones para desplegables, viñetas de las listas, y otros elementos adicionales. Nosotros en nuestro blog lo dejaremos tal como está.

CSS

Si sabes algo de los lenguajes de programación web, puedes cambiar el estilo de cualquier elemento del blog mediante el lenguaje CSS, desde este apartado. Nosotros no lo tocaremos y lo dejaremos como está,



Cómo colocar una Barra de Menú en Blogger ♪ ☆

lunes, junio 21, 2021 0 Comments
Tener un menú o dividir el contenido de tu pagina, puede ser muy útil para clasificar la información en tu blog y hacer más accesible y fácil el acceso a tus contenidos.

En este tutorial te explicamos cómo poner un menú horizontal debajo de la cabecera de tu pagina.


Paso a paso cómo hacer un menú en blogger:
1. Entra a Plantilla
2. En el menú de la izquierda haz click en Páginas



3. En esta página tienes 2 menús desplegables. En el menú superior tienes 2 opciones:

Página en blanco: si haces click aqui se abre nueva página o entrada en la que puedes poner un título (ten en cuenta que el título será lo que aparezca en el menú que estas creando, cada nueva página que hagas se corresponderá con cada una de las secciones del menú que vas a hacer)

Dirección web: Esta opción se usa para enlazar una sección del menú a una dirección web concreta, de una entrada u otra pagina.

El otro menú desplegable tiene 3 opciones:

Pestañas principales (que es la opción que nosotros vamos a elegir)
Enlaces laterales (para poner el menú en el lateral del blog)
No mostrar (esta opción es para cuando no quieres que aparezca ningún menú)




La página principal te aparece por defecto y lleva a la home de tu blog, puedes editarla para cambiarle el nombre por inicio o home (o cualquier otro).

Para hacer las secciones haz click en página nueva/ Página en blanco. Rellena el título y el contenido y haz click en publicar. A medida que vas creando páginas te aparecerán nuevos recuadros que puedes editar borrar o cambiar a borrardor. 

Cuando hayas hecho todas las páginas del menú tienes que hacer click en Guardar Disposición.

Si todo ha ido bien ahora ya tienes tu nuevo menú en el blog que aparecerá justo debajo de la cabecera.



Como personalizar botones de Compartir de Blogger ♪ ☆

lunes, junio 21, 2021 0 Comments
Blogger por defecto nos da unos botones para compartir algo feos, o en lo personal a mi no me agradan mucho, y me imagino que a ti tampoco por eso estas aquí, así que hoy vamos a aprender como eliminar esos botones y cambiarlos por otros mas lindos.

Yo he hecho algunos que si los quieres solo basta con pinchar en descargar. Pero tu puedes utilizar los que ha ti te gusten, solo necesitaras tener a la mano la URL de cada imagen.



Paso 1. Lo primero que tienes que hacer es ir a >diseño, y en entradas de Blog pinchar >editar, ahora vamos a desmarcar la opción >Mostrar los botones para compartir y guardamos.

Paso 2. Vamos a platilla> editar HTML y buscamos este código <div class='post-footer'>
tal vez encuentras dos, el que buscamos es el segundo, ahora justo debajo de eso pegamos este otro.

 <!-- AddThis Button BEGIN -->

<div class='addthis_toolbox'>

<div class='custom_images'>

<a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCB7gfPOhzeGNSs7JZUglxGKWJ3ILb9i5KgY313GnyU6VfqmT4lVBvn75Rh9KjhLnW95efrDnRwhdegGP_7k0ha_x7WQlcrluaDbLwuNrdup_sePUUs2D1G1wMUccXfW1jJWgEAg7hybY/s1600/Share+this+Post.png'/></a>

<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpCrc6zgXDUL75lCBlstzjyYO4I5dWNPx7zFVrN8SgjUelCfD8kgaSZJVkSuuvJsSQ_fwChSxinigHJD-2Snt_UfZrzsb_UOybjdu1ZYveCeaSBsKS_Ejrfe_oMr5bGrqSidhk95f0dImN/s1600/Facebook+Button+Share.png' width='30'/></a>

<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFtT3WqtlNf6Es7eU-BjgI-GK0sTyhLT4H4FKu8Ja6w9DjvBcyvbwgxMmvKKWezxETn6Iby2y-NE4P1W65CBhGzOe2WhiWnbWzUfAPo5-GThBVmTKgUswN14aQuWzKQ9dRzwKPZ-9eD7C/s1600/Twitter+Button+Share.png' width='30'/></a>

<a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFsPy0AnIIxziETIB-GILB6BInuc9j9q9HB1YhH5QBd5OsQUHVnoCMBO4wViyLfXtIHoEUBJbUsAnP6JIw1N5f9_tTwOuJ664_nlK1UzVHDGge4V6wa-oaz6c6GyUc-goRf0MJqSb7J2u/s1600/Email+Button+Share.png' width='30'/></a>

<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQp-6k2dkYPQx-WgjlHBZZuGLBHPjzxLfPnjhN7eSUreAgkfUpZusJuoMWANMIhDg7azrrSHvFBytJgHUSMRlHPohsxQIzFGJ1RIs_dcFImMntKZPOiAWrFc4atKmPBPwo9wFcQn1QNarM/s1600/Pinterest+Button+Share.png' width='30'/></a>

<a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vsD7ddHdR2miHBOwtlXnm4P6q9OV8wtX4zyzsLuiSxc2-ZEXLkmq7o0ar7GGC387ubx4jz1TDs0POO5rrUxTMbDhF1_9u-8Nq9yxYYa8rIy-pW-_nX8eQ85pfBsYJehrTH8k4NaXfjb4/s1600/Google+Plus+Share.png' width='30'/></a>

<a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtF5IEZyFgONp1Bxqus85L7-aLI5OgXMA6v_qcKXDTyfheHj_cuRlTIwWZEj1oSAYRXg3NbCWh0njvoBw3NPsPQIEXoe-nQkBkl8AKxz5jj6ZpV-SXzNAda6fXVSOZeQdtsFer6HV2iR4/s1600/Tumblr+Icon.png' width='30'/></a>

</div>

</div>

<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>

<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>

<!-- AddThis Button END -->


NOTA 2: Ahora si queremos cambiar de posición como (center, left o right), solo tenemos que agregar lo que está en amarillo justo después de .

<!-- AddThis Button BEGIN -->
<div style="text-align: center;">
Todo el contenido

Y cerramos con esto </div>justo antes de <!-- AddThis Button END -->

Sabes que me ayudas mucho si lo compartes, habrá otras personas que no les gustan esos botones feos de Blogger.



Si deseas colocar los botones mediante el codigo HTML/JavaScript este seria el codigo:


<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCB7gfPOhzeGNSs7JZUglxGKWJ3ILb9i5KgY313GnyU6VfqmT4lVBvn75Rh9KjhLnW95efrDnRwhdegGP_7k0ha_x7WQlcrluaDbLwuNrdup_sePUUs2D1G1wMUccXfW1jJWgEAg7hybY/s1600/Share+this+Post.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpCrc6zgXDUL75lCBlstzjyYO4I5dWNPx7zFVrN8SgjUelCfD8kgaSZJVkSuuvJsSQ_fwChSxinigHJD-2Snt_UfZrzsb_UOybjdu1ZYveCeaSBsKS_Ejrfe_oMr5bGrqSidhk95f0dImN/s1600/Facebook+Button+Share.png' width='30'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFtT3WqtlNf6Es7eU-BjgI-GK0sTyhLT4H4FKu8Ja6w9DjvBcyvbwgxMmvKKWezxETn6Iby2y-NE4P1W65CBhGzOe2WhiWnbWzUfAPo5-GThBVmTKgUswN14aQuWzKQ9dRzwKPZ-9eD7C/s1600/Twitter+Button+Share.png' width='30'/></a>
<a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFsPy0AnIIxziETIB-GILB6BInuc9j9q9HB1YhH5QBd5OsQUHVnoCMBO4wViyLfXtIHoEUBJbUsAnP6JIw1N5f9_tTwOuJ664_nlK1UzVHDGge4V6wa-oaz6c6GyUc-goRf0MJqSb7J2u/s1600/Email+Button+Share.png' width='30'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQp-6k2dkYPQx-WgjlHBZZuGLBHPjzxLfPnjhN7eSUreAgkfUpZusJuoMWANMIhDg7azrrSHvFBytJgHUSMRlHPohsxQIzFGJ1RIs_dcFImMntKZPOiAWrFc4atKmPBPwo9wFcQn1QNarM/s1600/Pinterest+Button+Share.png' width='30'/></a>
<a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vsD7ddHdR2miHBOwtlXnm4P6q9OV8wtX4zyzsLuiSxc2-ZEXLkmq7o0ar7GGC387ubx4jz1TDs0POO5rrUxTMbDhF1_9u-8Nq9yxYYa8rIy-pW-_nX8eQ85pfBsYJehrTH8k4NaXfjb4/s1600/Google+Plus+Share.png' width='30'/></a>
<a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtF5IEZyFgONp1Bxqus85L7-aLI5OgXMA6v_qcKXDTyfheHj_cuRlTIwWZEj1oSAYRXg3NbCWh0njvoBw3NPsPQIEXoe-nQkBkl8AKxz5jj6ZpV-SXzNAda6fXVSOZeQdtsFer6HV2iR4/s1600/Tumblr+Icon.png' width='30'/></a>
</div>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END --></script>




domingo, 20 de junio de 2021

Como poner un Icono u Imagen en tu Lista de Etiquetas ♪ ☆

domingo, junio 20, 2021 3 Comments



Para hacer este tutorial debemos de tener activo el gadget de etiquetas.

Para hacerlo vamos a → 
Diseño → 
Agregar gadget →
Etiquetas

En título puedes colocar el nombre que quieras
  1. Vamos a etiquetas seleccionadas
  2. Clic en editar (Esto es para no colocar todas las etiquetas en el blog, debemos de seleccionar las que más importancia tienen.)
  3.  Clic en Lista *importante!
  4.  Guardar.




Ya tenemos instaladas las etiquetas en nuestro blog, si vamos a verlas se ven normales y lo que queremos en este tutorial es colocarle un botón para mejorar su aspecto.

Así que copiamos este código:

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(URL de tu botón) no-repeat center left;
}


1. Vamos a Plantilla → Editar HTML
2. Ctrl+f (para buscar) y buscamos </b:skin>
3. Pegar antes de </b:skin> el código que hemos copiado.
***Donde dice URL del botón: debemos de pegar la url de nuestra imagen  botón

Y guardamos plantilla


Y listo!!

Nota: *** En padding-left, Nos indica cuanto espacio colocamos entre el borde izquierdo y las etiquetas

Aquí el ejemplo de este blog:






#Label1 li { list-style:none; padding-left: 33px; background: transparent url(http://dl6.glitter-graphics.net/pub/683/683156k6a7w9s3pn.gif) no-repeat center left; }






Modificar y Personalizar el buscador de un Blog ♪ ☆

domingo, junio 20, 2021 0 Comments

Aquí les enseñaremos un tutorial blogger para personalizar el buscador de blogger algo imprescindible para cualquier blog.




Seguramente si lo tienes puesto estará así:


Vamos a diseñar de forma original nuestro buscador de blogger!!


1. Lo primero que haremos es ir a nuestro blog/ plantilla y personalizar.

2. Nos saldrá esta página y le damos a añadir CSS

Y ahora simplemente añadimos este código para personalizar el buscador;

input.gsc-input {
color: #ffffff;
font-size: 14px;
height: 25px;
background: #eeabb2;
border-radius: 20px;


La línea número 2 es el color de texto puedes elegir el color que que quieras simplemente quitando el código #ffffff; y poner el color que más te guste. 

El número 3 es el tamaño del texto si lo queréis más grande o más pequeño simplemente cambiáis el 14px.

La línea número 5 es el color del fondo del buscador, puedes cambiar el color igual que antes simplemente eligiendo el codigo de color deseado

La línea número 6 es el redondeo que tiene el buscador, si no lo  quieres redondeo simplemente le pones 0.

En algunas líneas no se ha puesto nada porque simplemente no se pueden modificar.

3. Cuando tengamos el código simplemente lo pegamos y le damos  aplicar al blog y  así queda.







Contador visitas gratis ♪ ☆

domingo, junio 20, 2021 0 Comments

 Configuración rápida un análisis efectivo. Contador de visita gratis sin necesidad de registro

Todosloscontadores son ahora HTTPS (SSL)y asíncrona de javascript para mejorar el tiempo de carga de tus web, puede utilizarlos en todo el establecimiento, https.

Si lo desea, puede cambiar sus códigos antiguos, simplemente mediante la adición de la letra "S" al final de http; Ejemplo: "http" > "https".

Aquí un ejemplo de los mas de 100 modelos que encontrara en la siguiente pagina...

https://www.contadorvisitasgratis.com  (Copia y pega la dirección electrónica en tu buscador)



sábado, 19 de junio de 2021

Flecha u imagen para subir la pantalla al inicio en un blog ♪ ☆

sábado, junio 19, 2021 0 Comments
Hoy les traigo un tutorial blogger para poner una flecha-imagen "Subir " en blogger, el tutorial es muy corto y fácil.



1. Lo primero que tenemos que hacer es tener la imagen para subir. 

2. Necesitamos la url de nuestra imagen por lo que la imagen que hemos recortado la subimos a blogger en una entrada cualquiera , también se puede hacer con pinterest... pero suelen dar más problemas.

3. Cuando tengamos la imagen subida nos vamos al post, pinchamos con el botón derecho y le damos a "Abrir enlace en una pestaña nueva" y copiamos la url de la pagina que se nos abre.

4. Cuando tenemos la url simplemente sustituimos en este código, mi url por la tuya:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthLfaaCvhfybTTbRC2cXzgS0d-wCf7UQKixlnTxB_BMcHyQGR42_AVSmdkBMls5olar5yrwqAXYRqU74G9GuXeuTdGq4RdEb3YxNTDE5whUj9NkNbGzzjIacQazs5vesaOm-vFVd2FoI/s1600/boton-subir.png" /></a>

Bueno si quieres usar la misma imagen lo puedes dejar asi así.

5. Copiamos el código y nos vamos a Escritorio/añadir un gadget/Html y javascrip/ pegamos el codigo, guardar y listo.


Aquí les muestro el ejemplo:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipLAtdayy1dpwVcLbk53JZQQp1X4KzqTQsGhy5vg-rUutnZ35yxYa-HKyz4YohWuDoWC8V_sWzSDiPbrdbGZZZpDUH9YaHtB9Du7hyphenhyphenwXDGSaFHuM6uWtgKzvP7Tts8y6-zjMjns0OM4yc/s104/3PREmYs.gif" /></a>


Aquí  el ejemplo de mi blog:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bae39085-068a-47b9-8ffe-333403752e5b/d46keah-81ad3357-78fb-4713-a2fa-d47d2b4ea4ac.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2JhZTM5MDg1LTA2OGEtNDdiOS04ZmZlLTMzMzQwMzc1MmU1YlwvZDQ2a2VhaC04MWFkMzM1Ny03OGZiLTQ3MTMtYTJmYS1kNDdkMmI0ZWE0YWMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NarMRxyBFefIv4wqUP_y6_oDHHVOdEbdPo2W9tn1BPY" /></a>









Como Colocar en el Cursor de tu Blog Destellos o Lluvia de Estrellas ♪ ☆

sábado, junio 19, 2021 0 Comments

Esta es una forma muy peculiar de adornar el cursor, y en cierto modo la página. Se trata de hacer que salgan destellos del cursor cuando éste se mueve y se van esparciendo y cayendo con forme se sigue moviendo.

Puedes ver un ejemplo en esta página. Cuando cargue la página mueve el cursor a donde quieras y verás cómo salen y caen los destellos del mouse; entre más muevas el cursor más destellos saldrán.

Para poner este efecto del cursor en tu blog, entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;

/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
En var colour="#FFFFFF"; modifica el color de los destellos, en este caso son blancos pero puedes cambiarlos por el color que quieras, sólo te recomiendo que sea un color que contraste con el fondo del blog para que pueda apreciarse.

De esta forma puedes crear un ambiente "mágico" en tu blog.

A continuacion te proporcionamos el conversor de color gratuito le brinda los valores hexadecimales de sus colores RGB y viceversa (RGB a HEX). Úselo para convertir sus colores y preparar sus gráficos y páginas web HTML.

Para usar el convertidor, no use el símbolo '#'. ( Ej: 3333CC se convierte a rojo: 51 verde : 51 azul: 20

Palabras clave de color SVG

La siguiente tabla proporciona una lista de los colores X11 [X11COLORS] admitidos por los navegadores populares con la adición de variantes grises / grises de SVG 1.0. La lista resultante es exactamente la misma que la de los nombres de palabras clave de colores de SVG 1.0 . Las dos muestras de color de la izquierda ilustran la configuración del color de fondo de una celda de la tabla de dos maneras: la primera columna usa el valor de color con nombre y la segunda columna usa el valor de color numérico respectivo.

Nombre del color - RGB hexagonal

Alice azul   #f0f8ff

blanco antiguo   #faebd7

agua  #00ffff

aguamarina #7fffd4

azur #f0ffff

beige #f5f5dc

sopa de mariscos #ffe4c4

negro #000000

blanchedalmond #febcd

azul #0000ff

Violeta Azul #8a2be2

marrón #a52a2a

burlywood #deb887

cadete azul #5f9ea0

monasterio #7fff00

chocolate #d2691e

coral #ff7f50

azul aciano #6495ed

seda de maiz #fff8dc

carmesí #dc143c

cian #00ffff

azul oscuro #00008b

cian oscuro #008b8b

varilla de oro oscura #b8860b

gris oscuro #a9a9a9

verde oscuro #006400

gris oscuro #a9a9a9

caqui oscuro #bdb76b

darkmagenta #8b008b

verde oliva oscuro #556b2f

naranja oscuro #ff8c00

orquídea oscura #9932cc

rojo oscuro #8b0000

salmón oscuro #e9967a

verde oscuro #8fbc8f

azul oscuro #483d8b

gris oscuro #2f4f4f

darkslategrey #2f4f4f

turquesa oscuro #00ced1

Violeta oscuro #9400d3

Rosa profundo #ff1493

Depskyblue #00bfff

dimgray #696969

dimgrey #696969

dodgerblue #1e90ff

ladrillo refractario #b22222

floral blanco #fffaf0

bosque verde #228b22

fucsia #ff00ff

Gainsboro #dcdcdc

fantasma blanco #f8f8ff

oro #ffd700

vara de oro #daa520

gris #808080

verde #008000

verde amarillo #adff2f

gris #808080

gotas de miel #f0fff0

Rosa caliente #ff69b4

indio rojo #cd5c5c

índigo #4b0082

Marfil #fffff0

caqui #f0e68c

lavanda #e6e6fa

lavanda rubor #fff0f5

verde césped #7cfc00

gasa de limón #fffacd

azul claro #add8e6

coral claro #f08080

cian claro #e0ffff

dorado claro #fafad2

gris claro #d3d3d3

verde claro #90ee90

gris claro #d3d3d3

Rosa claro #ffb6c1

salmón ligero #ffa07a

verde claro #20b2aa

cielo azul claro #87cefa

luces grises #778899

luces grises #778899

azul claro # b0c4de

amarillo claro # ffffe0

Lima #00ff00

verde lima #32cd32

lino #faf0e6

magenta #ff00ff

granate #800000

mediumaquamarine #66cdaa

azul medio #0000cd

orquídea mediana #ba55d3

mediumpurple #9370db

medio verde #3cb371

medio pizarra azul #7b68ee

medio primaveral #00fa9a

medio turquesa #48d1cc

medio violeta #c71585

medianoche azul #191970

crema de menta #f5fffa

mistyrose #ffe4e1

mocasín #ffe4b5

navajowhite #ffdead

Armada #000080

Oldlace #fdf5e6

aceituna #808000

verde oliva #6b8e23

naranja # ffa500

rojo naranja # ff4500

orquídea #da70d6

varilla de oro pálido #eee8aa

Verde pálido #98fb98

paleturquesa #afeeee

pálido violeta #db7093

papayawhip #ffefd5

melocotón #ffdab9

Perú #cd853f

Rosa #ffc0cb

ciruela #dda0dd

azul pálido #b0e0e6

púrpura #800080

rojo #ff0000

marron rosado #bc8f8f

azul real #4169e1

silla de montar #8b4513

salmón #fa8072

marrón arenoso #f4a460

Mar verde #2e8b57

concha #fff5ee

tierra de siena #a0522d

plata #c0c0c0

cielo azul #87ceeb

pizarra azul #6a5acd

gris pizarra #708090

pizarra gris #708090

nieve #fffafa

primavera verde #00ff7f

azul acero #4682b4

broncearse #d2b48c

verde azulado #008080

cardo #d8bfd8

tomate #ff6347

turquesa #40e0d0

Violeta #ee82ee

trigo #f5deb3

blanco #ffffff

humo blanco #f5f5f5

amarillo #ffff00

amarillo verde # 9acd32

Ahora les mostrare y verán que una parte del código dice random en este caso "random" da destellos en diferentes colores, dando un hermoso estilo multicolor. 

Primero van a ir a: Blogger > Diseño > Agregar un gadget, en la ventana que les aparezca elegirán la opción HTML/JavaScript, una vez abierto el editor pegarán el siguiente código:


<script type="text/javascript">
  // <![CDATA[
  var colour="random";
  var sparkles=100;

  /****************************
  *  Tinkerbell Magic Sparkle *
  *(c)2005-12 mf2fm web-design*
  *  http://www.mf2fm.com/rv  *
  * DON'T EDIT BELOW THIS BOX *
  ****************************/
  var x=ox=400;
  var y=oy=300;
  var swide=800;
  var shigh=600;
  var sleft=sdown=0;
  var tiny=new Array();
  var star=new Array();
  var starv=new Array();
  var starx=new Array();
  var stary=new Array();
  var tinyx=new Array();
  var tinyy=new Array();
  var tinyv=new Array();

  window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
      var rats=createDiv(3, 3);
      rats.style.visibility="hidden";
  rats.style.zIndex="999";
      document.body.appendChild(tiny[i]=rats);
      starv[i]=0;
      tinyv[i]=0;
      var rats=createDiv(5, 5);
      rats.style.backgroundColor="transparent";
      rats.style.visibility="hidden";
  rats.style.zIndex="999";
      var rlef=createDiv(1, 5);
      var rdow=createDiv(5, 1);
      rats.appendChild(rlef);
      rats.appendChild(rdow);
      rlef.style.top="2px";
      rlef.style.left="0px";
      rdow.style.top="0px";
      rdow.style.left="2px";
      document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
  }}

  function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
      ox=x;
      oy=y;
      for (c=0; c<sparkles; c++) if (!starv[c]) {
        star[c].style.left=(starx[c]=x)+"px";
        star[c].style.top=(stary[c]=y)+"px";
        star[c].style.clip="rect(0px, 5px, 5px, 0px)";
        star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
        star[c].style.visibility="visible";
        starv[c]=50;
        break;
      }
    }
    for (c=0; c<sparkles; c++) {
      if (starv[c]) update_star(c);
      if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
  }

  function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
      stary[i]+=1+Math.random()*3;
      starx[i]+=(i%5-2)/5;
      if (stary[i]<shigh+sdown) {
        star[i].style.top=stary[i]+"px";
        star[i].style.left=starx[i]+"px";
      }
      else {
        star[i].style.visibility="hidden";
        starv[i]=0;
        return;
      }
    }
    else {
      tinyv[i]=50;
      tiny[i].style.top=(tinyy[i]=stary[i])+"px";
      tiny[i].style.left=(tinyx[i]=starx[i])+"px";
      tiny[i].style.width="2px";
      tiny[i].style.height="2px";
      tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
      star[i].style.visibility="hidden";
      tiny[i].style.visibility="visible"
    }
  }

  function update_tiny(i) {
    if (--tinyv[i]==25) {
      tiny[i].style.width="1px";
      tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
      tinyy[i]+=1+Math.random()*3;
      tinyx[i]+=(i%5-2)/5;
      if (tinyy[i]<shigh+sdown) {
        tiny[i].style.top=tinyy[i]+"px";
        tiny[i].style.left=tinyx[i]+"px";
      }
      else {
        tiny[i].style.visibility="hidden";
        tinyv[i]=0;
        return;
      }
    }
    else tiny[i].style.visibility="hidden";
  }

  document.onmousemove=mouse;
  function mouse(e) {
    if (e) {
      y=e.pageY;
      x=e.pageX;
    }
    else {
      set_scroll();
      y=event.y+sdown;
      x=event.x+sleft;
    }
  }

  window.onscroll=set_scroll;
  function set_scroll() {
    if (typeof(self.pageYOffset)=='number') {
      sdown=self.pageYOffset;
      sleft=self.pageXOffset;
    }
    else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
      sdown=document.body.scrollTop;
      sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
      sleft=document.documentElement.scrollLeft;
      sdown=document.documentElement.scrollTop;
    }
    else {
      sdown=0;
      sleft=0;
    }
  }

  window.onresize=set_width;
  function set_width() {
    var sw_min=999999;
    var sh_min=999999;
    if (document.documentElement && document.documentElement.clientWidth) {
      if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
      if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
    }
    if (typeof(self.innerWidth)=='number' && self.innerWidth) {
      if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
      if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
    }
    if (document.body.clientWidth) {
      if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
      if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
    }
    if (sw_min==999999 || sh_min==999999) {
      sw_min=800;
      sh_min=600;
    }
    swide=sw_min;
    shigh=sh_min;
  }

  function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    return (div);
  }

  function newColour() {
    var c=new Array();
    c[0]=255;
    c[1]=Math.floor(Math.random()*256);
    c[2]=Math.floor(Math.random()*(256-c[1]/2));
    c.sort(function(){return (0.5 - Math.random());});
    return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
  }
  // ]]>
  </script>






Popular