Memo

Notre équipe a apporté un soin tout particulier à l'apparence de votre weblog. Nous vous proposons dans les rubriques de l'onglet Présentation de modifier la présentation de votre blog en choisissant parmi les modèles qui vous sont proposés pour les personnaliser à votre guise.

Comme pour toutes les autres fonctionnalités, aucune compétence informatique n'est requise pour modifier l'habillage graphique de votre weblog. Néanmoins, afin de satisfaire aussi les plus expérimentés, nous vous proposons dans la section Configuration avancée un accès à l'ensemble des pages HTML et à la feuille de style de votre blog.

Vous pouvez modifier la présentation de votre blog aussi souvent que vous le souhaitez. Alors n'hésitez pas à les essayer !

Pour gérer la présentation de votre blog, vous devez être identifié au service :

1. Cliquez sur l’onglet Présentation.
2. Choisissez un modèle puis personnalisez le en cliquant sur le lien Personnaliser
3. Pour appliquer à votre blog le nouvel habillage choisi, cliquez sur le bouton Utiliser ce modèle.

Votre weblog possède généralement 2 colonnes et 1 partie centrale dans laquelle s'affichent vos notes. Nous appelons bloc un élément de colonne (par exemple : le bloc catégories, archives, à propos, album photo, etc.).

Pour ajouter ou retirer des blocs à vos colonnes et modifier leur position dans les colonnes, cliquez sur la section Contenu des colonnes.

• Pour modifier l'ordre des blocs dans les colonnes, utilisez les boutons flèches haut et bas.
• Pour passer un bloc de la colonne gauche à la colonne de droite (ou de celle de droite à celle de gauche), sélectionnez le bloc et cliquez sur le bouton flèche droite (ou sur le bouton flèche gauche) au centre au dessus de la vignette d'illustration.
• Pour retirer un bloc d'une colonne, sélectionnez le bloc et cliquez sur le bouton X.

La deuxième partie de la page affiche un tableau listant tous les blocs disponibles pour votre weblog.

• Les blocs déjà utilisés (c'est à dire présents dans une de vos colonnes) sont signalés par le libellé Elément déjà utilisé.
• Pour ajouter un bloc à votre colonne gauche (ou à votre colonne droite), cliquez sur le lien Ajouter à gauche (ou Ajouter à droite) du bloc correspondant.

Voici ci-dessous la liste des blocs existant dès la création de votre weblog :

• Votre photo : ce bloc affiche votre photo si vous l'avez au préalable ajoutée dans la section « Page A propos » de la rubrique « Tableau de bord ».
• Calendrier : ce bloc affiche un calendrier qui permettra à vos lecteurs d'accéder à vos notes publiées sur une journée. Seuls les jours qui possèdent au moins une note sont cliquables.
• Notes récentes : ce bloc affiche les 10 dernières notes que vous avez publiées.
• Commentaires récents : ce bloc affiche les 10 derniers commentaires que vous avez reçus et les notes sur lesquelles ces commentaires ont été ajoutés.
• Page A propos : ce bloc affiche un lien vers la page A propos. La page A propos affiche les informations que vous avez saisies dans la rubrique Page A propos de l'onglet Tableau de bord.
• Catégories : ce bloc affiche toutes les catégories qui possèdent au moins une note. Ce bloc permettra à vos lecteurs d'accéder à vos notes par thème.
• Archives : ce bloc affiche des liens hebdomadaires ou mensuels qui permettent à vos lecteurs d'accéder à vos notes sur une période donnée. Un lien hebdomadaire ou mensuel ne s'affiche que s'il existe au moins une note publiée sur la période donnée.
• Votre email : ce bloc affiche votre adresse email. Pour que votre adresse ne puisse pas être "aspirée" par des robots pour des usages des spam, nous chiffrons votre adresse email dans le code source de la page.
• Créé par : ce bloc affiche le sticker de la plateforme.
• Syndication : ce bloc affiche les stickers de syndication. Ils permettent à vos lecteurs de syndiquer votre weblog si vous les avez autorisé à le faire dans la section « Syndication » de la rubrique « Tableau de bord ».

D'autres blocs peuvent apparaître à la suite de cette liste si vous créez des listes (de documents, films, liens, livres, musiques, personnes) ou des albums photos.

Attention : cette section est réservée aux initiés du langage HTML. Ne modifiez pas les éléments présents dans cette section si vous n'êtes pas sûrs de vos choix.

La rubrique Configuration avancée permet aux internautes webdesigners de personnaliser intégralement la présentation de leur blog. Chaque modèle de page utilisé pour l'affichage du blog et la feuille de styles peuvent être modifiés.

Pour modifier l'habillage de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation.
2. Choisissez le modèle qui correspond le mieux au sujet de votre blog. Notez que vous pouvez cliquer sur Aperçu pour le prévisualiser.
3. Personnalisez votre modèle en cliquant sur le bouton Personnaliser. Pour appliquer à votre blog le nouvel habillage choisi, cliquez sur le bouton Utiliser ce modèle. L'habillage de votre blog est modifié.

1. Cliquez sur l'onglet Présentation puis sur Configuration avancée.
2. Cliquez sur le lien Modifier le template du modèle Feuille de style. Vous pourrez par exemple modifier la bannière de votre blog.

Note importante : après avoir effectué cette opération, lorsque vous visualisez votre blog, pensez à rafraîchir la page de votre blog en tapant la commande ctrl + F5 (PC) ou Cmd-Shift-r (Mac) pour faire apparaître les modifications apportées.

Pour insérer une bannière sur votre blog, vous devez être identifié au service.
L'insertion d'une bannière se déroule en 2 étapes :

1. ajout de votre bannière dans votre gestionnaire de fichiers.
2. mise en place de votre bannière via la rubrique Configuration avancée de l'onglet 'Présentation.

Insertion de votre bannière dans le gestionnaire de fichiers

1. Cliquez sur l'onglet Tableau de bord puis sur Fichiers.
2. Chargez votre bannière sur nos serveurs :
   1. Cliquez sur le répertoire images.
   2. Ajoutez votre bannière grâce au formulaire Ajouter un fichier.
   3. Une fois le chargement terminé, notez l'adresse (l'URL) de votre bannière. L'adresse est du type : http://mon-blog.blogspirit.com/images/mabanniere.jpg. Notez que si votre bannière se trouve sur un autre serveur vous n'avez pas besoin de la charger sur nos serveurs, en revanche il vous faut connaître son URL pour atteindre cette image.

