CÓDIGO todo CÓDIGO

Es un blog de ayuda para poder personalizar nuestra web o blog.

Páginas

Inicio
PROBADOR
CHAT

ARTÍCULOS POR CATEGORIAS▼

BLOGGER▼

Todas las entradas de la categorìa

PARA MOSTRAR UN ÍNDICE POR ETIQUETAS
Crear dos columnas de texto
Cargar y usar en tu blog fuentes de iconos
Centrar un elemento o contenedor sin la etiqueta Center
OCULTAR "Mostrando entradas con la etiqueta..."
CENTRAR LA CABECERA DEL BLOG
INDICE POR ETIQUETAS DESPLEGABLE
REDONDEAR UNA IMAGEN EN VUESTRO BLOG
¿DONDE ESTÁN LOS ESTILOS(CSS) EN BLOGGER?
ABRIR TODOS LOS ENLACES EN NUEVA VENTANA
LA FECHA ACTUALIZADA DONDE QUIERAS ( y en castellano)
OCULTAR ELEMENTOS EN ZONAS DEL BLOG
JUSTIFICAR EL TEXTO SIEMPRE EN LAS ENTRADAS
UNA IMAGEN COMO TÍTULO DE UN GADGET
PERSONALIZAR TODOS LOS GADGET DE LA SIDEBAR
MODIFICAR EL ESTILO DE UN GADGET
Como colocar código CSS
Subrayar texto en blogger
Gadget para que nos enlacen
Insertar imágenes en los títulos de las entradas
Colocar imagen de fondo a una entrada
Centrar la imagen en el gadget de Blogger “Imagen”

CSS▼

Todas las entradas de la categorìa

FLEX reparte el espacio
TEXTOS EN CAJAS RECONDEADAS
Ejemplo de FLEXBOX
Centrar un elemento o contenedor sin la etiqueta Center
CLIC PARA VER CONTENIDO ( de lo más simple)
REDONDEAR UNA IMAGEN EN VUESTRO BLOG
¿DONDE ESTÁN LOS ESTILOS(CSS) EN BLOGGER?
Anotaciones dentro del código CSS
Un ejemplo de tratamiento de imágenes con CSS
MAX width, MIN width
JUSTIFICAR EL TEXTO SIEMPRE EN LAS ENTRADAS
UNA IMAGEN COMO TÍTULO DE UN GADGET
PERSONALIZAR TODOS LOS GADGET DE LA SIDEBAR
MODIFICAR EL ESTILO DE UN GADGET
IMÁGENES RESPONSIVE CON CSS
LAS HOJAS DE ESTILO
Texto siempre Justificado
Como colocar código CSS
ENLACE CON MENSAJE EMERGENTE
Subrayar texto en blogger
Colocar imagen de fondo a una entrada

ENLACES▼

Todas las entradas de la categorìa

ABRIR TODOS LOS ENLACES EN NUEVA VENTANA
TIPO DE ENLACES
ENLACE CON MENSAJE EMERGENTE
Enlaces a secciones de la misma página
Gadget para que nos enlacen
Colocar enlaces o links en el blog

HTML▼

Todas las entradas de la categorìa

TEXTOS EN CAJAS RECONDEADAS
Un Enlace Especial
Ejemplo de FLEXBOX
UN LINK CON ESTYLO
Crear dos columnas de texto
Centrar un elemento o contenedor sin la etiqueta Center
CLIC PARA VER CONTENIDO ( de lo más simple)
REDONDEAR UNA IMAGEN EN VUESTRO BLOG
Para ocultar y mostrar texto con un click
ABRIR TODOS LOS ENLACES EN NUEVA VENTANA
Otra forma de presentar tus enlaces
Formateo de un texto en HTML
HACER UNA PAGINA WEB
Letra capital
CAMBIAR DE COLOR EL TEXTO AL PASAR EL RATON
LAS HOJAS DE ESTILO
Utilización de las capas DIV
TABLAS
Apuntes dentro del codigo
CARACTERES ESPECIALES
ETIQUETAS IFRAME
Texto en movimiento
Enviar a un formulario de email
TIPO DE ENLACES
TAMAÑO DE LAS IMAGENES
INTRODUCIR UNA IMAGEN O FOTO
HACER UN BOTON
Una caja para introducir texto
TEXTO EN UN MARCO
Tratamiento de letras
Enmarcar Texto
VENTANAS AL EXTERIOR
Insertar imágenes en los títulos de las entradas
Colocar imagen de fondo a una entrada

