blogger Header con radius abajo. html y css

18:06 – by Julio



Codigo html para crear el header o div:

<div class="header">
  <h1>Header</h1>
  <p>Mi texto y mas texto y mas texto</p>
</div>

style="color:#ffffff;" dentro de <h3> quedaria asi: <h3 style="color:Navy;">titulo</h3>)


Codigo css para el diseno: codigo css: Va antes de: ]]></b:skin> en plantilla.

/* Header/Logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: linear-gradient(#ff9d2f, #ff6126);
  color: white;
  font-size: 30px;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

Nota: color: white; pueden cambiarlo por color:#333333; y etc.

Blogger header con linea o curva en la parte de abajo css y html

20:59 – by Julio

blogger fondo de header con titulo y subtitulo. Header con flecha en la parte de abajo con css y html.

Pueden agregar el codigo css al Header existente, o crean un nuevo div. 

codigo css: Va antes de: ]]></b:skin> en plantilla.

/* banner o header mio */

.headermio {

  padding: 20px;

  text-align: center;

  background: linear-gradient( #ffde66, #ffb600);

  color: black;

  font-size: 18px;

clip-path: polygon(0 0, 100% 0, 100% 84%, 64% 84%, 50% 100%, 36% 84%, 0 84%);

}

Nota: color: black; pueden cambiarlo por color:#ffffff; y etc.

 Codigo html o div:

<!--Header mio -->
  <div class='headermio'>
  <h3>Header</h3>
  <p>My supercool header</p>
</div>

(para cambiar color a titulo h3, agregan: style="color:#ffffff;" dentro de <h3> quedaria asi: <h3 style="color:Navy;">titulo</h3>)

Codigo css para mostrar nuevo header o div solo en pagina de inicio:

codigo css: Va antes de: ]]></b:skin> en plantilla.

body:not(.home) .headermio {

display: none

}

Galeria de imagenes con html y css

16:52 – by Julio


En la plantilla de blogger, editar html buscan: b:skin> y justo antes pegan el codigo css para el estilo de la galeria (esto se aplicara a todas las galeria que quieran crear en cada post.)

Para buscar en la plantilla control f y escriben o pegan la palabra a buscar.


codigo css:

/*---galeria de imagenes-----*/

/* START SIMPLE RESPONSIVE GALLERY XOMISSE */
.gallery {
    padding: 0 3px;
    float: left;
    width: 23.99999%; /*--esto modifica el ancho de imagenes para que quepan en la entrada--*/
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.gallery img:hover {
    opacity: 0.8;
}

div.desc {
    padding: 10px;
    text-align: center;
}

* {
    box-sizing: border-box: 1px;
}

@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}

.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
/* END SIMPLE RESPONSIVE GALLERY XOMISSE */ 

Luego copian y pegan el codigo html para la galeria en cada entrada, post o pagina que quieran.

codigo html:

 <div class="gallery">
      <img alt="SEO-IMAGE-CAPTION" src= "link imagen 1"/>

  </div>

<!--Grid Image Gallery-->
  <div class="gallery">
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 2" />
  </div> 

  <!--Clickable Grid Image Gallery-->
  <div class="gallery">
    
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 3" />
   
  </div>

  <!--Clickable Grid Image Gallery with Caption-->
  <div class="gallery">
    
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 4" />
   
    <div class="desc"></div>
  </div>

Para agregar mas imagenes, solo cipien y peguen este codigo:

<div class="gallery">
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 1/>
  </div>

<!--Grid Image Gallery-->
  <div class="gallery">
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 2" />
  </div> 

  <!--Clickable Grid Image Gallery-->
  <div class="gallery">
    
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 3" />
   
  </div>

  <!--Clickable Grid Image Gallery with Caption-->
  <div class="gallery">
    
      <img alt="SEO-IMAGE-CAPTION" src="link imagen 4" />
   
    <div class="desc"></div>
  </div>



Formulario de contacto para blogger gratis | formulario de contacto html

21:37 – by
En este post, te ayudare a crear un formulario de contacto paso a paso, este sera un formulario básico, con encabezado, nombre y correo electrónico. en la pagina web que te comparto hay muchos diseños predefinidos, pero en este caso te explicare como crear uno y con el tiempo puedes perfeccionar el tuyo a tu manera. Lo que mas me gusta de este formulario es que cuando creas una cuenta, tu correo queda registrado para que puedas recibir notificaciones cuando alguien llena tu formulario y lo envía. 

 Paso 1: entra a jotform crea una cuenta con tu email. Después de haber creado tu cuenta, selecciona: crear formulario

Paso 2. Selecciona comenzar desde cero para crear tu propio formulario. (para seleccionar una plantilla lista, selecciona la otra opción.
Paso 3. Selecciona formulario clásico, es el que normalmente se usa. (si quieres que tu formulario sea dinámico o como un slider, selecciona la otra opción.
Paso 4. Ya estamos en la pagina principal donde crearemos nuestro formulario, este es el espacio de trabajo, puedes agregar todo el widget que necesites, no hay limite. Para este ejemplo solo utilize tres. 
Paso 5. Agregar widgets! en el signo mas (agregar elemento) se encuentra todo lo que se puede agregar en el formulario. 
Paso 6. En elementos de formulario hay 3 opciones, Basico, Pagos y widgets.
Pagos: con esta opción puedes aceptar pagos desde tu blog.

Widgets: una imagen habla mas que mil palabras. puedes ver y buscar dentro de todos los widgets disponibles y agregarlo a tu formulario si es necesario.

Selecionando el widget o elemento que agregaste, te aparecera la opcion editar, herramientas y borrar. Para cambiar de lugar un elemento, simplemente arrastralo.

Paso 7: En ajustes, puedes seleccionar la opción de notificación que mejor te convenga, por defecto esta registrado tu correo en CORREOS.



Paso 8: Este es el ultimo paso y es para publicar el formulario, hay varias opciones, así que puedes escoger el que mas te guste. En lo personal, prefiero Script. (insertar)




Este es el resultado del formulario de contacto simple y basico:

Cada formulario que se crea en jotform, es unico y no se puede compartir el código html para que otros puedan utilizarlo.
Suscribirse a: Comentarios (Atom)