Mise en place de votre bannière sur votre blog

1. Cliquez sur l'onglet Présentation puis sur Configuration avancée.
2. Cliquez le lien Modifier le template du modèle Feuille de styles.
3. Une fenêtre de modification du modèle de feuille de style s'ouvre.

1. Repérez le style "#banner".
   • Supprimez les lignes "height: auto;" et "color: #xxxxxx;" .
   • Insérez la ligne "display:none; ".
2. Repérez le style "#banner-img".
   • Supprimez la ligne "display: none;"
   • Insérez la ligne : "background: #xxxxxx url(http://mon-blog.blogspirit.com/images/mabanniere.ext) no-repeat 0% 0%;" (où xxxxxx est le code hexadecimal de la couleur de fond de votre bannière et http://mon-blog.blogspirit.com/images/mabanniere.ext l'URL de votre image que vous avez chargée dans votre gestionnaire de fichiers ci-avant).
   • Donnez à l'attribut "height:" la hauteur de votre bannière (en pixels). Exemple : si votre bannière fait 90px, écrivez : "height: 90px;"
3. Repérez le style "div.img-link a" :
   • Donnez à l'attribut "height:" la hauteur de votre bannière (la même taille que celle indiquée ci-avant).
4. Cliquez sur le bouton Enregistrer pour appliquer les changements : votre bannière est insérée dans votre blog ! Vous pouvez le vérifier en cliquant sur le lien Voir mon blog présent en haut de la page.

Si tel n'était pas le cas, vérifiez bien chacune des étapes. Vérifiez également que l'URL donnée pour votre bannière est bien valide : pour le vérifier simplement, copiez-collez l'URL de votre bannière dans un navigateur : si votre image n'apparaît pas, votre adresse n'est pas la bonne.

Il est également probable que votre bannière ne soit pas suffisamment large pour l'espace disponible (771px), dans ce cas insérez un code couleur pour remplir l'espace restant : background: #xxxxxx url([URL_de_votre_bannière].jpg) no-repeat 0% 0%; (où #xxxxxx est le code couleur).

Cas particulier des design 4 et 5

Pour les modifications portées sur le design 4 (en comptant à partir du haut de la gauche vers la droite) uniquement:
Au niveau des styles "#container .container-decorator1" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 90px; par la somme suivante : hauteur de votre image + marge de 9px.. Ex : votre image fait 120px en hauteur, le code à insérer est : "129px" Pour les modifications portées sur le design 5 (en comptant à partir du haut de la gauche vers la droite) uniquement :
Au niveau des styles "#container .container-decorator1" et ".album-container .container-decorator3" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 100px; par la somme suivante : hauteur de votre image + marge de 8px.. Ex : votre image fait 120px en hauteur, le code à insérer est : "128px"

Vous avez fait une erreur et vous voulez revenir à al feuille de styles initiale ?

Pour revenir à un affichage de base, allez dans la rubrique Modèles de l'onglet Présentation, puis choisissez un modèle.
Attention ! En choisissant un habillage dans la rubrique Modèle, toutes vos modifications apportées à votre feuille de styles seront perdues.

Note importante : après avoir effectué cette opération, lorsque vous visualisez votre blog, pensez à rafraîchir la page (ctrl + F5) pour vider le cache et faire apparaître les modifications apportées.

Pour insérer du contenu dans l'une des colonnes de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation puis sur la rubrique Contenu des colonnes.
2. Dans la section Ajouter un élément personnalisé, saisissez le Nom de l'élément ainsi que le Contenu de l'élément. Vous pouvez saisir directement le texte ou bien entrer le code HTML approprié.

Pour insérer une image :
1. Ajoutez votre image dans l'onglet Tableau de bord, rubrique Fichiers, Files et copier son url (cliquez sur l'image et copier l'adresse correspondante) du type http://monblog.blogspirit.com/files/mon_image.jpg
2. Tapez dans Contenu de l'élément : <img src="http://monblog.blogspirit.com/files/mon_image.jpg" mce_src="http://monblog.blogspirit.com/files/mon_image.jpg"/> en remplaçant cette adresse par l'adresse de votre image sur votre blog.

Pour insérer une musique qui se déclenche à l'ouverture de votre blog :
1. Ajoutez votre fichier son dans l'onglet Tableau de bord, rubrique Fichiers, Files et copier son url (cliquez sur la musique et copier l'adresse correspondante) du type http://monblog.blogspirit.com/files/ma_musique.mp3
2. Tapez dans Contenu de l'élément : <embed src="http://monblog.blogspirit.com/files/ma_musique.mp3" mce_src="http://monblog.blogspirit.com/files/ma_musique.mp3" hidden="true" autostart="true"></embed> en remplaçant cette adresse par l'adresse de votre fichier mp3 sur votre blog.

