[Tuto6a]Menu de navigations Gauche
Vi, je suis un peu fatigué, donc je ferai le second demain :-)
Donc au menu dans cette barre de navigation:
- la classe navlinks,
- la classe title,
- Calendrier, archives, categories, album photo, derniers messages, derniers commentaires.
Donc la class navlinks sert a la mise en forme de tout ce qui est dans le menu. Nénanmoins, on peut échapper a ce formatage en mettant du contenu hors de cette div. Elle a comme classe fille title qui se retrouve utilisée... pour tous les titres du menu... des blocs quoi. Mais elle sert également à définir le style des listes en appliquant un style à .navlinks ul et .navlinks li. Pourquoi je laisse .navlinks devant? Car si on mettait une liste dans un billet par exemple, le billet ne contenant pas la div navlinks, la liste ne prendrai pas le même style que celui des menus.
Enfin, nous avons .item pour ce qui n'est pas une liste.
Ensuite, le code des blocs commentés:
- le calendrier:
<CBCalendar>
<$BlogCalendar$>
</CBCalendar>
Généré automatiquement par CB, il affiche le calendrier dans une div avec id="calendar". Cette div comporte un tableau (table), portant en titre le mois en cours (caption), en titre de colonnes les jours de la semaine (th) puis les jours numérotés chacun dans une case individuelle (td) et sur plusieurs lignes (tr).
Au final, le code ressemble à cela:
<div id="calendar">
<table>
<caption> <a href ="lien vers mois précédent"><< </a>Mois Année </caption>
<tr> <th>dim</th><th>lun</th><th>mar</th><th>mer</th><th>jeu</th><th>ven</th><th>sam</th> </tr>
<tr><td> </td><td> </td><td> </td><td> </td><td>1 </td><td>2 </td><td>3 </td></tr><tr><td>4 </td><td>5 </td><td>6 </td><td>7 </td><td>8 </td><td>9 </td><td>10 </td></tr>
<tr><td>11 </td><td>12 </td><td>13 </td><td>14 </td><td>15 </td><td>16 </td><td>17 </td></tr><tr><td>18 </td><td>19 </td><td>20 </td><td>21 </td><td>22 </td><td>23 </td><td>24 </td></tr>
<tr><td>25 </td><td>26 </td><td>27 </td><td>28 </td><td>29 </td><td>30 </td><td> </td></tr>
</table>
</div>
-les catégories:
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
Une liste qui se génére automatiquement. CB repère les balises et va chercher dans la base de donnée les informations pour pouvoir implémenter la liste.
- les archives:
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
Même méthode de remplacement. <$BlogArchiveFilmName> indique la page http://pseudo.canalblog.com/archives/index.html.
- album photo:
<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>
et bien... je pense que vous commencez à comprendre. trouver les balises, aller faire une recherche dans la base de donnée...
On met le lien sur une image, le lien sur le titre de l'album en dessous, et voila. Si il y'a plusieurs album, on recommence à la balise <CBAlbum>.
Pis quand y'en a pus, on passe </CBAlbum> et on ferme la liste.
- Derniers Messages:
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
Bis repetitas. une liste des X derniers messages.
- Derniers commentaires:
<ul>
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
Toujours tout pareil. un lien vers le com avec le titre du com en texte, puis le lien vers le billet avec le titre du billet en texte.
Vous constatez que le code est relativement simple. Si vous êtes en mode avancé et que vous voules les ajouter, il vous suffit d'un p'tit copié/collé. Vous pouvez modifier à loisir après... Mais ne touchez JAMAIS aux balises <CB[qqch]></CB[qqch]>. Elles sont très importantes, c'est sur elles que reposent tout le système du blog.
Valaaaa.
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)