Mode avancé, tuto en cours de rédaction

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&eacute;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&eacute; par <$BlogItemAuthorNickname$> &agrave; <$BlogItemDateTime$>
	    <BlogItemCategories>
	    - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette cat&eacute;gorie"><$BlogItemCategoryName$></a>
	    </BlogItemCategories>
	    <BlogItemComments>
	    - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a>
	    </BlogItemComments>
	    <BlogItemTrackBacks>
	    - <a href="<$BlogItemTrackBacksURL$>" title="R&eacute;troliens">R&eacute;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">&nbsp;</div>

  </div>
</body>

</html>