COMO INSERTAR EL FORMULARIO DE CONTACTO DE BLOGGER ESTILO MATERIAL DESIGN .

Estabas buscando cambiar el diseño del Formulario de contactos de Blogger, Escaparate digital 2019, te guiara paso a paso en la implementación de un nuevo Formulario de contactos para Blogger estilo Material design.

Un diseño único y sorprendente gracias al rediseño utilizando los poderosos estilos de Material design de Google.

Los pasos son muy simples de realizarlo, tendrá que seguir las instrucciones claras de este tutorial creado exclusivamente para usuarios de Blogger.

El Formulario de contactos es responsive


El diseño del Formulario de contactos es totalmente responsive, se lo puede ver fácilmente desde una PC de escritorio y desde cualquier dispositivo móvil.

IMÁGENES CON DESCRIPCIÓN DESLIZANTE INFERIOR. 

Vamos a ver como añadir un texto que describa una imagen que hemos puesto en el blog, con la particularidad de que esta descripción está oculta. Al pasar el cursor del ratón por encima de la imagen, esta aumenta un poco (con la propiedad transform) y por debajo asoma la descripción estomáticamente.

 Todo esto es posible gracias a la evolución del CSS (llamada CSS3), sin códigos Javascript ni nada de nada.

Aquí tienes un ejemplo con 2 imágenes. Pasa el cursor por encima de ellas:

Para poner este efecto en nuestro blog, lo primero que tenemos es que añadir el CSS en la plantilla, antes de </head>. Lo que está en rojo es el ancho de la descripción, que por lo general tiene que ser igual que el de la imagen.

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

 Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

  Busca el siguiente código

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<style>
.imagepluscontainer{
position: relative;width: 250px;
z-index: 1;
}
.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); color: white;
-moz-border-radius: 0 0 8px 8px;-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
</style>

Una vez hecho esto, cada vez que queráis añadir este efecto en una imagen, ponéis el siguiente código, poniendo la url de la imagen, la descripción y el tamaño donde esta indicado en rojo.

<div class="imagepluscontainer" style=" z-index: 2;">
<img src="URL IMAGEN" height="250" width="250" /><div class="desc">DESCRIPCION</div></div>

Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;                                                                            

IMÁGENES AMPLIADAS CON JQUERY .

Los efectos con JQuery me encantan, y para muestra un botón (una imagen en este caso,).

 En Blogger hace poco que nos han habilitado la opción del "lightbox" en las imagenes, esto es algo parecido pero aun me gusta mas.

 Cuando pasamos el ratón por la imagen, el cursor se convierte en una lupa y al hacer click sobre ella se amplia rápidamente con un efecto suave muy molón.

 Al volver a dar click sobre ella, vuelve a su tamaño original.

Para poner este efecto tan chulo en vuestro blog o web, añadís el siguiente código en vuestra plantilla antes de </head>:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

 Coloca este código en el buscador y dale un "Enter"

</head>

Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/jquery.magnifier.js" type="text/javascript">
/***********************************************
* Imagen amplada con jQuery
REDEANDO - tu blog webmaster
http://redeando.blogspot.com/
***********************************************/
</script>

Una vez hecho esto, ya solo nos queda añadir el siguiente código cada vez que queráis poner una imagen con este efecto. Cambiáis lo que esta en rojo por la url de la imagen y el tamaño y listo.

<img class="magnify" src="URL DE LA IMAGEN" style="height: 200px; width: 200px;" />

Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;                                                            

                                               

IMÁGENES Y TEXTOS CON EFECTO DE DESPLAZAMIENTO CON ENLACES .

Vamos a darle un toque diferente a nuestros enlaces e imagenes utilizando CSS. Este efecto lo que hara es desplazar el enlace o imagen hacia la derecha al pasar el cursor por encima.

Para añadir este efecto en nustro blog o web, primero ponemos el codigo CSS en nuestra plantilla antes de </body> y guardamos.

 Un clic en “Plantilla”

 Un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Busca este código

</body>

Ingresa el siguiente código justo arriba del código que encontraste.

<style>.desplazamiento  {-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;  -webkit-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out;  }.desplazamiento:hover  {margin-left: 25px;padding-left: 5px;}</style>

Una vez hecho esto, cada vez que queramos mostrar un enlace de Texto, ponemos este codigo, modificando lo que esta en Azul:

<a class="desplazamiento" href="URL ENLACE">TEXTO</a>

Y cada vez que queramos mostrar una imagen, ponemos esto:

<a class="desplazamiento" href="URL ENLACE"><img   height="200" src="URL IMAGEN" width="200" /></a>

Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;                                                                     

CREAR UNA GALERÍA DE IMÁGENES TIPO POLAROID .

¿Os gustaria hacer una presentacion con imagenes diferente en vuestra web? Pues esta galeria hecha solo con CSS os va a encantar. 

Las imagenes se muestran como desordenadas, con efectos de superposicion al pasar el cursor y con la forma de las fotos Polaroid. 

Ademas, a cada imagen podemos ponerle un enlace y pueden hacer a la vez de menu. Aqui esta como os quedara una vez añadida, y mas abajo la explicacion de como hacerla.

Para implementar la galeria en nuestra web, primero ponemos los estilos CSS en el <body> de nuestra plantilla.

Si no lo encontraras Busca este otro </body> y el siguiente código colocalo justo por encima

Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Busca este código

</body>

Ingresa el siguiente código justo arriba del código que encontraste.

<style>
ul.gallery {
    list-style: none outside none;
}
ul.gallery li a {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #FFFFFF;
    box-shadow: 0 2px 15px #333333;
    float: left;
    padding: 10px 10px 25px;
    position: relative;
}
ul.gallery li a.pic-1 {
    -moz-transform: rotate(-10deg);
    z-index: 1;
}
ul.gallery li a.pic-2 {
    -moz-transform: rotate(-3deg);
    z-index: 5;
}
ul.gallery li a.pic-3 {
    -moz-transform: rotate(4deg);
    z-index: 3;
}
ul.gallery li a.pic-4 {
    -moz-transform: rotate(14deg);
    z-index: 4;
}
ul.gallery li a.pic-5 {
    -moz-transform: rotate(-12deg);
    z-index: 2;
}
ul.gallery li a.pic-6 {
    -moz-transform: rotate(5deg);
    z-index: 6;
}
ul.gallery li a:hover {
    box-shadow: 3px 5px 15px #333333;
    z-index: 10;
}
</style>

Ahora, solo queda añadir el codigo HTML alli donde queramos mostrar la galeria.

 Cambiamos lo que esta en rojo para añadir las urls de las imagenes y los enlaces. Para cambiar el tamaño modificais donde pone height="150" y width="250".

Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:




 Un clic en “Diseño”

 Clic en “Añadir un gadget”

 Busca el widget que dice “HTML-Javascript” y ábrelo

 Coloca el siguiente codigo en el interior

<ul class="gallery">
<li><a class="pic-1" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-2" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-3" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-4" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-5" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-6" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
</ul>

Despues de haber insertado el código, un clic en  "Guardar"

 Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;