Vous souhaitez fidéliser les visiteurs de votre site web et leur proposer une touche d’astrologie quotidienne, sans rien avoir à rédiger ni à maintenir ? Grâce au widget gratuit proposé par Astrovibe, vous pouvez intégrer facilement sur votre site les horoscopes du jour pour les 12 signes du zodiaque, en quelques secondes.
Un widget HTML autonome, simple et responsive
Le widget peut être intégré dans n’importe quel type de site. Il ne nécessite aucun script, ni plugin, ni base de données externe. L’affichage est en trois colonnes responsive, et les liens pointent automatiquement vers les pages du jour pour chaque signe astrologique.
Le widget est entièrement GRATUIT, sans contrepartie, ni inscription. Il peut être adapté au design de votre site (styles, couleurs, polices…).
Mode d’emploi
1. Sur un site WordPress avec l’éditeur Gutenberg
- Connectez-vous à votre interface WordPress.
- Éditez la page ou l’article où vous souhaitez afficher les horoscopes.
- Cliquez sur “+ Ajouter un bloc”.
- Sélectionnez le bloc “HTML personnalisé”.
- Collez le code du widget (fourni ci-dessous) dans ce bloc.
- Mettez à jour ou publiez votre page.
2. Sur un site en HTML classique
- Ouvrez le fichier HTML de la page où vous souhaitez afficher les horoscopes.
- Collez simplement le code du widget à l’endroit désiré dans le
<body>. - Enregistrez et uploadez la page sur votre serveur.
Code HTML du widget à copier-coller
<style>
#liens-horoscope-jour {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
padding: 0 1rem;
}
#liens-horoscope-jour a {
display: block;
text-align: center;
background: linear-gradient(135deg, #2fe2c4 0%, #23a6d5 100%);
color: white;
font-family: ‘Poppins’, ‘Segoe UI’, sans-serif;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 32px;
padding: 0.8rem 1.2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
transition: transform 0.2s ease, background 0.2s ease;
}
#liens-horoscope-jour a:hover {
background: linear-gradient(135deg, #1dd8b4 0%, #209bd2 100%);
transform: translateY(-3px);
}
#credit-astro {
text-align: center;
margin-top: 1.5rem;
font-family: ‘Poppins’, ‘Segoe UI’, sans-serif;
font-size: 0.9rem;
}
#credit-astro a {
color: #23a6d5;
text-decoration: none;
font-weight: 500;
}
</style>
<div id="liens-horoscope-jour"></div>
<div id="credit-astro">
<a href="https://www.astrovibe.fr/horoscope/">Horoscopes du jour</a> fournis par Astrovibe.fr
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const signes = [
"belier", "taureau", "gemeaux", "cancer", "lion", "vierge",
"balance", "scorpion", "sagittaire", "capricorne", "verseau", "poisson"
];
const moisNoms = [
"janvier", "février", "mars", "avril", "mai", "juin",
"juillet", "août", "septembre", "octobre", "novembre", "décembre"
];
const today = new Date();
const jour = today.getDate();
const mois = moisNoms[today.getMonth()];
const annee = today.getFullYear();
const container = document.getElementById("liens-horoscope-jour");
signes.forEach(signe => {
const url = `https://www.astrovibe.fr/horoscope/horoscope-quotidien-${signe}-${jour}-${mois}-${annee}/`;
const label = `Horoscope ${signe.charAt(0).toUpperCase() + signe.slice(1)} du ${jour} ${mois} ${annee}`;
const link = document.createElement("a");
link.href = url;
link.textContent = label;
container.appendChild(link);
});
setTimeout(() => {
const credit = document.querySelector(‘#credit-astro a’);
if (!credit || !credit.href.includes("astrovibe.fr") || !credit.textContent.includes("Horoscopes du jour")) {
document.getElementById("liens-horoscope-jour").innerHTML = "";
document.getElementById("credit-astro").innerHTML = "";
}
}, 1000);
});
</script>
Et voici le résultat en 3 clics !
Conditions d’utilisation
Ce widget est proposé à titre gratuit pour une intégration sans modification.
En l’intégrant à votre site, vous vous engagez à :
- ne pas modifier le code source fourni,
- ne pas supprimer la mention “Horoscopes du jour fournis par astrovibe.fr”,
- et à respecter les règles de bon usage du contenu fourni.
Astrovibe ne pourra être tenu responsable en cas de dysfonctionnement, d’incompatibilité ou d’erreurs liées à l’utilisation ou à une modification du widget sur votre propre site.
Pourquoi ajouter ce widget ?
- Gratuit et librement utilisable
- Fidélisez vos visiteurs !
- Affichage clair et responsive
- Intégration rapide sans développement
- Contenu à forte valeur ajoutée pour vos visiteurs
- Actualisé chaque jour via les liens