jcduranm
- Seguidores
- 5
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 17 Sep 2014
- Mensajes
- 267
Cómo mostrar saludos o mensajes de buenos días, tardes, tardes, noches automáticamente en un blog.
Agregar saludos dinámicos es una excelente manera de recibir a los visitantes con un mensaje personalizado basado en factores como la hora.
Esto incluye dar saludos como buenos días, buenas tardes, buenas noches en tiempo real, dependiendo de la hora en que visiten el sitio web.
En esta guía, verán cómo mostrar automáticamente estos saludos o mensajes de bienvenida. Por supuesto, lo haremos mediante un código JavaScript sencillo, junto con HTML y CSS.
Paso 1: inicie sesión en su cuenta de Blogger
Paso 2: en el panel de Blogger, vaya a Tema
Paso 3: Ahora haga clic en el ícono desplegable justo al lado del botón "Personalizar" y luego haga clic en "Editar HTML".
Paso 4: busque ]]></b:skin> y pegue el siguiente CSS encima
Paso 5: Busque </body> y pegue el siguiente Javascript encima
Paso 6: Finalmente, copia el código HTML a continuación y colócalo según tus necesidades.
Paso 7: Haga clic en 'GUARDAR' cuando haya terminado y vea los resultados.
Agregar saludos dinámicos es una excelente manera de recibir a los visitantes con un mensaje personalizado basado en factores como la hora.
Esto incluye dar saludos como buenos días, buenas tardes, buenas noches en tiempo real, dependiendo de la hora en que visiten el sitio web.
En esta guía, verán cómo mostrar automáticamente estos saludos o mensajes de bienvenida. Por supuesto, lo haremos mediante un código JavaScript sencillo, junto con HTML y CSS.
Paso 1: inicie sesión en su cuenta de Blogger
Paso 2: en el panel de Blogger, vaya a Tema
Paso 3: Ahora haga clic en el ícono desplegable justo al lado del botón "Personalizar" y luego haga clic en "Editar HTML".
Paso 4: busque ]]></b:skin> y pegue el siguiente CSS encima
CSS:
/* Saludos Dinámicos */
.icono {
width: var(--svg-size, 18px);
height: var(--svg-size, 18px);
stroke: currentColor;
stroke-width: var(--svg-stroke, 2);
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.saludos {
background-color: #ffffff29;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
padding: 12px 15px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.saludos::after {
content: attr(data-text);
}Paso 5: Busque </body> y pegue el siguiente Javascript encima
JavaScript:
<script type='text/javascript'>
/*<![CDATA[*/
/* Saludos Dinámicos */
function saludos() {
var message = ["Dulces Sueños!", "Buenos Días!", "Buenas Tardes!", "Buenas Noches!", "Hora de Dormir!"];
var time = new Date().getHours();
if (time < 4) {
return message[0]; // "Dulces Sueños!"
} else if (time < 12) {
return message[1]; // "Buenos Días!"
} else if (time < 17) {
return message[2]; // "Buenas Tardes!"
} else if (time < 19) {
return message[3]; // "Buenas Noches!"
} else if (time < 22) {
return message[4]; // "Hora de Dormir!"
} else {
return message[0]; // "Dulces Sueños!" para las horas después de las 22, incluyendo después de las 23
}
}
document.querySelector(".saludos").setAttribute('data-text', saludos());
/*]]>*/
</script>Paso 6: Finalmente, copia el código HTML a continuación y colócalo según tus necesidades.
HTML:
<div class="saludos">
<svg class="icono cara-sonriente" viewBox="0 0 24 24">
<path d="M9 9h.01M15 9h.01M8 14q4 4 8 0"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
</div>Paso 7: Haga clic en 'GUARDAR' cuando haya terminado y vea los resultados.
Plus resposive
CSS:
/* Responsive: Pantallas pequeñas (teléfonos) */
@media (max-width: 600px) {
.saludos {
font-size: 12px; /* Texto más pequeño */
padding: 10px 12px; /* Menos padding */
gap: 0.3rem; /* Menor separación */
}
.icono {
--svg-size: 16px; /* Icono más pequeño */
--svg-stroke: 1.5; /* Línea más fina */
}
}
/* Responsive: Pantallas medianas (tabletas) */
@media (min-width: 601px) and (max-width: 900px) {
.saludos {
font-size: 13px; /* Ajuste de tamaño de texto */
padding: 11px 14px; /* Ajuste de padding */
}
.icono {
--svg-size: 17px; /* Ajuste de tamaño de icono */
}
}
/* Responsive: Pantallas grandes */
@media (min-width: 901px) {
.saludos {
font-size: 14px; /* Vuelve al tamaño original */
padding: 12px 15px; /* Vuelve al padding original */
}
.icono {
--svg-size: 18px; /* Icono tamaño original */
}
}
Última edición:
