Si
vous êtes sur le point de passer votre blog en mode
avancé, je vous conseille de consulter le billet suivant.
Avertissement
:
Le mode avancé signifie que vous avez
accès au code html et css qui constitue votre blog.
Rassurez-vous, il n’est nécessaire de
connaître le code pour suivre ce tutorial. Le Html est un
langage de programmation assez simple mais n’en reste pas
moins du domaine de la programmation. Il vaut mieux donc, avant toutes
modifications sauvegarder votre modèle. C’est une
précaution élémentaire mais que vous
ne devriez pas occulter. Même les pros le font…
Bon
je suppose que vous avez converti votre modèle en mode
avancé, alors voyons la suite :
Comment
faire une sauvegarde du modèle actuel avant de le modifier.
J’explique
dans un précédent billet comment se constituer un
double. Ce n’est qu’une proposition. Vous pouvez
également faire cette sauvegarde sur votre disque dur. Un
simple éditeur de texte tel que le bloc note fera
l’affaire.
Si vous choisissez cette solution de
sauvegarde, Prenez la peine de créer sur votre ordinateur un
dossier que vous nommerez par exemple Sauvegarde de mon
modèle avancé canalblog. Dans ce dossier vous
prendrez soin d’enregistrer séparément
chaques pages de votre modèle dans un fichier txt par un
copier-coller.
Pour
d’éventuels débutants je
détaille sur ce qui suit comment faire cette sauvegarde.
Allez
sur l’onglet Apparence de l’espace
d’administration de votre blog et dans
l’encadré Modèle utilisé
actuellement pour ce blog
Cliquez sur Editer les fichiers
de ce modèle.
Vous êtes en
présence des Fichiers utilisés pour le
modèle.
Dans le champ Sélectionnez : ,
Cliquez sur Page d’accueil
Placez par un clic
gauche le curseur de la souris dans la zone de code puis clic droit et
dans le menu contextuel qui apparaît, cliquez sur tout
sélectionner.
Refaites un clic droit et cliquez
cette fois sur copier
Ouvrez le bloc-note. Je vous conseille
de désactiver le retour à la ligne automatique
qui est parfois source de problème ( Format et
décocher le retour à la ligne si
nécessaire ). Faites un clic droit dans la zone de saisie et
dans le menu contextuel qui apparaît faites Coller.
Il
ne reste plus qu’à enregistrer dans le
dossier de sauvegarde que vous avez crée auparavant :
Fichier / Enregistrer sous. N’oubliez pas de nommer votre
sauvegarde Page d’accueil en enregistré
là en format txt
Vous
répéterez ces opérations pour chacunes
des pages du blog : Page des archives, Page de l’index des
archives, Page d’un message…, sans oublier la
feuille de style générale.
Je
m’excuse d’avoir autant insisté sur
l’aspect sauvegarde, mais c’est
réellement une bonne habitude à prendre avant
toute manipulation sur le code.
Comment
insérer de nouveaux blocs quand on et en mode
avancé sur canalblog.
Si
vous avez configuré votre blog tel que vous le
désiriez avant de le convertir en mode avancé,
pas de problème. Votre blog ressemblera en tout point
à ce qu’il était en mode normal. Par
contre, une fois passé en mode en mode avancé les
modifications ne pourrons plus se faire que par le code auquel vous
avez accès en cliquant sur le lien Editer les fichiers de ce
modèle.
Nous allons voir sur ce qui
suit le cas ou vous auriez omis de configurer des blocs que vous
désireriez par la suite faire apparaître sur votre
blog.
Ce qui suit est également valable pour
changer l’ordre et la disposition des blocs en question.
Il
faut tout d’abord examiner le choix de la configuration
actuelle de votre blog :
Est-ce un modèle avec 2
ou trois colonnes ?
Partant de cette
considération, le plus simple est à mon avis de
créer un nouveau modèle (explications ici ) de la
même structure que le blog désiré et
ensuite de configurer les blocs tel que vous voudriez qu’ils
apparaissent sur le modèle final.
Je vais prendre
pour exemple le cas le plus complet où tous les blocs
disponibles seront utilisés sur un modèle
à trois colonnes avec menu à gauche et
à droite.
Pour cet exemple
j’ai donc ajouté un nouveau modèle,
j’ai choisi un thème parmi ceux
proposé, peu importe lequel car ils sont tous semblables
pour ce qui concerne le code html.
J’ai choisi
comme apparence générale 3 colonnes avec menu
à gauche et à droite.
J’ai
ensuite configuré les blocs en sorte de les utiliser tous et
en les répartissant au hasard sur les colonnes de menu
gauche et droite. Peu importe encore une fois car nous apprendrons
à les discerner plus loin. J’ai enfin converti ce
modèle en mode avancé. J’ai
nommé ce modèle 3 colonnes pour le retrouver
aisément dans la liste des modèles
déjà crées.
Ce
modèle n’étant utilisé que
pour récupérer le code qui nous
intéresse, je n’ai pas besoin de cliquer sur
Utiliser ce modèle.
Je me contente donc de
cliquer sur Editer les fichiers de ce modèle et
sélectionne la page d’accueil.
La
présentation du code d’origine des fichiers de
canalblog n’est pas optimale pour pouvoir y travailler
directement. Les programmeurs utilisent pour y voir plus clair ce que
l’on appelle l’indentation. L’indentation
est une forme de présentation qui rend le code plus lisible
et facilement vérifiable, ce qui n’est pas un luxe
lorsque l’on recherche la source d’une erreur.
Comme
une démonstration vaut souvent mieux qu’un long
discours voilà ce que donne le code de la page
d’accueil avec indentation :
<!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>
<title><$BlogPageTitle$></title>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<meta http-equiv="content-language" content="<$BlogLanguage$>" />
<meta name="Description" content="<$BlogDescription$>" />
<meta name="Keywords" content="<$BlogKeywords$>" />
<meta name="generator" content="CanalBlog - http://www.canalblog.com" />
<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" />
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" />
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />
</head>
<body>
<div id="container">
<div id="topbar-logo">
<div class="logolink"><a href="<$BlogURL$>"></a></div>
</div>
<div id="topbar">
<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1>
<h2><$BlogDescription$></h2>
</div>
<div id="leftbar">
<div class="navlinks">
<div class="title">Derniers messages</div>
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
<div class="title">Archives</div>
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
<div class="title">Catégories</div>
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
<CBFeeds>
<BlogFeedHeader>
<div class="title">
<a href="<$BlogFeedURL$>"><$BlogFeedTitle$></a>
</div>
</BlogFeedHeader> <$BlogFeedHeadLines$>
</CBFeeds>
<div class="title">Auteurs</div>
<ul>
<CBMembers>
<li><a href="<$BlogMemberProfileURL$>"><$BlogMemberAuthorNickName$></a></li>
</CBMembers>
</ul>
</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>
<$CBControlNavLinks$>
</div>
</div>
<div id="rightbar">
<div class="navlinks">
<CBCalendar><$BlogCalendar$></CBCalendar>
<BloggerFriendLinks>
<BlogFriendLinkHeader>
<div class="title"><$BlogFriendLinkCategoryName$></div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter>
</BloggerFriendLinks>
<BlogSiteFeed>
<div class="item">
<a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a>
</div>
</BlogSiteFeed>
<CBOwner>
<BlogOwnerPictureURL>
<div class="image">
<a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a>
</div>
</BlogOwnerPictureURL>
</CBOwner>
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l\'auteur</a>'); //
-->
</script>
</div>
<div class="title">Derniers commentaires</div>
<ul>
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
<div>
</div>
<div class="clear"> </div>
</div>
</body>
</html>
