1- Mode avancé - B.A. BA
Passer 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) Ici cochez la case "convertir ce modèle..."
4 ) Cliquez sur le bouton Valider
Vous revenez dans la liste des modèles mais les options ont changé
A la place de Styles, apparences... vous avez Editer les fichiers de ce modèle
Le code
Tout se passe entre les deux balises <Body> et </Body>
Les différentes zones dans lequelles 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. Nous verrons plus tard comment les modifier.
Editer les fichiers de modèles
1 ) Cliquez sur Apparence.
2 ) Cliquez sur Editer les fichiers de ce modèle
3 ) Vous voyez apparaitre 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 d'Archive : c'est aussi la page qui sert 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 definit l'apparence des différents éléments de votre blog : couleurs, caractères, bordures, marges... Nous verrons plus loin comment ça marche.
Structure de la page d'accueil
La page d'écran est divisée en blocs délimités par les balises <div></div>
Ce qui donne dans le code (Nous avons ajouté des remarques qui 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 Canalblog / balise 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 Canalblog / 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 avvez 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 -->
A l'intérieur d''un bloc <Blogger> </Blogger>celà 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 retravailler sa presentation à l'image de ce que nous avons fait dans les écran précédants.
Ca demande un bon moment (j'ai mis environs dix minutes pour faire la page d'accueil), mais ce n'est pas compliqué.
Pour ce faire commencez par isoler les balises (les trucs 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 aurrez choisi dans le deisign 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>
Les liens Amis
Les "Liens d'amis" sont regroupés par catégories (les catégories que vous définnissez dans Contenu, Lien d'amis...)
Aide canalblog http://www.canalblog.com/public/aide/?q=balises&f=22
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 (facultatives)
Bloc des Lien 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 pendant aux balise 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 utiisé 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 necessaire de préciser le stye à 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;
}