Notez que vous pouvez décider d'afficher ou non le nom de l'élément. Vous pouvez également choisir de le centrer ou non dans la colonne.

Pour modifier les éléments de la colonne de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation puis sur la rubrique Contenu des colonnes.
2. Sélectionner l'élément que vous souhaitez retirer cliquez sur le bouton [X].
3. Cliquez sur le bouton Mettre à jour ces informations pour sauvegarder.

Pour modifier l'ordre des éléments de la colonne de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation puis sur la rubrique Contenu des colonnes.
2. Pour modifier l'ordre des éléments dans les colonnes, utilisez les boutons flèches [haut] et [bas].
3. Pour passer un élément de la colonne gauche à la colonne de droite (ou de celle de droite à celle de gauche), sélectionnez l'élément et cliquez sur le bouton flèche [droite] (ou sur le bouton flèche [gauche]) au centre au dessus de la vignette d'illustration.
4. Cliquez sur le bouton Mettre à jour ces informations pour sauvegarder.

Vous pouvez modifier la feuille de styles de votre blog ainsi que tous les gabarits (templates) HTML.

Attention, la modification de la feuille de styles de votre blog nécessite une bonne compréhesion du CSS et HTML. Nous vous recommandons de NE PAS modifier le modèle de la feuille de styles de votre blog si vous n'êtes pas sûr.

Pour modifier la feuille de styles de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation puis sur la rubrique Configuration avancée.
2. Cliquez sur le lien Modifier le template du modèle Feuille de styles.
3. Dans la fenêtre de modification de la feuille de styles, modifiez les styles de votre choix et cliquez sur le bouton Enregistrer ces informations pour sauvegarder.
4. Répétez les opérations ci-dessus jusqu'à obtenir le résultat voulu pour votre blog.

Si vous souhaitez revenir à la version initiale, cochez la case correspondant à la feuille de styles de la liste des modèles et cliquez en bas de page sur le bouton Restaurer la version originale.

Vous pouvez modifier tous les modèles de page (templates) de votre blog.

Attention, la modification des modèles de page nécessite une bonne compréhension du code HTML. Nous vous recommandons de NE PAS modifier les modèles de page de votre blog si vous n'êtes pas sûr.

Pour modifier un modèle de page de votre blog, vous devez être identifié au service.

1. Cliquez sur l'onglet Présentation puis sur la rubrique Configuration avancée.
2. Cliquez sur le lien Modifier le template du modèle de page de votre choix.
3. Dans la fenêtre de modification du modèle de page, modifiez le code de votre choix et cliquez sur le bouton Enregistrer ces informations pour sauvegarder.
4. Répétez les opérations ci-dessus jusqu'à obtenir le résultat voulu pour votre blog.

Si le logiciel vous empêche de valider les modifications que vous souhaitez faire sur vos templates, veuillez vérifier votre code et sa syntaxe. L'insertion de code qui empêcherait le bon fonctionnement d'un template est interdit. Si malgré tout, vous ne parvenez pas à modifier votre template, veuillez contacter notre support technique.

Si vous souhaitez revenir à la version initiale, cochez la case correspondant au modèle de page de la liste des modèles et cliquez en bas de page sur le bouton Restaurer la version originale.