Astuces Blog

Un petit blog sans prétentions pour vous aider à créer le votre. Trucs et astuces, questions, aides et entraides…

10 août 2007

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&eacute;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&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>
    </div>
  </div>
  <div style="clear: both;height:0px;">
    &nbsp;
  </div>
</div>
</body>

Posté par Naneu à 00:06 o Tout sur Canalblog Commentaires [0] - Permalien [#]

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * -

Commentaires

Poster un commentaire