Après ces quelques jours passé à peaufiner des articles pour mon blog Café biblique, je vous propose le premier article d’une série consacrée à la compréhension du code html des modèles blogger.
Nous allons ici nous attarder sur la partie contenue entre les balises <body> et </body>. Cette partie comporte en général 4 sections : L’entête (Header), La colonne centrale (Main, elle contient l’espace dédié aux articles), la colonne latérale (Sidebar) et le bas de page (Footer).
Comme enseigné par Webtalks, la partie contenue entre les balises <body> et </body> des modèlesBlogger ressemble à quelque chose comme ceci :
010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>
De la ligne 010 à la ligne 320 nous avons les balises body dans lesquelles se trouve le corps de votre blog.
De la ligne 020 à la ligne 310 nous avons les balises div pour les deux wrappers, le wrapper appelé "outer-wrapper" et le wrapper appelé "wrap2". Dans la partie dédiée au CSS vous pouvez définir la police, la couleur et les autres styles pour ces wrappers. Nous en parlerons dans un tuto dedié au CSS d’un modèle Blogger.
Les lignes 080 à 120 contiennent l’entête (header). Le div-wrapper ouvert à la ligne 080 est fermé à la ligne 120. La balise pour la section contenant l’entête s’ouvre à la ligne 090 et est fermée à la ligne 110. Le widget de l’entête proprement dite se trouve à la ligne 100. Allez voir cet article savoir comment ajouter un autre widget à l’entête.
Dans les lignes 130 à 270 est inclus le contenu (Content). Le contenu ici signifie : les articles du blog ainsi que la colonne latérale. Il existe un div-wrapper appelé "content-wrapper" (ouvert à la ligne 130 et fermé à la ligne 270), à l’intérieur duquel se trouvent deux autres : le wrapper de la colonne centrale ("main-wrapper ", ouvert à la ligne 140 et fermé à la ligne 180) et le wrapper de la colonne latérale ( "sidebar-wrapper", ouvert à la ligne 190 et fermé à la ligne 240).
A l’intérieur du main-wrapper nous trouvons la section centrale (main-section, ouverte à la ligne 150 et fermée à la ligne 170) contenant le Blog-widget (ligne 160). C’est le widget contenant vos articles à ne jamais effacer. Allez voir cet article savoir comment ajouter un autre widget à la colonne centrale de votre blog.
A l’intérieur du sidebar-wrapper (190 à 240) nous trouvons la section ouverte à la ligne 200 et fermée à la ligne 230 contenant les éléments de la colonne latérale, notamment le widget pour les archives (ligne 210) et le widget pour le profil (ligne 220).
Finalement, nous avons le bas de page (280-300).
Espérons que nous comprendrons mieux le code html de Blogger (oups! après plus de 7 mois, on dirait que c'est le premier lien que je fais vers Blogger. Quand même étonnant !)
Si cet article vous a plus, vous pouvez
souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore
rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à
vos favoris sur Technorati.
Très cool merci !!!
RépondreSupprimer@ Admin@T.F. : De rien
RépondreSupprimermerci bauc
RépondreSupprimer