Les explications

TUTORIEL DE L'INTERFACE D'OVER-BLOG

- Bonjour à tous. Dans ce premier article, je vais essayer de présenter toutes les fonctionnalités et les options présentes dans l'espace administrateur du blog. Ce document est téléchargeable au format Word :

sur le Web

sur eMule

(Je rappelle que l'utilisation d'Emule sera illégale en France après la publication de la loi DADVSI au Journal Officiel. Actuellement (fin mai), la loi a été approuvé par le Sénat et il n'y aura pas de seconde lecture, donc c'est pour bientôt.)

Je suis sous Windows XP et Firefox, il se peut qu'il y ait quelques différences avec Internet Explorer. Les utilisateurs de Mac doivent utiliser Firefox sinon ils ne pourront pas poster d'articles.

- Pour se connecter sur l'espace d'administration du blog, il faut se rendre sur la page principale d'Over-Blog, rentrer notre adresse hotmail et le mot de passe et cliquer sur Go! (fenêtre « Authentification » en haut à gauche.)

********************

- Une fois connecté, vous arrivez sur la page principale. Vous voyez différentes infos et liens :

- en haut :    

- le blog rank (indice de référencement du blog) et le classement du blog par rapport aux autres blogs Over-Blog selon cet indice.

- le nombre de visiteurs hebdomadaires et le classement du blog par rapport aux autres blogs Over-Blog selon ce nombre.

