L'étape 1 étant terminée, tous vos billets constituant les pages de votre site étant créés, vous allez à présent noter certaines informations.

ETAPE N° 2

1°) Affichez votre blog dans le navigateur comme le ferait un de vos visiteurs, c'est-à-dire sans vous connecter sur votre panneau d'administration.

Ayez près de vous l'arborescence de votre futur site, construite à l'étape n°1. Cliquez sur le titre de chaque dernier billet et notez l'URL, qui s'affiche dans la barre d'adresse de votre navigateur, en face des rubriques respectives de votre arborescence.

2°) Gardez précieusement votre arborescence près de vous sur laquelle figure l'URL de vos billets.

3°) Vous allez à présent construire le site. Allez dans votre panneau d'administration et cliquez sur l'onglet «Interfaces/Personnaliser son interface». Vous allez créer vos titres de rubriques (cf. votre arborescence) et ajouter les sous-rubriques avec les liens des billets respectifs (créés à l'étape n°1).

Recherchez dans le code de votre interface les lignes suivantes et remplacez-les par les lignes d'exemple pour la rubrique 1 :

< Categories>
< h3>Catégories< /h3>
< ul class="menugauche">
< CategoriesList>
< li>< %NomCategorie%>< /li>
< /CategoriesList>
< /ul>
< /Categories>

Exemple pour la Rubrique 1 :

< h3>Rubrique 1< /h3>
< ul class="menugauche">
< li>< a href="url-du-billet-sous-rubrique-1>Sous-rubrique 1< /a>< /li>
< li>< a href="url-du-billet-sous-rubrique-2>Sous-rubrique 2< /a>< /li>
< /ul>

Répétez ces 5 lignes en autant de fois que vous avez de rubriques.
Bien évidemment, si vos rubriques comportent plusieurs sous-rubriques, vous aurez à copier la ligne :
< li>< a href="url-du-billet-sous-rubrique-2>Sous-rubrique 2< /a>< /li>
en autant de fois que de sous-rubriques, sans oublier de renseigner le titre et la bonne URL pour chacune d'elles.

Puis, supprimez les lignes suivantes :

< DerniersBillets>
< p class="pseudo">Derniers billets< /p>
< ul class="menugauche">
< DernierBillet>
< li class="derniersbillets">< %DernierBilletTitre%>< /li>< /DernierBillet>
< /ul>
< /DerniersBillets>
< /div>

ATTENTION : il convient de supprimer les espaces situées après chaque signe <

* * *

Vous pouvez par la suite encore améliorer l'apparence de votre site, voire ajouter d'autres rubriques et sous-rubriques en procédant de la même façon. Il vous reste à rendre votre blog public (Onglet «Préférences/Préférences du blog» sur la ligne Référencement, sélectionnez «Activé») et à procéder au référencement auprès des moteurs de recherches.

Si vous rencontrez des difficultés, vous pouvez toujours me contacter. D'autre part, recevoir un message des bloggeurs, qui auront construit leur site grâce à ce tutorial et à Zeblog, me ferait très plaisir.

Imprimer cette page

Grâce à la possibilité de modifier entièrement le code de votre interface, vous pouvez transformer votre blog en site gracieusement hébergé par ZeBlog. La réalisation d'un tel site sera développée en plusieurs étapes.

J'utiliserai dans mes exemples le code de l'interface «classique» qui me paraît assez simple et que j'ai allégée en ne laissant que les éléments nécessaires à votre projet de site.

Téléchargez ici cette interface

Ainsi, vous pourrez créer un site, par exemple, pour un CV en ligne dont vous mentionnerez l'URL dans votre mail lors d'une candidature, ou bien, un site d'un projet personnel.

ETAPE N° 1

1°) Pendant la construction du site, vous devez rendre votre blog «privé» en paramétrant, dans l'onglet «Préférences/Préférences du blog», le Référencement comme «désactivé».

Cette opération est la même si vous ne souhaitez pas que votre blog soit vu de la communauté.
L'accueil de ZeBlog n'affichera aucune information lors de la publication de vos billets.

2°) Retravaillez, si besoin, le design de votre futur site en intervenant sur les styles CSS (il s'agit des lignes avec des paramètres entre { } figurant dans le code de votre interface avant la balise <‍/head> et déterminant entre autres les couleurs du site). Un minimum de connaissances en HTML et CSS est requis pour modifier ces lignes.

3°) Construisez ensuite l'arborescence de votre site : il s'agit de faire un schéma de la position des éléments de votre site, l'ordre des billets que vous allez crer...

