02 août 2007
- TOUT SUR CANALBLOG -
- Pourquoi choisir Canalblog plutôt qu'une autre plateforme ? Nouveau
- Comment faire pour passer en mode avancé ?
- Éditer les fichiers d'un modèle
- Le code
- La structure de la page d'accueil
- Les balises de bloc
- Les balises de données
- Rendre le code lisible
- Liens d'amis
- La feuille de style
- Comment faire pour supprimer un article ?
- Comment faire connaitre mon blog ? Nouveau
- Retour au sommaire -
10 août 2007
COMMENT FAIRE POUR PASSER EN MODE AVANCÉ ?
► Le mode avancé
Le mode avancé sert à changer des éléments qui sont impossibles de modifier avec le mode simple : par exemple changer le fond de votre page par une image, déplacer, ajouter ou supprimer une rubrique dans les colonnes, ajouter une radio, etc.
► Avant de passer en mode avancé
Attention, en passant en mode avancé, il est impossible de retourner en arrière. La présentation de votre blog (style, couleurs, liens, colonnes etc.) doit être faite avant (complexité pour changer votre présentation après...).
► Passez en mode avancé
1. Cliquez dans le menu Apparence.
2. Vous êtes maintenant dans le sous-menu Liste des modèles. Là, cliquez sur Paramètres.
3. Cochez la case "Convertir ce modèle...". Cliquez sur le bouton Valider.
4. Vous revenez dans la liste des modèles mais les options ont changées.
A la place de Styles, Apparences... vous avez Editer les fichiers de ce modèle.
► Sauvegardez les feuilles html
Avant de faire une modification difficile sur votre blog vous pouvez sauvegarder les feuilles HTML de chaque page (ainsi que la feuille de style) dans un fichier du bloc-notes (ou sur Word). Car, en cas d'erreur lors d'une modification, votre page ne s'affichera plus correctement et vous serez obligé de recommencer un nouveau modèle !
► Mauvaises manipulations, erreurs ?
Ne vous inquiétez pas ! Votre modèle est peut-être perdu (si vous n'arrivez pas à corriger vos erreurs ou si vous n'avez pas sauvegardé les feuilles HTML de chaque page), mais vous pouvez néanmoins recommencer un nouveau modèle ! Allez dans Apparence, et cliquez sur Nouveau modèle.
ÉDITER LES FICHIERS D'UN MODÈLE
1. Cliquez dans le menu Apparence.
2. Cliquez sur Editer les fichiers de ce modèle.
3. Vous voyez apparaître du code HTML dans une grande zone de texte avec un ascenseur. Il s'agit du code qui génère votre page d'accueil.
4. Au dessus du code, il y a une liste déroulante qui permet de choisir le type de page que l'on veut modifier.
Page d'accueil : la page d'accueil de votre blog.
Page des archives : la page sert également de modèle pour afficher les catégories.
Page Message : la page qui s'affiche quand l'internaute clique sur Lien permanent, Commentaire, Rétrolien ou sur un des derniers messages…
En dernier vous voyez la Feuille de style générale, c'est elle qui définit l'apparence des différents éléments de votre blog : couleurs, caractères, bordures, marges...
LE CODE
Tout se passe entre les deux balises <Body> et </Body>
Les différentes zones dans lesquelles on trouve le texte sont délimitées par des balises
<div> pour le début et </div> qui marque la fin de la zone.
Dans les balises <div> le terme id= fait référence à un style défini dans la feuille de style.
Par exemple : <div id="container">
fait référence à
#container {
width: 800px;
padding: 0px;
background-color: #6FA9FF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #0099CC;
margin-right: auto;
margin-left: auto;
}
Les valeurs de ces différents paramètres dépendent des choix que vous avez fait en créant votre blog.
LA STRUCTURE DE LA PAGE D'ACCUEIL
La page d'écran est divisée en blocs délimités par les balises <div> et </div>
Ce qui donne dans le code :
(Des remarques ont été ajoutées. Elles sont ignorées par le navigateur. Elles ne sont donc pas nécessaires mais vous aideront à comprendre le code).
<body>
<!-- Début de définition de l'espace utilisé dans l'écran -->
<div id="container">
<!-- Début de définition de la zone du haut (zone titre) -->
<div id="topbar">
Contenu de la zone de titre
</div>
<!-- Fin de définition de la zone du haut (zone titre) -->
<!-- Début de définition de la zone de gauche -->
<div id="leftbar">
Code du contenu de la zone de gauche
</div>
<!-- Fin de définition de la zone de gauche -->
<!-- Début de définition de la zone centrale -->
<div id="content">
<!-- Début de définition de la zone des articles -->
<div class="blogbody">
Code du contenu de la zone des article
</div>
<!-- Fin de définition de la zone des articles -->
</div>
<!-- Fin de définition de la zone centrale -->
<!-- Début de définition de la zone de droite -->
<div id="rightbar">
Code du contenu de la zone de gauche
</div>
<!-- Fin de définition de la zone de droite -->
<!-- Met fin aux zones qui sont côte à côte -->
<div style="clear: both;height:0px;"> </div>
</div>
<!-- Fin de définition de l'espace utilisé dans l'écran -->
</body>
Dans notre code, nous avons mis une commande par ligne et à chaque fois que l'on trouve une balise <div> la ligne suivante est décalée vers la droite. A l'inverse, à chaque balise </div> le décalage est annulé. Cela permet de mieux voir les différents blocs. La lecture du code est ainsi simplifiée.
LES BALISES DE BLOC
<!-- Début de définition de la zone centrale -->
<div id="content">
<!-- Début de définition de la zone des articles -->
<div class="blogbody">
<Blogger>
blocs d'un article
</Blogger>
</div>
<!-- Fin de définition de la zone des articles -->
</div>
<!-- Fin de définition de la zone centrale -->
Le couple de balise <Blogger> </Blogger> délimite tout ce qui concerne les articles :
En fait, tout le code compris entre ces deux balises sera généré autant de fois qu'il y a d'articles à afficher sur cette page (dans la page d'accueil ce nombre dépend de ce que vous avez mis dans Paramètres, Option d'affichage, Affichage).
LES BALISES DE DONNÉES
Les balises de données affichent le contenu d'un champ de la base de donnée dans laquelle sont rangées les informations que vous avez tapées. Par exemple <$BlogItemBody$> affichera le contenu d'un article. Les balises de données commencent et finissent par le signe $.
<!-- Début de définition de la zone centrale -->
<div id="content">
<!-- Début de définition de la zone des articles -->
<div class="blogbody">
<Blogger>
<$BlogItemBody$>
</Blogger>
</div>
<!-- Fin de définition de la zone des articles -->
</div>
<!-- Fin de définition de la zone centrale -->
L'intérieur d'un bloc <Blogger> </Blogger> permet d'afficher plusieurs articles.
Les balises de données ne fonctionnent qu'à l'intérieur du bloc.
RENDRE LE CODE LISIBLE
Avant d'essayer de modifier le code, nous vous conseillons de sauvegarder les feuilles HTML de chaque page (ainsi que la feuille de style) dans un fichier du bloc-notes (ou sur Word). Car, en cas d'erreur lors d'une modification, votre page ne s'affichera plus correctement et vous serez obligé de recommencer un nouveau modèle !
Retravaillez ensuite la présentation du code, à l'image de ce que nous avons fait précédemment (voir lien).
Commencez par isoler les balises (les codes entre <>).
Puis à chaque fois que vous trouvez une balise ouvrante (comme <div>) décalez les lignes suivantes de deux espaces.
A chaque fois que vous trouvez une balise fermant, c'est à dire avec un / (comme </div>) décalez la vers la gauche de 2 espaces par rapport à la ligne du dessus.
Attention ! Ne faite pas cette manipulation dans la ligne document.write si vous l'avez, ça ne marcherai plus.
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l'auteur</a>'); // -->
</script>
Vous devez obtenir quelque chose comme çà (le code diffère suivant les options que vous aurez choisi dans le design de votre blog) :
<body>
<div id="container">
<div id="topbar">
<h1>
<a href="<$BlogURL$>">
<$BlogTitle$>
</a>
</h1>
<h2>
<$BlogDescription$>
</h2>
</div>
<div id="leftbar">
<div class="navlinks">
<div class="title">
Catégories
</div>
<ul>
<CBCategories>
<li>
<a href="<$BlogCategoryURL$>">
<$BlogCategoryName$>
</a>
</li>
</CBCategories>
</ul>
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l'auteur</a>'); // -->
</script>
</div>
<BlogSiteFeed>
<div class="item">
<a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">
Version XML
</a>
</div>
</BlogSiteFeed>
</div>
</div>
<div id="content">
<div class="blogbody">
<Blogger>
<BlogDateHeader>
<h2>
<$BlogDateHeaderDate$>
</h2>
</BlogDateHeader>
<a name="<$BlogItemNumber$>">
</a>
<BlogItemTitle>
<h3>
<$BlogItemTitle$>
</h3>
</BlogItemTitle>
<p>
<$BlogItemBody$>
</p>
<div class="itemfooter">
Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$>
<BlogItemCategories>
-
<a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie">
<$BlogItemCategoryName$>
</a>
</BlogItemCategories>
<BlogItemComments>
-
<a href="<$BlogItemCommentsURL$>" title="Commentez ce message">
Commentaires [<$BlogItemCommentsCount$>]
</a>
</BlogItemComments>
<BlogItemTrackBacks>
-
<a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">
Rétroliens [<$BlogItemTrackBacksCount$>]
</a>
</BlogItemTrackBacks>
- Permalien [
<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">
#
</a>
]
</div>
</Blogger>
</div>
</div>
<div style="clear: both;height:0px;">
</div>
</div>
</body>
LIENS D'AMIS
► Liens d'amis
Les "Liens d'amis" sont regroupés par catégories (les catégories que vous définissez dans Contenu, Lien d'amis...) Aide Canalblog
► Le code
<div class="navlinks">
<!-- Début zone Liens Amis -->
<BloggerFriendLinks>
<!-- Début Entête Liens Amis -->
<BlogFriendLinkHeader>
<div class="title">
<$BlogFriendLinkCategoryName$>
</div>
<ul>
</BlogFriendLinkHeader>
<!-- Fin Entête Liens Amis -->
<!-- Début des Liens Amis -->
<li>
<a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a>
</li>
<!-- Fin des Liens Amis -->
<!-- Début bas des Liens Amis -->
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter>
<!-- Fin bas des Liens Amis -->
</BloggerFriendLinks>
<!-- Fin zone Liens Amis -->
</div>
► Explications
- Bloc des liens d’amis : Le bloc d'affichage des "Liens d'amis" est délimité par deux balises de bloc <BloggerFriendLinks> et </BloggerFriendLinks>.
- Entête : Le nom de ces catégories (titre) sera affiché par la balise <$BlogFriendLinkCategoryName$> placée entre deux balises de bloc délimitant l'entête de chaque catégories <BlogFriendLinkHeader> et </BlogFriendLinkHeader>.
- Liste des liens : Chacun des liens compris dans une catégorie sera affiché par la balise <$BlogFriendLinkName$>. Pour que ce lien soit cliquable il sera inséré dans un couple de balise lien <a> </a>. L'adresse vers lequel on se dirige lorsqu'on clique est donné par la balise <$BlogFriendLinkURL$>.
Ce qui donne la ligne suivante : <a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a>
- Enpied : Enfin, pour clore chaque catégorie (comme pour les balises d'entête) on utilise les balises <BlogFriendLinkFooter> et </BlogFriendLinkFooter>.
LA FEUILLE DE STYLE
La feuille de style définit une liste d'attributs applicable à des objets HTML.
Pour simplifier disons qu'il y a deux manières de définir un style avec le # et avec un point (.)
- Par exemple avec le #
#leftbar {
float: left;
width: 24%;
background-color: #dddddd;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Dans le code ce style sera utilisé avec id=
<div id="leftbar">
- Et avec le point (.)
.blogbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
Qui sera utilisé dans le code avec class=
<div class="blogbody">
En fait il y a une troisième possibilité pour définir les balises HTML sans qu'il soit nécessaire de préciser le style à chaque fois.
Par exemple <H1>,<H2>,<H3> définissent les niveaux de titre 1,2 et 3. Pour définir leur style générale il suffit d'indiquer leur nom (sans point ni #)
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
}