- le niveau du blog : Confiance par défaut, passage possible en Privilège (pour avoir plus de possibilités) si le blog rank est supérieur à 80 pendant 7 jours (« Confiance » s'affiche alors en rouge), passage en Premium pour 4,90€ par mois.

- un lien pour aller sur le forum pour avoir de l'aide.

- un lien Aperçu pour ouvrir la page principale du blog afin de voir les changements apportés (si vous ne voyez pas de changements, pensez à vider le cache de la page affichée avec Ctrl + F5.)

- Un lien Quitter pour fermer la session d'administration.
- Une barre affichant toutes les fonctionnalités (que je détaillerai par la suite).

- au centre :

- huit icônes qui renvoient à des fonctionnalités que l'on peut retrouver avec les liens de la barre de dessus (« Créer un article » pour « Articles », « Apparence » pour « Design », « Mes photos » pour « fichiers », etc.)

- un lien explicatif pour « booster » les visites.
- une fenêtre pour changer le mode (je l'ai mis en Avancé, ça offre plus de possibilités, comme la modification du CSS.)

- en bas :

- Des liens vers les dernières annonces officielles d'Over-Blog.

- Des liens vers les derniers sujets du forum d'aide.

La fenêtre Statistiques :

- je ne détaille pas, ce n'est pas très important et pas vraiment compliqué à comprendre.

La fenêtre Articles :

- il y a 5 sous-menus sur la droite :

- Ajouter un article :

- un champ pour le titre de l'article.

- un champ pour la date de mise en ligne de l'article (vous pouvez écrire un article et ne le mettre en ligne que la semaine suivante par exemple en modifiant cette date.)

- un champ Auteur.

- un champ Catégories ( j'ai créé une catégorie par personne, il ne reste plus qu'à sélectionner la vôtre.)

- un champ Mail de l'auteur.

- une case pour autoriser ou non les commentaires par les visiteurs au bas de votre article.

- une fenêtre pour saisir votre texte avec pas mal d'options au-dessus, mais rien de vraiment surprenant par rapport à Word,  surtout qu'une info-bulle apparaît en laissant le curseur dessus.  (juste à signaler la fonction Source qui permet d'afficher le code source de l'article pour le modifier directement; Et pour coller du  texte, il est préférable d'utiliser la fonction "Coller comme texte")

- si vous voulez insérer une image (ou plusieurs) à votre article, la fonction Mettre une image affiche une nouvelle fenêtre. Si vous avez déjà chargé l'image que vous voulez sur le blog, ouvrez votre dossier de fichiers (un par personne) dans le cadre du bas et sélectionnez la photo. Si la photo se trouve sur votre ordi, SELECTIONNER VOTRE DOSSIER DE FICHIERS (UN PAR PERSONNE) DANS LE CADRE DU BAS AVANT DE PARCOURIR VOTRE ORDI ET DE CHARGER LA PHOTO. Sinon, la photo va se charger dans le répertoire principal du blog et il n'est alors plus possible de la déplacer. La seule solution consiste à l'effacer et à la recharger à la bonne place (dans votre dossier).

- Les extensions acceptées pour les images sont : jpg, jpeg, gif, png, zip.

- le .zip permet de charger plusieurs photos à la fois, mais

- La taille maxi par fichier chargé est de 3 Mo (donc ça limite la possibilité du .zip).

- Over-Blog redimensionne automatique votre photo si elle dépasse 600 x 600 pixels.

- Le chargement d'une photo peut être long, voire très long selon votre connection et la taille de l'image. La taille de l'image étant limitée à 600 par 600 pixels : Soit vous avez un bon taux d'upload ou vous êtes patients, vous charger votre photo telle qu'elle est sur votre ordi et vous laisser Over-Blog la redimensionner pour vous; Soit vous trouvez que c'est vraiment trop long, et alors il faut la redimensionner avant de la charger sur le blog. Pour cela, vous pouvez soit utiliser un logiciel de dessin ou de retouche photo que vous connaissez, soit un petit logiciel gratuit que j'ai trouvé (uniquement pour PC. Sur Mac, je n'ai rien pu tester, désolé) :

VSO Image Resizer 1.0.1 (pour le télécharger sur cette page, vous avez soit un lien pour eMule (Commencer le téléchargement), soit un lien classique (Mirroir : téléchargement direct sans partage). L'intallation est facile. L'utilisation et la configuration aussi : clique droit sur l'image, VSO Image Resizer, Profil : 800x600, filtre : minimum, format : identique à l'original, qualité : 100%, Conserver l'aspect original, Action : créer copies, destination : cliquer sur le dossier pour choisir, et enfin OK. Il ne vous reste plus qu'à charger la nouvelle photo créée.

- Liste des articles :

- une fenêtre en 2 parties : au-dessus les articles non publiés (si vous fermez par erreur Firefox ou que votre ordi plante pendant la rédaction d'un article, il y a un système de sauvegarde automatique et votre article apparaît ici. Il ne reste plus qu'à cliquer dessus pour continuer à l'écrire.); en dessous, les articles publiés (aussi modifiables.)

- Gestion des catégories :

- pour supprimer, renommer ou créer des catégories (si vous voulez grouper les articles de plusieurs personnes par exemple.) Un cadre sur la droite explique les différentes fonctions.

- Liste des commentaires :

- pour gérer les commentaires laissés au bas de vos articles.

- Liste des trackbacks :

- pour gérer les trackbacks (liens sur d'autres sites pointant vers des articles du blog.)

La fenêtre Fichiers  pour gérer les photos : cliquez sur Photos :

- j'ai créé un dossier par personne. Vous pouvez en créer un nouveau ou en supprimer. Il est impossible a priori d'en renommer un, donc il faut le supprimer puis en créer un nouveau.

- Il est possible de créer des sous-répertoires.

- Vous pouvez faire d'un répertoire un album photo pour que les photos qu'il contient apparaissent dans les modules (voir plus bas) Images aléatoires et Albums photos sur la première page. On est limité à 5 albums photos donc j'en ai créé un « img-aleat » où vous pouvez charger vos photos préférées (je n'ai pas encore tout compris, on verra par la suite comment on gère les albums photos.)
- Pour charger une photo, ouvrez le répertoire souhaité, cliquez sur  Charger une image, puis la procédure est la même que pour mettre une photo dans un article (voir plus haut, toujours limité à 600x600 pixels.)

La fenêtre Design : Pour changer l'apparence générale du blog :

- pour ceux qui 'y connaissent un peu, les blogs Over-Blog ont une base html qui appelle un fichier CSS pour la mise en page.

- j'ai choisi le modèle 3 et modifié le CSS pour intégrer le fond d'écran, la bannière et le fond des modules. J'ai créé un répertoire Img-blog pour sauvegarder les images qui servent à la présentation.
- pour changer le modèle, il faut rétablir le CSS de base : dans le sous-menu Modifier le CSS (visible uniquement si le mode avancé est activé sur la page principale d'administration), décocher « Je souhaite modifier moi même le fichier css », enregistrer (bouton en bas), recocher « Je souhaite modifier moi même le fichier css », enregistrer à nouveau. Vous obtenez un CSS tout neuf et vous pouvez alors choisir un modèle de base et aller modifier le CSS.

Quelques liens pour comprendre les différentes parties du CSS :
                                   
                                                - Rubrique Programmation et CSS de la FAQ officielle
                                                - Rubrique Design et feuille de style du forum officiel
                                                - Modifications de CSS en questions (Blog perso)
                                                - Peut-êtreUneRéponse (Blog perso)

Ce que j'ai fait :

- choix du modèle 3

- intégration du fond (Photo par Eva à Ares, éclaircie) : chargement de l'image dans le dossier Img-blog, ouverture de la photo dans une nouvelle fenêtre (loupe), relevé l'adresse de l'image, ajout dans le CSS (rubrique : /* ---------- Elements Principaux ------------- */, entrée : body, code : background: url(http://idata.over-blog.com/0/34/41/64/img-blog/fond- blog.jpg);)

- Intégration de la bannière (photo d'un coucher de soleil à Ares dont j'ai modifié la taille : 800x117 pixels): les images sont limitées à 600 pixels de large, un écran de base en faisant 800, j'ai hébergé l'image chez http://imageshack.us (gratuit et à durée illimitée) et inséré l'adresse dans le CSS (rubrique : /* entete */, entrée : #top, code : background: url(http://img104.imageshack.us/img104/1589/banniere4dq.jpg);)

- calé la bannière en haut à droite et la répéter à gauche, pour que sur les config d'écrans supérieures à 800 pixels de large, elle apparaisse sur toute la largeur (rubrique : /* entete */, entrée : #top, code : background-position:top right;)

- élargi la hauteur de l'entête pour répéter la bannière vers le bas sur 5 pixels (45 en tout) et ainsi créer une ligne sous la bannière (rubrique :  /* entete */, entrée : #top, code : padding:45px;)

- intégration du fond des modules (trouvé sur le net et éclairci) : chargement de l'image dans le dossier Img-blog, ouverture de la photo dans une nouvelle fenêtre (loupe), relevé l'adresse de l'image, ajout dans le CSS ( rubrique : /* ---------- Box ---------- */, entrée : .box, code : background: url(http://idata.over-blog.com/0/34/41/64/img-blog/mur-091.jpg);)

- création d'un relief noir sur les modules (rubriques : /* ---------- Box ---------- */, entrée : .box-top, code : 3px outset black;)

- viré le soulignement du lien principal dans la bannière (rubrique : /* entete */, entrée : #top a, code : text-decoration:none;)

- changé la couleur des liens survolés (Rubrique : /* ---------- Elements Principaux ------------- */, entrée : a:hover, code : color:#FF6600;)

Sauvegarde du fichier CSS actuel :  

  téléchargeable :          - ici (Web)

                                   - ici (Emule)

                                   - et une copie en bas de cet article

(pour retrouver ma configuration, recréer un CSS propre avec la procédure décrite ci-dessus, choisir le modèle 3 puis coller les lignes à la fin de l'article dans l'éditeur de CSS, enregistrer.)


La fenêtre Modules :

pour gérer les boîtes qui apparaissent dans la ou les colonnes du blog :

- En-tête :

- pour modifier le titre du blog qui apparaît dans la bannière (le soulignement ne s'enlève pas, il est défini par le CSS, mais n'apparaît pas sur la page; pour modifier les couleurs, il faut modifier le CSS.)

- Pied de page :

- idem. Je pense qu'il n'y a pas besoin de plus d'explications.

- les modules :

- en bas, les modules que l'ont peut rajouter

- en haut à gauche, les modules qui apparaissent dans la colonne de gauche

- en haut à droite : idem pour la colonne de droite

- flèche à gauche : passe un module dans la colonne de gauche

- flèche à droite : je vous laisse deviner

- croix rouge : supprime un module de la colonne (toujours disponible dans le cadre du bas)

- flèches haut et bas : pour trier les modules

- icône Feuille : éditer le module (dont changer le titre)

- pas de modules dans une colonne = pas de colonne sur le blog
- certains modules n'apparaissent pas s'il n'y a rien dedans ( comme les albums photos par exemple. Pour créer un album photo, voir plus haut)

 
 
La fenêtre Configuration :

- ça ne me semble pas très important et pas très compliqué non plus à comprendre.

La fenêtre Profil :

- Idem.

********************

    Voilà. J'ai pas mal détaillé les explications mais pour les fonctions de base, ça ne m'a pas l'air très compliqué. Si vous trouvez des erreurs dans l'article, si vous découvrez une nouvelle fonction, ou si vous voulez apporter une précision, il suffit de le modifier (et de laisser un commentaire SVP). Si vous avez des questions, des propositions ou besoin d'aide, vous pouvez laisser un commentaire.

********************

CSS du 27/05/06 :

/*fichier de structure général externe*/

@import url("/css/commonstruct1.css");/*ne pas enlever cette ligne qui permet l'evolution des css personnalisés*/

/***************************************/

/* ---------- Elements Principaux ------------- */

body { margin:0px; font-weight:bold; font-size:small; background: url(http://idata.over-blog.com/0/34/41/64/img-blog/fond-blog.jpg); }

h1 { color: #5675A4; font-size: 20px; } /*titre des pages*/

h2 { color: #5675A4; font-size: 15px; }

h3 { color: #5675A4; font-size: 12px; }

a { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */

a:hover { text-decoration:none; color:#FF6600;}

legend { color:#5675A4; padding-left:5px; padding-right:5px;}

li { list-style-type:none; }

img { border:0px; } /* image */

input { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* bouton */

/* ---------- Structure ------- */

/* La class main correspond à la structure global du blog

/* le numéro après 'main' correspond au type de structure (1 2 ou trois colonne) */

/* Pour les stuctures avec 2 colonnes */

#main1 { text-align: left; margin: 0px auto 50px auto; }

#main1 #rightnav { padding:10px; width:210px; }

#main1 #leftnav { padding:10px; width:210px; }

#main1 #content { padding:10px; border-left:1px solid #B8B8B8; border-right:1px solid #B8B8B8; }

#main1 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; }

/* Pour les stuctures avec une colonne à droite */

#main2 { text-align: left; margin: 0px auto 50px auto; }

#main2 #rightnav { padding:10px; width:220px; }

#main2 #content { padding: 10px; border-left:1px solid #B8B8B8; border-right:1px solid #B8B8B8; }

#main2 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; }

/* Pour les stuctures avec une colonne à gauche */

#main3 { text-align: left; margin: 0px auto 50px auto; }

#main3 #leftnav { padding:10px; width:220px; }

#main3 #content { padding: 10px; border-left:1px solid #B8B8B8;border-right:1px solid #B8B8B8; }

#main3 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; }

#MainTab { margin:0px; width:100%; }

#MainTab td { vertical-align:top; }

/* entete */

#top { padding:45px; background: url(http://img104.imageshack.us/img104/1589/banniere4dq.jpg); background-position:top right; }

#top h1 { padding:0px; margin:0px; color:#FFFFFF;}

#top a {text-decoration:none; }

.topLien{text-decoration:none;}

.topLien:hover {text-decoration:none;}

/* Bas de page */

#footer { clear:both; padding:10px; background: url(/modele/3/pics/top.png) repeat-x scroll bottom left; color:#FFFFFF; border-bottom: 1px solid gray; }

#footer p { margin:0px; padding: 10px; }

#footer a { text-decoration:underline; color:#FFFFFF; font-size:110%; }

#footer a:hover { text-decoration:none; color:#FFFFFF}

.basLien { }

.basLien:hover { }

.cleaner {clear:both;}

/* ---------- Box ---------- */

.box { width:100%; margin-bottom:10px;color:#FFFFFF; font-weight:bold; background: url(http://idata.over-blog.com/0/34/41/64/img-blog/mur-091.jpg); }

.box h2 { color:#FFFFFF;font-weight:bold; }

.box-top { background: url(/modele/3/pics/box-top-center.png) repeat-x scroll top left;border:3px outset black; }

.box-left { }

.box-right { }

.box-bottom { background:transparent }

.box-topLeft { padding-left:20px;background:transparent url(/modele/3/pics/box-top-left.png) no-repeat scroll top left; }

.box-topRight { }

.box-bottomLeft { }

.box-bottomRight { padding:3px; }

.box-content { background:transparent; overflow:auto; padding:0px 0px 10px 0px; color: #5675A4;}

.box-content p { margin:0px 10px 0px 0px; padding:0px; }

.box-content ul { margin:0px 10px 0px 0px; padding:0px; }

.box-content li { list-style:square; color:#b6b6b6; margin:3px; padding:0px; }

/* ---------- Recherche --- */

#Recherche { padding:0px; }

#WForm { margin:0px; border:solid 1px #D8D7D7; padding:10px; background: #F3F7FC; }

#WForm input { border:solid 1px #D8D7D7; font-size:100%; background:#f4f4f4; color:#5675A4; }

#WForm input:hover { border:solid 1px #5675A4; background:#fff; }

.RNum { font-weight:bold; }

.RDesc { padding:10px; }

.ROut { font-style:italic; color:#A0B8CB; }

.RSize { color:#BFBFBF; }

a.RTitle { text-decoration:none; color:#00275E; }

a.RTitle:hover { text-decoration:none; color:#834141; }

#GGResults { text-align:left; margin:0px; color:#000000; }

.Result1 { padding:4px; background:#F7FAFD; }

.Result2 { padding:4px; background:#FBFBFB; }

/*------------------- Articles ----------------------------------*/

.article { margin-top:10px; padding:0px; }

.article p { padding:0px 0px 5px 5px; margin:0px; }

.Date { width:100%; margin-right:10px;}

.Option { padding:5px 0px 0px 0px; margin:5px 0px 5px 0px; border-top:1px dotted #808080; width:100%; text-align:right; font-size:85%;}

.categorieArticle {} /*categorie de l'article*/

.categorieArticle a {text-transform:lowercase;}

.barreHautArticle {padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:1px solid #808080; width:100%; }

.listArticles { margin-top:0px; margin-bottom:10px; border:1px solid #666666; background-color:#FFFFFF;}

.resumeArticle { background-color:#F9F8FA; border-top:1px solid #F4F4F4;}

.titreArticle{text-decoration:none;}

.titreArticle:hover {text-decoration:none;}

#articleSeul {} /*style d'un article lors de l'affichage de l'article ou de ses commentaires/trackbacks*/

.GcheTexte{float:left; margin:3px;}

.DrteTexte{float:right; margin:3px; }

.CtreTexte{margin:3px auto; display:block;}

.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}

.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}

.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}

.hitperso1 {font-style:italic;}

.hitperso2 {font-weight:bold;}

/*--------------------Commentaires---------------------------- */

.h2commentMessage {color:#3366CC;}

.comment { }

.comment hr { }

.linkcomment {font-size:130%; color:#0099FF;}

.commentMessage { padding:5px; border:1px dotted #999999;background:#F8F8F8; margin:0px;}

.commentOption {text-align:right;font-size:85%;color:#808080; margin-bottom:10px;}

#formComment label { width:70px; }

#formComment input { }

#formComment textarea{ }

/*-------------------trackback----------------------------------*/

#addTrackback { border:1px dotted #999999; padding:5px;}

.affTrackback { padding:5px; border:1px dotted #999999; margin-bottom:10px;}

.affTrackback h2 {}

.linkTrackback {font-size:130%; }

.h2Trackback {color:#3366CC;}

/*-------------------Recommander--------------------------------*/

#divRecommander {}

#divRecommander span {font-size:larger;}

#divRecommander legend {font-size:larger;}

#divRecommander fieldset {padding:3px; margin:5px;}

/*-----------------Newsletter-----------------------------------*/

#divNewsletter h2 {text-align:center; font-size:12pt;}

/*-------------- Calendrier -----------------------------------*/

.calendarTop1 { font-size: 10px; font-style: normal; color:#5675A4; font-weight: bold; background-color:#FFFFFF} /*entete*/

.calendarToday1 { font-size: 10px; font-weight: bold; color:#FFFFFF; background-color:#FF8F00;} /* Aujourd'hui */

.calendarDays1 { width:40px; height:15px; font-size: 10px; font-style: normal; color:#000000; background-color: #FFFFFF; text-align:center;}

.calendarHeader1{ font-size: 10px; background-color:#5C6C7D; color:#FFFFFF;} /* lettre de la semaine */

.calendarTable1 { background-color:#FFFFFF;border:0px solid #5675A4;} /* contour du calendrier */

/*------------------------Divers-----------------------------*/

.cleaner {clear:both;}

/*-------------------------------Accueil album------------------------*/

#centreAccAlbum{}

.AccAlbum{ text-align:center;}

.thumbAccAlbum { display:inline; margin:5px;}

.thumbAccAlbumimg { padding:5px 0px;}

/*-----------------------Album photo--------------------------*/

#bodyAlbum{ background-color:#FFFFFF;}

.topAlbum{}

#generalAbum{width:100%;}

.h2Album { text-align:center; font-size:12pt; }

/*en tete de l'album placee en haut de la fenetre, meme que celle du blog*/

#enteteAlbum{ width:100%; border-bottom:1px solid #222222; font-size:130%;}

#enteteAlbum a {}

#enteteAlbum a:hover {}

.nomPhotoAlbum { font-size:large;}

.lienAlbum {text-decoration:none;}

.lienAlbum:hover{text-decoration:underline;}

/*navigation rapide precedent suivant retour*/

.quickNavAlbum{margin:0px; padding:0px; border:1px groove #666666; width:100%; text-align:center;}

.quickNavAlbum a {text-decoration:none;}

.quickNavAlbum a:hover {text-decoration:underline;}

.precAlbum{ float:left; text-decoration:none; position:relative; padding:0px; margin:0px;}

.retourAlbum{ position:relative; text-decoration:none; padding:0px; margin:0px auto; width:6em;}

.suivAlbum{ float:right; text-decoration:none; position:relative; padding:0px; margin:0px;}

/*miniatures de l'album*/

#centrethumbsAlbum{ }

.thumbsAlbum {padding:2px; width:99%; text-align:center; margin-right:auto; margin-left:auto;}

.thumbAlbum { display:inline; margin:3px;}

.thumbAlbum img {}

/*miniature de la photo courante*/

.thumbCouranteAlbum { display:inline; margin:3 px;}/*miniature de la photo courante*/

.thumbCouranteAlbum img { }

.topLienAlbum{text-decoration:none;}

.topLienAlbum:hover{}

#photo{ text-align:center; }

#photo img {margin: 0px auto; }

.nomPhotoAlbum{ text-align:center;}

#piedAlbum{ width:100%; text-align:center; margin-top:5px;}

#descrAlbum {text-align:center; font-size:larger;}

#menuClicDroit {position:absolute; top:0px;left:0px; z-index:500; visibility:hidden; background-color:#FFFFFF; border:1px solid #677787; padding:3px;}

#menuClicDroit li { list-style-type:none; margin:0px; padding:0px}

#menuClicDroit ul{margin:0px;padding:0px}