IMAGENES▼

Todas las entradas de la categorìa

REDONDEAR UNA IMAGEN EN VUESTRO BLOG
Un ejemplo de tratamiento de imágenes con CSS
IMÁGENES RESPONSIVE CON CSS
TAMAÑO DE LAS IMAGENES
INTRODUCIR UNA IMAGEN O FOTO
ALINEAR LAS IMAGENES
Insertar imágenes en los títulos de las entradas
Colocar imagen de fondo a una entrada
Centrar la imagen en el gadget de Blogger “Imagen”

ESCRIPT▼

Todas las entradas de la categorìa

PARA MOSTRAR UN ÍNDICE POR ETIQUETAS
Para ocultar y mostrar texto con un click
Otra forma de presentar tus enlaces
LA FECHA ACTUALIZADA DONDE QUIERAS ( y en castellano)

TEXTO▼

Todas las entradas de la categorìa

Crear dos columnas de texto
Cargar y usar en tu blog fuentes de iconos
Formateo de un texto en HTML
Letra capital
CAMBIAR DE COLOR EL TEXTO AL PASAR EL RATON
Texto en movimiento
Tratamiento de letras
Enmarcar Texto
Alinear Textos
Textos Deslizantes dentro de una caja de color
Colocar texto y otros elementos con un fondo de color
Colocar los títulos de las entradas en diferentes colores

CORTAR Y PEGAR▼

Todas las entradas de la categorìa

FELIZ NAVIDAD
Un menú colorido
Un Enlace Especial
UN LINK CON ESTYLO
HORA DE LEER EL PERIODICO

UTILIDADES▼

Todas las entradas de la categorìa

ENLACES DE INTERES
UTILIDADES ONLINE

FELIZ NAVIDAD

EL CÓDIGO▼

<style>
.contenedor {
 background-color: #BE501B;
  padding-top: 50px;/*distancia de la caja de arriba*/

padding-bottom:20px;
width: 100%;
}

.regalo {
  width: 100%;
  margin: 0 auto;
}
.caja, .tapa {
  background:
    -webkit-radial-gradient(white 10%, transparent 15.1%),
    -webkit-radial-gradient(white 7%, transparent 15.1%),
  #0F4652;
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  position: relative;
  margin: 0 auto;
}
.caja {
  width: 80%;
  height: 150px;
}
.tapa {
  width: 80%;
  height: 50px;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
  
  padding: 0 0,05px;
  background-color: #0F4652;
  /* transiciones */
  top: 0;
  left: 0;
  transition: 
    top ease-out 0.5s,
    left ease-out 0.5s,
    transform ease-out 0.5s;
}
.caja span, .tapa span {
  position: absolute;
  display: block;
  background:  rgba(200, 221, 183, 0.8);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
.caja span:first-child {
  width: 100%;
  height: 27%;
  top: 25px;
}
.caja span:last-child, .tapa span {
  width: 17%;
  height: 100%;
  left: 90px;
}
.tapa span {
  left: 90px;
}
.promo {
  font-size: 30px;
  color: #FFFF75;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-align: center;
  position: relative;
  height: 0px;
  top: 10px;
  transition: all ease-out 0.7s;
}
.promo p {
  font-size: 30px;
  margin: 0;
}
.promo h2 {
  font-size: 24px;
  margin: 0;
  color: #FFFF75;
}

/* Efecto hover */
.regalo:hover .tapa {
  top: -100px;
  transform: rotateZ(10deg);
  left: 10px;

}
.regalo:hover .promo {
  top: -80px;
}
</style>

<div class="contenedor">

<div class="regalo">

<div class="tapa">
      <span></span>
    </div>
    <div class="promo">

<p><i>Feliz Navidad</i></p>
    <a href="https://codepen.io/steph_itw/pen/mdrwWpy"target=_blank> <h2><i>Y Próspero Año 2022</i></h2></a>
    </div>
    <div class="caja">
      <span></span>
      <span></span>
    </div>
  </div></div>

Antes de empezar ha realizar cambios en tu plantilla de blogger, sería recomendable hacer una copia de tu plantilla, para ello seleciona la pestaña PERSONALIZAR,luego haz clicl en Copia de Seguridad, seguidamente, se iniciara la descarga de tu plantilla.

Suscribirse a: Entradas ( Atom )

COPIAR Y PEGAR

Feliz Navidad

Y Próspero Año 2022

CÓDIGO todo CÓDIGO

A.M.G. Con la tecnología de Blogger.