4°) Créer les billets qui seront les différentes pages de votre futur site.

En reprenant l'exemple de l'arborescence ci-dessus, vous aurez :

- Rubrique 1 > avec 2 sous-rubriques = 2 pages = 2 billets,
- Rubrique 2 > avec 2 sous-rubriques = 2 pages = 2 billets,
- Rubrique 3 > avec 2 sous-rubriques = 2 pages = 2 billets,
- Rubrique 4 > avec 2 sous-rubriques = 2 pages = 2 billets,

soit un total de 8 billets plus le billet d'accueil
= 9 billets à rédiger.

Ne vous souciez pas des catégories et n'en créez pas, nous les construirons avec le site.

Allez dans l'onglet «Plugins» et paramétrez le nombre de «Derniers billets» qui doit être au moins égal ou supérieur au nombre de billets créés précédemment, soit dans notre exemple supérieur ou égal à 9.

* * *

Pour cette première étape, cela vous paraît peut-être léger comme explication mais cela vous laisse le temps de bien peaufiner l'aspect et le contenu de votre site. Réfléchissez bien également à l'ordre dans lequel vos billets ainsi créés devront s'afficher sur votre site.

La suite dans un prochain billet...

Imprimer cette page

Certains bloggeurs n'ont pas procédé à la mise à jour requise par le Webmestre. Cela provoque chez certains l'absence de liste des derniers billets.

Pour modifier ce manque sur votre blog, entrez dans l'onglet «Interfaces» de votre panneau d'administration et procédez comme suit :

1°) recherchez dans le code (*) de votre interface les lignes suivantes :

< h3>Derniers billets< /h3>
< ul class="menugauche">
< DerniersBillets>
< li class="derniersbillets">< %DernierBilletTitre%>< /li>
< /DerniersBillets>
< /ul>

2°) remplacez ces lignes par les suivantes (*) :

< DerniersBillets>
< h3>Derniers billets< /h3>
< ul class="menugauche">
< DernierBillet>
< li class="derniersbillets">< %DernierBilletTitre%>< /li>
< /DernierBillet>
< /ul>
< /DerniersBillets>

< DerniersCommentaires>
< h3>Derniers commentaires< /h3>
< ul class="menugauche">
< DernierCommentaire>
< li class="derniersbillets">< %DernierCommentaire%>< /li>
< /DernierCommentaire>
< /ul>
< /DerniersCommentaires>

(*) ATTENTION : supprimez les espaces placées après le signe <

Un petit bug existe lorsque vous prévisualisez le billet en cours de rédaction dans votre panneau d'administration. Vous remarquerez que, pour chacun de vos billets, le titre «Derniers billets» s'affiche. Rassurez-vous, l'affichage pour vos visiteurs est correct.

Une petit horloge est venue s'intégrée sur mon blog grâce à Soso :
Late Last Friday Night

Soso a découvert ce site qui vous permet de choisir parmi plusieurs sortes de pendules et même de choisir la couleur.

Je le(la) remercie de nous faire partager cette trouvaille.

Voici maintenant la marche à suivre pour intégrer cette horloge dans le menu de navigation. Vous devez vous rendre sur le site ClockLink. Vous y trouverez plusieurs sortes d'horloges (voir les onglets Newest, Analog, Digital, Logo Clocks et Custom) avec en plus la possibilité de choisir la couleur qui vous convient (n'oubliez pas de sélectionner le fuseau horaire de votre pays). Quand votre choix est fait, cliquez sur «View HTML tag» et copiez le code qui vous est proposé (ci-dessous un exemple) :

< script src="http://www.clocklink.com/embed.js">< /script>
< script type="text/javascript" language="JavaScript">
< !--
obj = new Object;
obj.clockfile = "2001-Brown.swf";
obj.TimeZone = "NZT";
obj.width = 200;
obj.height = 200;
obj.wmode = "transparent";
showClock(obj);
//-->
< /script>

Collez ce texte dans le code de votre interface avant la balise < /head>.
Puis effacez la ligne showClock(obj);.

Ensuite, insérez les lignes* suivantes à l'emplacement désiré (exemple : avant < Categories > toujours dans le code de votre interface) :

< script type="text/javascript" language="JavaScript">
< --
showClock(obj);
// -->
< /script>

Prévisualisez votre interface en cliquant sur «Aperçu» avant d'enregistrer.

Si l'horloge vous paraît trop grosse, changez les valeurs sur les lignes suivantes :

obj.width = 200;  testez avec 150 ou 100
obj.height = 200; mettez la même valeur

* après avoir copié les lignes, retirez les espaces après ce signe : <