Ceci est la première partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.
Assumons que vous avez un modèle, une structure (x)html de base - crée grâce à un générateur de modèle ou fait par vous-même ou encore emprunté quelque part (dans ce cas, soyez fairplay et faites un lien vers le designer original).
Assumons que vous avez un modèle, une structure (x)html de base - crée grâce à un générateur de modèle ou fait par vous-même ou encore emprunté quelque part (dans ce cas, soyez fairplay et faites un lien vers le designer original).
Le modèle en question devrait ressembler à quelque chose comme ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!-- quelques styles css ici -->
</style>
</head>
<body>
<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!-- quelques styles css ici -->
</style>
</head>
<body>
<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>
</body>
</html>
Ceci est un modèle rudimentaire et non garnis (en widgets). Pour le transformer en un modèle Blogger, il faut juste deux étapes :
1) En faire un document XML (eXtensible Markup Language) !
Pour cela, prendre n'importe quel modèle Blogger et en prendre l'entête (X)HTML et le mettre à la place de celui du modèle ci-haut :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
</head>
<body>
<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
</head>
<body>
<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>
</body>
</html>
Notez que
<style type="text/css">
<!-- quelques styles css ici -->
</style>
est remplacé par
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
<style type="text/css">
<!-- quelques styles css ici -->
</style>
est remplacé par
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
Oui, c'est tout. Vous avez maintenant un modèle Blogger.
Mais, il est vide. Alors, il faut :
2) ajouter des widgets Blogger au contenu !
Pour cela, allez voir la liste des codes html pour widgets Blogger en une ligne.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
</head>
<body>
<!-- Début du contenu -->
<div id='container'>
<!-- Début de l'entête-->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- Fin de l'entête -->
<!-- Début de la partie centrale (celle qui contient les messages) -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- Fin de la partie centrale -->
<!-- Début de la 1ère colonne sidebar1 -->
<b:section class='sidebar' id='sidebar1'/>
<!-- Fin de la 1ère colonne sidebar1 -->
<!-- Début de la 2ème colonne sidebar2 -->
<b:section class='sidebar' id='sidebar2'/>
<!-- fin de la 2ème colonnesidebar2 -->
<!-- Début du pied de page footer -->
<b:section class='footer' id='footer'/>
<!-- Fin du pied de page footer -->
</div>
<!-- fin du contenu -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- quelques styles css ici -->
]]></b:skin>
</head>
<body>
<!-- Début du contenu -->
<div id='container'>
<!-- Début de l'entête-->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- Fin de l'entête -->
<!-- Début de la partie centrale (celle qui contient les messages) -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- Fin de la partie centrale -->
<!-- Début de la 1ère colonne sidebar1 -->
<b:section class='sidebar' id='sidebar1'/>
<!-- Fin de la 1ère colonne sidebar1 -->
<!-- Début de la 2ème colonne sidebar2 -->
<b:section class='sidebar' id='sidebar2'/>
<!-- fin de la 2ème colonnesidebar2 -->
<!-- Début du pied de page footer -->
<b:section class='footer' id='footer'/>
<!-- Fin du pied de page footer -->
</div>
<!-- fin du contenu -->
</body>
</html>
Notez qu'il a suffit d'ajouter seulement :
<b:section class='sidebar' id='sidebar1'/>
<b:section class='sidebar' id='sidebar2'/>
<b:section class='footer' id='footer'/>
Dès que votre modèle sera enregistré, vous pouvez commencer ajouter des widgets entre ces sections.
<b:section class='sidebar' id='sidebar1'/>
<b:section class='sidebar' id='sidebar2'/>
<b:section class='footer' id='footer'/>
Dès que votre modèle sera enregistré, vous pouvez commencer ajouter des widgets entre ces sections.
Dès que vous aurez fini, vous aurez un modèle Blogger, non formaté, sans style css.
Le pied de page et les deux colonnes latérales ne sont pas visibles car aucun widget n'est ajouté... mais ils sont présents.
A ce stade, si vous avez une solide connaisance de Css, vous serez en mesure de donner à votre modèle l'apparence que vous voulez.
A+
Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.
merci pour cet article je vais essayer de voir si avec tes explications je peux arriver à convertir un template wordpress en blogger ;)
RépondreSupprimerpas mal l'article j'attend avec impatience la suite:
RépondreSupprimerUn rebus pour ton blog
salut rodney tu a un très bon guide de créeation des modele blogger mais la probléme que les resulta donne un trés mauvais thémé pour le blog
RépondreSupprimer