Passer en mode avancé 2
Vous voilà désormais avec vos trois modèles. Le mode avancé est bien là.
Vous allez avant toute chose faire un peu le ménage dans vos scripts. Cela vous aidera à vous repérer. Je vous invite à mettre des codes de débuts de chaque bloc pour pouvoir vous repérez rapidement.
Par exemple votre page d'accueil aura toujours ces données
Ci dessous votre entête.
<!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>
NB : Vous verrez souvent des tuto où on vous dira de coller un code avant la balise </head>. C'est donc dans cette partie que vous les mettrez.
Les données qui suivent l'entête sont celles relatives à la bannière et au titre du blog
<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>
Ensuite si vous avez une colonne à gauche vous aurez le début de code suivant
<div id="leftbar"> <div class="navlinks">
Je vous conseille fortement de mettre juste avant cette ligne le texte suivant rédiger comme ce dessous :
<!-- Colonne de gauche-->
<div id="leftbar"> <div class="navlinks">
cette façon d'écrire dans le script vous permet de mettre des repères sans que cela ne se voit de cette façon
<!-- le titre ou votre annotation -->
Si vous voulez vous amuser faite un clic droit sur le fond de la page blogtuto et choisissez code source, vous verrez comme je suis une fervente utilisatrice de ce petit truc!
Après votre colonne de gauche suite à la partie texte.
NB C'est la seule partie de votre script qui soit différentes en fonction des pages du script. Cependant elle commence toujours par
<!-- Partie texte--> (pensez à rajouter cette ligne!)
<div id="content"><div class="blogbody">
et elle finit toujours par
<$CBControlNavLinks$></div></div>
En général le début de la colonne de droite est collée au texte, donc couper le code en renvoyant à la ligne
à ce point précis
<div id="rightbar"><div class="navlinks">
!!i! n'oubliez pas d'ajouter <!-- colonne de droite--> juste avant
le pied de page est introduit par
<div class="clear"> </div></div></body></html>
Voilà si vous avez bien suivi cette deuxième étape, vous avez normalement (grâce à ce code <!--blabla-->) identifier le début des colonnes et de la partie texte. Faites la même chose sur les autres pages de votre blog : page d'un message, page des archives, index des archives, page d'un auteur. Vous savez également où se trouve la balise </head>
Ce tuto vous est offert par Usako. Merci à elle!
Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!
N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!
/http%3A%2F%2Fstorage.canalblog.com%2F33%2F92%2F446950%2F31802299.gif)
/http%3A%2F%2Fstorage.canalblog.com%2F80%2F72%2F446950%2F28426520_o.png)
/http%3A%2F%2Fstorage.canalblog.com%2F50%2F89%2F446950%2F28236911_o.png)
/http%3A%2F%2Fstorage.canalblog.com%2F84%2F62%2F446950%2F28374779.png)