« Apprenez à créer votre blog de A à Z... dans un monde de douceur et de sucrerie ! 🔮🍬 »

Les Bases
Design & Visuels
Fonctions Magiques

👀 Comment voir le résultat de votre blog en direct ?

Pour tester votre site et voir vos modifications sur votre écran, vous n'avez pas besoin d'être connectées à Internet. Voici la méthode simple.

🖥️ Deux façons de lancer votre site sur votre écran :

🔄 Astuce : Si vous utilisez la méthode classique, n'oubliez pas d'appuyer sur la touche F5 (ou de cliquer sur la flèche qui tourne du navigateur) pour actualiser la page et voir vos nouveaux changements !

📖 Le Dictionnaire du Code (Lexique Anglo-Français)

Faites défiler la boîte ci-dessous pour comprendre les mots anglais du code et savoir quoi modifier !

🎨 Partie CSS (Les styles et décors) :

  • background-color ➔ Couleur de fond. Changez le code après (ex: #ffffff) pour changer la couleur du fond.
  • background-image: url('...') ➔ Image de fond. Mettez le nom de votre image entre les guillemets.
  • font-family ➔ Style d'écriture (la police de caractères).
  • font-size ➔ Taille du texte. Augmentez ou diminuez les pixels (ex: 18px).
  • color ➔ Couleur du texte. Gère uniquement la couleur de l'écriture.
  • width et height ➔ Largeur (Width) et Hauteur (Height) des boîtes ou des photos.
  • border-radius ➔ Bords arrondis. Plus le chiffre est grand, plus les coins sont ronds.
  • margin et padding ➔ Les espaces. Margin = espace extérieur, Padding = espace intérieur.

🧱 Partie HTML (Les balises de contenu) :

  • <header> ➔ L'en-tête. C'est la zone tout en haut pour la grande bannière.
  • <nav> ou .navbar ➔ Barre de navigation (le menu avec les liens).
  • <main> et <aside> ➔ Contenu principal (Articles) et Colonne de côté (Profil et Amis).
  • <a href="..."> ➔ Un lien cliquable. L'adresse se met dans le href.
  • target="_blank" ➔ Ouvrir dans un nouvel onglet pour ne pas perdre votre blog.

💻 Avant de commencer...

Avant de commencer, vous avez besoin de VS Code ou NotePad, mais je vous recommande fortement VS Code pour sa facilité d'utilisation et les couleurs pour différencier le code !

🚀 Pourquoi VS Code (100% Gratuit) va vous changer la vie :

⬇️ Téléchargeable gratuitement sur : ://visualstudio.com

Étape 1 : Le Commencement (Le Squelette Fondateur)

Avant d'ajouter du style ou du texte, chaque page de votre blog doit obligatoirement commencer par copier cette structure de base vide.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sweet Paradise</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Tout le contenu visible de votre page se colle ici --> </body> </html>

Étape 2 : Le Fichier de Décoration Unique (`style.css`)

Créez un fichier nommé exactement style.css. Ce modèle centralise l'identité visuelle de votre site. Vous pouvez modifier les codes couleurs indiqués pour personnaliser l'interface.

💡 Conseil Pro : Dans la zone .card { ... } du code ci-dessous, la règle max-width: 800px; margin: 0 auto; est incluse. Cela force tous vos articles à garder exactement cette même largeur élégante et bien centrée au milieu de votre fond d'écran !

💡 Astuce Couleur : Pour obtenir ce même fond ivoire ultra-doux sur vos articles, remplacez la ligne background: rgba(255, 255, 255, 0.95); par background-color: #faf6ec; dans la zone .card { ... } de votre fichier CSS !

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; /* PALETTE : Dégradé de fond entre la vanille douce et un jaune très clair */ background: linear-gradient(135deg, #f7f1e3, #fff9db); background-attachment: fixed; color: #2d3436; } header { background-image: url('votre-banniere-haut.png'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 450px; max-width: 1300px; width: 95%; margin: 30px auto 0px auto; border-radius: 20px 20px 0 0; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.5rem; text-shadow: 0px 4px 10px rgba(0,0,0,0.3); } .navbar { /* PALETTE : Fond couleur Pêche pour la barre de navigation */ background-color: #ffb142; max-width: 1300px; width: 95%; margin: 0 auto 40px auto; display: flex; justify-content: center; padding: 12px 0; border-radius: 0 0 20px 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .navbar a { color: white; text-decoration: none; padding: 10px 20px; font-weight: bold; font-size: 1.1rem; transition: 0.2s; } .navbar a:hover { /* PALETTE : Le survol passe en couleur Lime (Vert citron clair) */ color: #ccff00; background-color: rgba(255, 255, 255, 0.15); border-radius: 8px; } .card { background: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); margin-bottom: 30px; /* COPIE DE SÉCURITÉ : Garde les articles bien centrés et alignés */ max-width: 800px; margin-left: auto; margin-right: auto; box-sizing: border-box; } footer { background-image: url('votre-banniere-bas.png'); background-size: cover; background-position: center; height: 200px; max-width: 1300px; width: 95%; margin: 50px auto 40px auto; border-radius: 20px; } /* STYLE DES SYMBOLES MODIFIABLES */ .symbole-page { font-size: 24px; /* PALETTE : Icône couleur Aqua (Turquoise d'eau) */ color: #00ced1; margin-right: 8px; display: inline-block; } /* SCROLLBAR ET ZONE AMIS DÉROULANTE */ .zone-amis-scroll { max-height: 200px; overflow-y: auto; padding-right: 5px; } .zone-amis-scroll::-webkit-scrollbar { width: 6px; } .zone-amis-scroll::-webkit-scrollbar-thumb { background: #ffb142; border-radius: 4px; } /* SECTION PROFIL AVATAR */ .profil-box { text-align: center; margin-bottom: 25px; } .profil-avatar { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #ffb142; object-fit: cover; } /* PAGINATION ARTICLES */ .pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .page-btn { background: #ffb142; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; } .page-btn:hover { background: #ccff00; color: #2d3436; } /* ALLUMAGE AUTOMATIQUE DU MENU ACTIVE */ body[id="index-page"] .nav-index, body[id="blog-page"] .nav-blog, body[id="livredor-page"] .nav-livredor, body[id="albums-page"] .nav-albums, body[id="contact-page"] .nav-contact { color: #ccff00 !important; font-weight: bold; }

Étape 3 : La Page d'Accueil (`index.html`)

Créez un fichier nommé exactement index.html. Ce code affiche le texte de présentation épuré et centré de votre paradis estival.

<header> <h1>✨ [VOTRE TITRE DE PAGE 'D'ACCUEIL] ✨</h1> </header> <nav class="navbar"> <a href="index.html" class="nav-index">Accueil</a> <a href="blog.html" class="nav-blog">Mon Blog</a> <a href="livredor.html" class="nav-livredor">Livre d'or</a> <a href="albums.html" class="nav-albums">Albums</a> <a href="contact.html" class="nav-contact">Contact</a> </nav> <div style="max-width: 850px; width: 95%; margin: 0 auto;"> <main class="card" style="text-align: center;"> <h2>Bienvenue sur mon blog !</h2> <p>Installez-vous confortablement pour découvrir mon univers ! Cet espace est mon blog personnel pour partager mes plus belles histoires, mes créations et mes passions avec vous tous.</p> </main> </div> <footer></footer>

Étape 4 : Le Blog avec Profil, Scrollbar d'Amis et Pagination (`blog.html`)

Créez un fichier nommé exactement blog.html. Comme il s'agit d'une page vierge, vous avez d'abord besoin du squelette de départ. Remontez à l'Étape 1, copiez son code et collez-le au tout début à la ligne 1. Venez ensuite copier le code ci-dessous et insérez-le à la ligne 11, juste à l'intérieur de vos balises <body>. Il contient vos articles avec les soleils ☀️ à gauche, ainsi que le profil, l'avatar et la liste d'amis déroulante à droite.

<header> <h1>☀️ TITRE DU BLOG 🍹</h1> </header> <nav class="navbar"> <a href="index.html" class="nav-index">Accueil</a> <a href="blog.html" class="nav-blog">Blog & Amis</a> <a href="livredor.html" class="nav-livredor">Livre d'or</a> <a href="albums.html" class="nav-albums">Albums</a> <a href="contact.html" class="nav-contact">Contact</a> </nav> <div style="max-width: 1300px; width: 95%; margin: 0 auto; display: grid; grid-template-columns: 2.2fr 1fr; gap: 30px;"> <main> <article class="card"> <h2><span class="symbole-soleil">☀️</span>Notre premier après-midi à la plage</h2> <p>Le soleil tapait fort aujourd'hui ! On a sorti les chapeaux de paille, la crème solaire et on a passé la journée à rigoler près de l'eau. Les vagues étaient parfaites.</p> </article> <div class="pagination"> <button class="page-btn">❮ Précédent</button> <button class="page-btn">Suivant ❯</button> </div> </main> <aside> <div class="card profil-box"> <img src="avatar.jpg" class="profil-avatar" alt="Moi"> <h3 style="margin: 10px 0 5px 0;">Créatrices de Paradis</h3> <p style="font-size:0.85rem; margin:0;">Bienvenue dans notre coin de création !</p> </div> <div class="card"> <h3>💖 Amis & Favoris</h3> <div class="zone-amis-scroll"> <div style="margin-bottom:10px;"> <input type="checkbox"> ☀️ <a href="https://example.com" target="_blank" style="color:#ff7675; text-decoration:none; font-weight:bold;">Le Blog de Julie</a> </div> <div style="margin-bottom:10px;"> <input type="checkbox"> 🌊 <a href="https://example.com" target="_blank" style="color:#ff7675; text-decoration:none; font-weight:bold;">L'Atelier de Chloé</a> </div> </div> </div> <div class="card"> <h3>🧩 Vos Widgets</h3> <p style="font-size:0.9rem; color:#666;">Collez vos widgets ou balises bonus ici !</p> </div> </aside> </div> <footer></footer>

Étape 5 : La Galerie d'Albums avec Carrousel et Changement de Grille (`albums.html`)

Créez un fichier nommé exactement albums.html. Comme il s'agit d'une page vierge, vous avez d'abord besoin du squelette de départ. Remontez à l'Étape 1, copiez son code et collez-le au tout début à la ligne 1. Venez ensuite copier le code ci-dessous et insérez-le à la ligne 11, juste à l'intérieur de vos balises <body>. Il contient votre vitrine défilante et vos boutons pour changer la taille des images.

<style> .grid-switcher { display: flex; justify-content: center; gap: 15px; margin-bottom: 35px; } .btn-grid { background-color: #ffeaa7; border: 2px solid #ff7675; color: #d63031; padding: 10px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; } .btn-grid.active, .btn-grid:hover { background-color: #ff7675; color: white; } .photo-gallery { display: grid; gap: 25px; margin: 0 auto; width: 100%; } .grid-2x2 { grid-template-columns: repeat(2, 1fr); } .grid-3x3 { grid-template-columns: repeat(3, 1fr); } .grid-4x4 { grid-template-columns: repeat(4, 1fr); } .grid-5x5 { grid-template-columns: repeat(5, 1fr); } .grid-6x6 { grid-template-columns: 1fr; max-width: 1100px; } .grid-6x6 .album-item { max-width: 1100px; margin: 0 auto; } .grid-6x6 .album-box { height: 390px; } .album-item { background: white; border-radius: 14px; padding: 12px; border: 1px solid #fab1a0; display: flex; flex-direction: column; } .album-box { border-radius: 10px; overflow: hidden; height: 200px; border: 2px solid #eee; } .album-box img { width: 100%; height: 100%; object-fit: cover; } .album-caption { margin-top: 12px; font-size: 1.05rem; font-weight: bold; text-align: center; } .album-subtext { font-size: 0.9rem; color: #555; text-align: center; margin-top: 5px; } .album-subtext a { color: #ff7675; text-decoration: none; font-weight: bold; } .album-subtext a:hover { color: #d63031; text-decoration: underline; } .diapo-container { width: 100%; max-width: 1100px; margin: 20px auto 40px auto; position: relative; overflow: hidden; } .diapo-track { display: flex; gap: 20px; transition: transform 0.5s ease-in-out; width: max-content; } .diapo-box { width: 260px; height: 260px; border-radius: 12px; overflow: hidden; border: 3px solid white; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.08); } .diapo-box img { width: 100%; height: 100%; object-fit: cover; } .diapo-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 118, 117, 0.9); color: white; border: none; padding: 12px 16px; cursor: pointer; font-size: 1.2rem; border-radius: 50%; font-weight: bold; z-index: 10; } .prev { left: 10px; } .next { right: 10px; } </style> <header><h1> TITRE DU BLOG </h1></header> <nav class="navbar"> <a href="index.html" class="nav-index">Accueil</a> <a href="blog.html" class="nav-blog">Blog & Amis</a> <a href="livredor.html" class="nav-livredor">Livre d'or</a> <a href="albums.html" class="nav-albums">Albums</a> <a href="contact.html" class="nav-contact">Contact</a> </nav> <div style="max-width: 1300px; width: 95%; margin: 0 auto;"> <main class="card"> <h2>📸 Notre Album de Créations</h2> <div class="diapo-container"> <div class="diapo-track" id="diapoTrack"> <div class="diapo-box"><img src="photo1.jpg"></div> <div class="diapo-box"><img src="photo2.jpg"></div> <div class="diapo-box"><img src="photo3.jpg"></div> <div class="diapo-box"><img src="photo4.jpg"></div> </div> <button type="button" class="diapo-btn prev" onclick="scrollVitrine(-1)">❮</button> <button type="button" class="diapo-btn next" onclick="scrollVitrine(1)">❯</button> </div> <div class="grid-switcher"> <button class="btn-grid" onclick="changeGrid('grid-2x2', this)">Grille 2 x 2 </button> <button class="btn-grid active" onclick="changeGrid('grid-4x4', this)">Grille 4 x 4 </button> <button class="btn-grid" onclick="changeGrid('grid-5x5', this)">Grille 5 x 5 </button> <button class="btn-grid" onclick="changeGrid('grid-6x6', this)"> Panoramique </button> </div> <div class="photo-gallery grid-4x4" id="gallery"> <div class="album-item"> <div class="album-box"><img src="photo1.jpg"></div> <div class="album-caption"><span class="symbole-soleil"></span>Coquillage d'Or</div> <div class="album-subtext">Trouvé en balade. Vous pouvez <a href="https://example.com" target="_blank">télécharger le fichier ZIP</a> ici.</p> </div> </div> </main> </div> <footer></footer> <script> function changeGrid(className, buttonElement) { const gallery = document.getElementById('gallery'); if (!gallery) return; gallery.classList.remove('grid-2x2', 'grid-3x3', 'grid-4x4', 'grid-5x5', 'grid-6x6'); gallery.classList.add(className); const buttons = document.querySelectorAll('.btn-grid'); buttons.forEach(btn => btn.classList.remove('active')); buttonElement.classList.add('active'); } let currentPosition = 0; function scrollVitrine(direction) { const track = document.getElementById('diapoTrack'); if (!track) return; currentPosition = currentPosition + (direction * 280); if (currentPosition > 0) currentPosition = 0; track.style.transform = `translateX(${currentPosition}px)`; } </script>
</body> </html>

Étape 6 : Le Livre d'Or avec Modération Secrète (`livredor.html`) 📖

Créez un fichier nommé exactement livredor.html. Ce code intègre un bouton secret tout en bas pour que seule l'auteure du site puisse activer le mode modération et supprimer des messages !

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Sweet Paradise - Livre d'or</title> <link rel="stylesheet" href="style.css"> <style> .form-cadre { border: 2px solid #fab1a0; padding: 20px; border-radius: 12px; background: #fff; margin-bottom: 25px; } .liste-messages { margin-top: 30px; text-align: left; max-height: 300px; overflow-y: auto; padding-right: 10px; } .bulle-message { background: #ffe3d1; border-left: 5px solid #ff7675; padding: 15px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); } .bulle-message strong { color: #d63031; display: block; margin-bottom: 5px; } .bulle-message span { font-size: 0.8rem; color: #777; float: right; } </style> </head> <body id="livredor-page"> <header><h1> TITRE LIVRE DOR </h1></header> <nav class="navbar"> <a href="index.html" class="nav-index">Accueil</a> <a href="blog.html" class="nav-blog">Blog & Amis</a> <a href="livredor.html" class="nav-livredor">Livre d'or</a> <a href="albums.html" class="nav-albums">Albums</a> <a href="contact.html" class="nav-contact">Contact</a> <div style="max-width: 700px; width: 95%; margin: 0 auto;"> <main class="card" style="text-align: center;"> <h2 style="color: #d63031; margin-top: 0;"><span class="symbole-soleil"> </span>Le Livre d'Or</h2> <p>Laissez-nous un petit souvenir de votre passage dans notre paradis !</p> <div class="form-cadre"> <form id="formLivre"> <input type="text" id="pseudo" placeholder="Votre prénom / pseudo" style="width:100%; padding:12px; margin-bottom:15px; border:2px solid #ffeaa7; border-radius:8px; box-sizing:border-box;" required> <textarea rows="4" id="messageTxt" placeholder="Écrivez votre mot doux ici..." style="width:100%; padding:12px; margin-bottom:15px; border:2px solid #ffeaa7; border-radius:8px; box-sizing:border-box;" required></textarea> <div style="margin-bottom: 15px; display: flex; gap: 10px; justify-content: center;"> <button type="button" style="background-color:#ffeaa7; border:1px solid #fab1a0; padding:8px 15px; border-radius:6px; cursor:pointer; font-weight:bold;" onclick="alert('Option insérer une image');">🖼️ Image</button> <button type="button" style="background-color:#ffeaa7; border:1px solid #fab1a0; padding:8px 15px; border-radius:6px; cursor:pointer; font-weight:bold;" onclick="alert('Menu Émojis clignotants');">✨ Émojis</button> </div> <button type="submit" style="background-color:#ff7675; color:white; border:none; padding:14px; width:100%; border-radius:8px; font-weight:bold; cursor:pointer; font-size:1rem;">Poster sur le livre d'or 💖</button> </form> </div> <div class="liste-messages" id="zoneMessages"></div> <!-- BOUTON SECRET TOUT EN BAS POUR L'AUTEUR --> <button type="button" onclick="activerModeAuteur()" style="background:none; border:none; color:#bbb; font-size:0.75rem; margin-top:30px; cursor:pointer;">⚙️ Espace Administration</button> </main> </div> <footer></footer> <script> const form = document.getElementById('formLivre'); const zone = document.getElementById('zoneMessages'); let modeAuteurActif = false; // Par défaut, personne ne peut supprimer let messagesSauvegardes = JSON.parse(localStorage.getItem('messagesParadise')) || []; afficherMessages(); form.addEventListener('submit', function(e) { e.preventDefault(); const pseudoInput = document.getElementById('pseudo').value; const messageInput = document.getElementById('messageTxt').value; const dateActuelle = new Date().toLocaleDateString('fr-FR'); const nouveauMsg = { pseudo: pseudoInput, texte: messageInput, date: dateActuelle }; messagesSauvegardes.unshift(nouveauMsg); localStorage.setItem('messagesParadise', JSON.stringify(messagesSauvegardes)); afficherMessages(); form.reset(); }); // LE BOUTON SECRET VÉRIFIE LE MOT DE PASSE DE L'AUTEUR function activerModeAuteur() { const mdp = prompt("Entrez le mot de passe Auteur pour gérer les messages :"); if (mdp === "glace") { // Tu peux changer "glace" par le mot de passe de ton choix ! modeAuteurActif = true; alert("Mode Auteur activé ! Vous pouvez maintenant supprimer les messages."); afficherMessages(); } else { alert("Mot de passe incorrect."); } } function afficherMessages() { zone.innerHTML = ''; messagesSauvegardes.forEach((msg, index) => { const bulle = document.createElement('div'); bulle.className = 'bulle-message'; // Si le mode auteur est activé, on fabrique le bouton supprimer let boutonSuppr = ''; if (modeAuteurActif) { boutonSuppr = `<br><button onclick="supprimerMessage(${index})" style="background:none; border:none; color:#d63031; font-size:0.8rem; cursor:pointer; padding:0; margin-top:10px; font-weight:bold;">❌ Supprimer ce message</button>`; } bulle.innerHTML = `<span>Le ${msg.date}</span><strong>✍️ ${msg.pseudo} a écrit :</strong> ${msg.texte}${boutonSuppr}`; zone.appendChild(bulle); }); } function supprimerMessage(index) { if (confirm("Voulez-vous vraiment supprimer ce message ?")) { messagesSauvegardes.splice(index, 1); localStorage.setItem('messagesParadise', JSON.stringify(messagesSauvegardes)); afficherMessages(); } } </script> </body> </html>

Étape 7 : Le Formulaire de Contact personnalisé (`contact.html`)

Le module de fermeture propre pour vous écrire des messages ou projets en privé.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Sweet Paradise - Contact</title> <link rel="stylesheet" href="style.css"> </head> <body id="contact-page"> <header><h1> TITRE DU FORMULAIRE CONTACT </h1></header> <nav class="navbar"> <a href="index.html" class="nav-index">Accueil</a> <a href="blog.html" class="nav-blog">Blog & Amis</a> <a href="livredor.html" class="nav-livredor">Livre d'or</a> <a href="albums.html" class="nav-albums">Albums</a> <a href="contact.html" class="nav-contact">Contact</a> <div style="max-width: 700px; width: 95%; margin: 0 auto;"> <main class="card"> <h2 style="color: #d63031; margin-top: 0;"> Contactez-nous</h2> <p>Une idée, une question ? Écrivez-nous un petit mot !</p> <form onsubmit="event.preventDefault(); alert('Message envoyé !');"> <input type="text" placeholder="Votre nom" style="width:100%; padding:12px; margin-bottom:15px; border:2px solid #ffeaa7; border-radius:8px; box-sizing:border-box;" required> <input type="email" placeholder="Votre adresse émail" style="width:100%; padding:12px; margin-bottom:15px; border:2px solid #ffeaa7; border-radius:8px; box-sizing:border-box;" required> <textarea rows="5" placeholder="Votre message..." style="width:100%; padding:12px; margin-bottom:15px; border:2px solid #ffeaa7; border-radius:8px; box-sizing:border-box;" required></textarea> <button type="submit" style="background-color: #ff7675; color: white; border: none; padding: 14px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer;">Envoyer le message </button> </form> </main> </div> <footer></footer> </body> </html>

Étape 8 : Mettre Votre Blog ou Site en ligne sur le Net avec Netlify ! 🚀

Voici la méthode la plus rapide et 100% gratuite au monde pour ouvrir votre site à toute la Terre, sans écrire une seule ligne de code.

🌍 Le Guide de mise en ligne ultra-simple :

📊 Combien d'images peut-on stocker par mois ?

Le mode Gratuit vous donne droit à 100 Go de trafic par mois. Cela représente plus de 200 000 images affichées par mois ! Une place immense pour toutes vos créations.

Étape 9 : Mettre votre Blog en ligne gratuitement 🚀

Pour que tout le monde puisse visiter votre site sur Internet, vous devez l'héberger. Voici les deux meilleures plateformes gratuites et ultra-rapides au choix :

⚡ Méthode 1 : Netlify (Glisser-Déposer Rapide)

Netlify est une plateforme très populaire qui offre 100 Go de trafic par mois (environ 30 000 visites). Vous déposez votre dossier et votre blog est en ligne avec un lien sécurisé.

👉 Comment faire : Créez un compte gratuit sur Netlify.com, allez dans l'onglet Sites, puis glissez et déposez simplement le dossier complet de votre blog dans la zone de téléchargement. Votre site s'allume en 3 secondes !

🚀 Méthode 2 : Vercel (L'Alternative Ultra-Rapide)

Vercel offre également 100 Go de trafic gratuit, mais gère encore mieux les gros albums de photos panoramiques et propose des serveurs d'une vitesse incroyable.

👉 Comment faire : Créez un compte "Hobby" gratuit sur Vercel.com, cliquez sur le bouton Add New Project, puis glissez votre dossier de blog à l'écran. Vous obtenez instantanément votre adresse web !

💬 Un bug, une question ou besoin d'aide ?

Si vous bloquez sur une étape d'hébergement ou si vous voulez partager vos liens en direct, rejoignez-nous sur notre forum d'entraide officiel ! C'est l'endroit parfait pour peaufiner vos sites ensemble.

Étape 10 : La Boîte à Widgets magiques de l'été ! 🧸✨

Voici les vrais sites modernes pour ajouter des effets (objets qui tombent, curseurs fun, calendriers) et surtout où coller les codes sans rien casser !

📍 Règle d'or : Où colle-t-on les codes ?

• Les effets sur l'écran (Curseur, pluie d'émojis) : Le code doit être copié-collé tout en bas de vos fichiers HTML (ex: blog.html), juste avant la balise de fermeture </body>.
• Les gadgets de la colonne droite (Calendrier) : Cherchez la ligne <h3>🧩 Vos Widgets</h3> dans votre fichier HTML et collez le code reçu juste en dessous !

🌊 1. Faire tomber des feuilles de palmier ou des soleils (Effet de neige)

Pour faire pleuvoir des émojis (☀️, 🌴, 🍦) sur votre écran, le site le plus simple et moderne est CodePen.io. Tapez simplement "CSS falling emojis" ou "JS snow effect emoji" dans leur barre de recherche pour récupérer un mini-code Javascript de 5 lignes gratuit et prêt à copier !

🖱️ 2. Modifier la souris pour y mettre un curseur d'été

Pour remplacer la flèche de la souris de vos amies par une petite image fun (comme un petit soleil), allez sur le catalogue gratuit RealWorld Cursor Library ou Custom Cursor. Téléchargez un curseur au format .cur ou une image .png (maximum 32x32 pixels) et ajoutez cette ligne dans votre style.css :

body { cursor: url('votre-petit-soleil.png'), auto; }

📅 3. Ajouter un calendrier de vacances

Allez sur le site gratuit Webmeest ou BookWidgets. Créez votre petit calendrier ou votre horloge, personnalisez la couleur en rouge corail pour aller avec votre thème, copiez le code fourni (qui commence par <iframe...>) et collez-le sous votre titre de widget !

🍦 Cette fois-ci, pas de fantôme du passé ! Tous ces sites sont en ligne et prêts à booster!

🍦 Gadget: Faire pleuvoir des Crèmes Glacées ! 🍦

Ce code bonus est un script indépendant. Vous n'avez pas besoin de créer un nouveau fichier ! Ouvrez le fichier de la page où vous voulez voir la magie opérer (comme index.html ou blog.html). Descendez tout en bas de votre code, cherchez la toute dernière balise de fermeture </body> et collez-y le code magique ci-dessous juste avant elle. Vos petits sundaes, gelatos et cupcakes se mettront à tomber instantanément sur votre écran !

<script> // CONFIGURATION DE LA PLUIE DE GLACES const emojix = ['🍦', '🍧', '🍨', '🧁', '🍦']; // Vos parfums favoris ! const nombreDeGlaces = 15; // Nombre de glaces sur l'écran en même temps for (let i = 0; i < nombreDeGlaces; i++) { creerUneGlace(); } function creerUneGlace() { const glace = document.createElement('div'); glace.innerText = emojix[Math.floor(Math.random() * emojix.length)]; glace.style.position = 'fixed'; glace.style.top = '-50px'; // Éparpille les glaces au hasard sur toute la largeur de l'écran glace.style.left = Math.random() * window.innerWidth + 'px'; // Donne une taille aléatoire aux glaces (entre 16px et 35px) glace.style.fontSize = (Math.random() * 20 + 16) + 'px'; glace.style.zIndex = '9999'; glace.style.pointerEvents = 'none'; // Empêche de bloquer les clics sur le site glace.style.userSelect = 'none'; document.body.appendChild(glace); // Vitesse de chute au hasard pour chaque glace const vitesse = Math.random() * 3 + 2; let positionY = -50; function tomber() { positionY += vitesse; glace.style.top = positionY + 'px'; // Si la glace touche le bas de l'écran, elle remonte magiquement tout en haut if (positionY > window.innerHeight) { positionY = -50; glace.style.left = Math.random() * window.innerWidth + 'px'; } requestAnimationFrame(tomber); } tomber(); } </script>

Étape 11 : Personnaliser et positionner vos barres de défilement (`Scrollbars`) 🎛️

Ouvrez votre fichier de styles nommé exactement style.css. Descendez tout en bas du fichier et collez-y le code de base ci-dessous pour programmer l'apparence de vos barres. Découvrez ensuite comment appliquer cette zone déroulante sur vos éléments et apprenez à la positionner précisément dans votre mise en page.

/* STRUCTURE GENERALE POUR RENDRE UN ELEMENT DEROULANT */ .ma-zone-deroulante { max-height: 250px; /* Bloque la hauteur maximale (Ajustez les px selon vos besoins) */ overflow-y: auto; /* Active le défilement vertical si le texte/image dépasse */ overflow-x: hidden; /* Masque le défilement horizontal inutile */ padding-right: 10px; /* Espace de sécurité pour que le texte ne colle pas à la barre */ } /* DECORATION DE LA BARRE (Pour les navigateurs Chrome, Safari, Edge) */ .ma-zone-deroulante::-webkit-scrollbar { width: 8px; /* Épaisseur de la barre verticale */ } .ma-zone-deroulante::-webkit-scrollbar-track { background: #f7f1e3; /* Couleur de la glissière de fond (ici Vanille) */ border-radius: 4px; } .ma-zone-deroulante::-webkit-scrollbar-thumb { background: #ffb142; /* Couleur de la barrette mobile (ici Pêche) */ border-radius: 4px; } .ma-zone-deroulante::-webkit-scrollbar-thumb:hover { background: #ccff00; /* Couleur au survol de la souris (ici Lime) */ }

⚙️ Guide de positionnement de votre zone déroulante

Pour appliquer ce défilement, vous devez ajouter la classe class="ma-zone-deroulante" sur le bloc HTML de votre choix (comme une balise <div> ou <aside>). Selon l'emplacement désiré, voici l'organisation structurelle à suivre dans votre fichier HTML :

💡 En résumé : Le CSS gère l'apparence de la scrollbar, mais c'est l'ordre de vos balises dans le fichier HTML qui détermine sa position physique sur l'écran !

Étape 12 : Les Effets Spéciaux & Modules Avancés 🚀✨

Ouvrez le fichier HTML de la page de votre choix (comme index.html ou blog.html) pour y ajouter vos gadgets. Utilisez les boutons d'aperçu pour tester chaque effet en direct avant de copier son code !

🎵 1. Le Bouton Musique MP3 Estival

Ce module permet d'ajouter une musique de fond d'ambiance que les visiteurs peuvent lancer ou couper d'un simple clic sur un bouton stylisé.

<!-- À COLLER DANS VOTRE HTML (OÙ VOUS LE SOUHAITEZ) --> <button class="btn-music" onclick="toggleMusic()">▶️ Lancer l'ambiance 🌊</button> <audio id="monAudio" src="ma-musique.mp3" loop></audio> <!-- CODE JAVASCRIPT À METTRE TOUT EN BAS AVANT </body> --> <script> function toggleMusic() { const audio = document.getElementById('monAudio'); if (audio.paused) { audio.play(); } else { audio.pause(); } } </script>

📣 2. Le Bandeau de Texte Défilant

Idéal pour annoncer une nouveauté ou souhaiter la bienvenue avec un texte dynamique qui traverse l'écran de droite à gauche.

<!-- À COLLER DANS VOTRE HTML (EN HAUT DE PAGE PAR EXEMPLE) --> <div style="background: #ffb142; padding: 10px; color: white; font-weight: bold;"> <marquee scrollamount="5">☀️ Écrivez votre message d'alerte ici ! 🌴</marquee> </div>

📊 3. Compteur de Visites & Connectés

Affichez le nombre total de personnes venues visiter le site et le nombre d'utilisateurs connectés en même temps.

📌 Note technique importante : Un site HTML gratuit ne possède pas de mémoire générale pour compter les humains du monde entier. Pour avoir un vrai chiffre qui augmente à chaque visiteur, il faut coller un mini-widget gratuit en 2 clics depuis des sites spécialisés comme Compteurdevisite.com ou FreeCounterStat. Ils vous fournissent un code <a href="..."><img...></a> à coller directement dans votre colonne de widgets !

⚓ 4. Le Menu Vertical Flottant (Fixé sur le côté)

Ce code permet de bloquer un petit menu d'accès rapide sur le côté de l'écran. Même si le visiteur descend tout en bas de la page (scrolle), le menu reste fixé au même endroit de son écran !

🎨 Étape A : La programmation du style (CSS)

Ce premier morceau est du code de style CSS. N'ouvrez pas votre page internet ! Ouvrez plutôt votre fichier de design nommé exactement style.css. Descendez tout en bas de ce fichier, créez une nouvelle ligne vide, et collez-y le bloc de code ci-dessous :

/* À AJOUTER DANS VOTRE FICHIER STYLE.CSS */ .menu-flottant-cote { position: fixed; /* S'ancre sur l'écran et ne bouge plus au scroll */ top: 50%; /* Se place au milieu de la hauteur */ right: 20px; /* Se colle à 20px du bord droit (Mettez left pour le mettre à gauche !) */ transform: translateY(-50%); background: white; padding: 15px; border-radius: 12px; display: flex; flex-direction: column; /* Aligne les boutons de haut en bas en colonne vertical */ gap: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 9999; /* Reste toujours par-dessus tout le reste du site */ }

🧱 Comment déplacer ou inverser vos modules (Le Guide Ultime)

Pour déplacer un élément (mettre le profil en bas, les amis en haut, ou changer une colonne), il existe deux méthodes professionnelles selon ce que vous souhaitez faire :