 |
Pourrais-tu me fabriquer un thème pour Blogger, léger, rapide, avec un bon SEO
Tu souhaites que je crée un thème Blogger personnalisé qui respecte les conditions suivantes, similaires à celles de ta demande précédente : menu de 3 niveaux maximum, responsive, rapide à charger, code léger, optimisé pour le SEO, totalement gratuit, sans version payante, et 100 % personnalisable. Je vais te fournir un thème de base sous forme de code XML que tu peux importer dans Blogger, avec une explication pour l’installer et le personnaliser.
Thème Blogger personnalisé : "GrokBlog"
Aperçu du thème
Code XML du thème
Voici un thème Blogger minimaliste que j’ai conçu pour répondre à tes critères. Copie ce code XML et suis les instructions pour l’installer.
xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='index, follow' name='robots'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
<b:skin><![CDATA[
/* Reset CSS */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: Arial, sans-serif; line-height: 1.6; background: #f4f4f4; color: #333;}
/* Container */
.container {width: 90%; max-width: 1200px; margin: 0 auto;}
/* Header */
header {background: #333; color: #fff; padding: 1rem 0; text-align: center;}
header h1 {font-size: 2rem;}
/* Navigation Menu */
nav {background: #444; padding: 0.5rem 0;}
nav ul {list-style: none; text-align: center;}
nav ul li {display: inline-block; position: relative;}
nav ul li a {color: #fff; text-decoration: none; padding: 0.5rem 1rem; display: block;}
nav ul li:hover > a {background: #555;}
/* Dropdown Menu (3 levels max) */
nav ul ul {display: none; position: absolute; background: #444; min-width: 150px; z-index: 1;}
nav ul li:hover > ul {display: block;}
nav ul ul li {display: block;}
nav ul ul ul {left: 100%; top: 0;}
/* Main Content */
.main {padding: 2rem 0;}
.post {background: #fff; padding: 1rem; margin-bottom: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.post h2 {font-size: 1.5rem; margin-bottom: 0.5rem;}
.post-meta {font-size: 0.9rem; color: #777; margin-bottom: 0.5rem;}
/* Sidebar */
.sidebar {background: #fff; padding: 1rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.widget {margin-bottom: 1rem;}
.widget h3 {font-size: 1.2rem; margin-bottom: 0.5rem;}
/* Footer */
footer {background: #333; color: #fff; text-align: center; padding: 1rem 0; margin-top: 2rem;}
/* Responsive Design */
@media (max-width: 768px) {
nav ul li {display: block;}
nav ul ul {position: static;}
.main, .sidebar {width: 100%;}
}
]]></b:skin>
</head>
<body>
<header>
<div class='container'>
<h1><data:blog.title/></h1>
</div>
</header>
<nav>
<div class='container'>
<ul>
<li><a href='/'>Accueil</a></li>
<li><a href='#'>Blog</a>
<ul>
<li><a href='#'>Catégorie 1</a>
<ul>
<li><a href='#'>Sous-catégorie 1</a></li>
<li><a href='#'>Sous-catégorie 2</a></li>
</ul>
</li>
<li><a href='#'>Catégorie 2</a></li>
</ul>
</li>
<li><a href='#'>À propos</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<div class='container'>
<div class='main'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div class='sidebar'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
</div>
</div>
<footer>
<div class='container'>
<p>&copy; <data:blog.title/> 2025. Tous droits réservés.</p>
</div>
</footer>
</body>
</html>
Instructions pour installer le thème
Personnalisation du thème
Pourquoi ce thème répond-il à tes critères ?
Conseils supplémentaires
Si tu veux des ajustements spécifiques (par exemple, un design particulier pour le header ou des couleurs spécifiques), fais-le-moi savoir !
Aucun commentaire:
Enregistrer un commentaire