27 août 2008 3 27 /08 /août /2008 06:56


Vous pouvez très simplement modifier le titre de vos modules pour, par exemple, changer "Texte libre" par ce que vous désirez, il vous suffit de vous rendre dans l'onglet "configurer", de cliquer sur le petit marteau de modification du module, d'indiquer le nouveau titre désiré, ensuite valider et c'est déjà fini.
Tous les modules peuvent être modifiés de la sorte excepté ceux du partenariat publicitaire.
 


 
Si vous désirez modifier la couleur ou la taille du titre, il vous faudra être en mode avancé et modifier le CSS
 
La ligne à modifier (ou ajouter) est la suivante :  .box h2 {}
 
 
Vous pouvez y modifier, ou ajouter les informations suivantes :
 

  • Modifier la taille du titre
    par un de ces codes au choix (un seul) :
     

    - En pixels
    (montez ou descendez le nombre de pixels)
    code : font-size: 15px;
     

    - En taille
    (adaptez, xx-small, x-small, small, medium, large, ...)
    code : font-size: x-small;

       
     
    - En pourcentage
    (montez ou descendez le pourcentage pour adapter la taille)
    code : font-size: 120%;

     
     
  • Mettre le titre en gras
    code : font-weight: bold;
      

     
  • Modifier la couleur du titre (trouver les codes de couleur)
    code : color: #0000ff;
      

     
  • Modifier la couleur du fond du titre (trouver les codes de couleur)
    code : background: #FFFFFF;
      

        
  • Mettre une texture ou une image en fond de titre
    code : background-image:url(url_de_votre_image);
      

     
  • Centrer, mettre à gauche ou à droite le titre (center, left ou right)
    code : text-align: center;
     

N'oubliez pas les points virgule entre chaque code, ils sont important !
   
Exemple de ligne modifiée :
.box h2 { color: #0000ff; font-size: 12px; text-align: center; background: #FFFFFF;}

 


 

Aller plus loin ...

 

Repost 0
Published by Farfouille - dans Design
commenter cet article
21 août 2008 4 21 /08 /août /2008 07:09

Quels avantages et inconvénients pour le choix d'un blog sans modules ?

Avantages
- Une esthétique très sobre.
- Une navigation hyper simple et facile.
- Le lecteur voit tout de suite où il veut se rendre.

Inconvénients
- Travail parfois beaucoup plus long pour la mise en ligne d'articles.
- Moins bon référencement car moins de contenu dans chaque page.
- Un tas de fonctions utilisées via les modules ne seront pas accessibles.

Exemples de blogs sans modules :
http://histoires.photos.over-blog.com/
http://photos.pour.enfants.2.over-blog.com/
http://peluches.de.farfouille.over-blog.com/

 

Pourquoi vouloir un blog sans modules ?

Ce système sera parfait dans seulement deux cas :

- Pour un blog qui est un sous-menu d'un autre blog plus important,
comme le menu Halloween est une prolongation de PhotoFarfouille.

- Si dès le départ vous prévoyez de ne pas utiliser toutes les fonctions offertes,
si votre but est de proposer un nombre très limité de thèmes dans une interface minimaliste.

 

Toujours partant ? Alors allons-y ...



ATTENTION, CET ARTICLE CONCERNAIT OVER-BLOG
V1

Pour les nouveaux blogs et les blogs passés en V2, un blog sans modules est possible très simplement, directement via votre configuration, cet article servira donc à vous donner des idées de présentation et des informations très utiles et toujours d'actualité pour la réalisation de votre projet, cependant les exemples servant à illustrer ces idées ont peut-être vu leur design modifié entre-temps.



Niveau débutant mais familiarisé aux fonctions Over-blog.
Accessible aux blogs confiance, privilège et premium.

Cet article contient des liens dans les explications,
cliquez sur eux afin de bien comprendre ces explications.

Vous désirez réaliser un blog mais sans utiliser de modules,
comme sur le menu "
Halloween", c'est tout à fait possible.


Cependant, est-ce vraiment ce dont vous avez besoin ?


Ce que vous désirez est peut-être une page d'introduction ?
Dans ce cas, ce sera PêUR qui vous offrira la solution.

 

Toujours partant ? Alors allons-y ...

Les explications sont sur base du blog Halloween,
cependant ne perdez pas de vue qu'avec un minimum d'imagination,
toutes les options sont possibles, je vous explique la base mais
c'est à vous de personnaliser et d'imaginer ce qui sera votre style ...

Vous en avez pour un bon moment de travail avant que tout soit fonctionnel,
ne l'oubliez pas, pour une publication immédiate il vaut mieux vous contenter
du principe de base des blogs ! Toujours envie ? Alors GO ...

Ce système étant simple mais tout de même assez complexe et contraignant,
il vous faut être déjà quelque peut familiarisé avec Over-blog, je n'expliquerai pas
les choses simples tel que comment insérer un lien, la FAQ vous aidera pour cela.

 

1 La barre de navigation principale

La navigation ici, se fait via l'entête, c'est-à-dire que de n'importe quelle page,
l'accès aux différents menus sera toujours possible.

Une autre possibilité serait un simple lien "accueil" sur chaque page et un menu sur l'accueil.

J'ai choisi de faire un simple tableau contenant les liens texte,
vous pouvez cependant choisir des boutons, des images afin d'y insérer les liens.

L'emplacement de travail pour cette barre de navigation se trouve dans l'onglet "modules",
cliquez le bloc d'entête et travaillez votre entête en y insérant votre bannière
et ensuite votre barre de navigation, image, texte, tableau, selon votre choix.

L'insertion des liens dans le texte ou les images viendra plus tard,
après la création des différents menus, mais vous pouvez déjà insérer le lien vers l'accueil.

 

2 Les Menus

Les menus sont tout simplement soit des articles, soit un lien vers une catégorie, préparez chaque menu dans un article et préparez les différentes catégories comme à l'habitude.
Prenons l'exemple du menu "photos", ce menu est un article et contient des images/bouton qui conduisent aux différentes galeries de photos qui sont des catégories.
Le menu "jeux" conduit à une catégorie, vous pouvez voir la pagination en place pour la navigation, chaque article de la catégorie est ensuite un menu en lui même.
Les liens vers le contenu seront insérés plus tard. Pensez à donner à vos menus des titres explicites car vous devrez souvent les retrouver afin de les modifier. Créer une catégorie "menus" est une bonne idée, ils seront ainsi facilement retrouvables dans votre administration.

 

3 Insérer les liens de menus dans la barre de navigation

Il vous faut trouver l'url de chaque menu, étant donné que vous avez retiré tous vos modules
(onglet "modules", croix rouge, cette opération est réversible), nous allons utiliser une astuce
qui vous servira ensuite pour trouver les url de vos articles sans que le blog ne soit modifié
sans cesse lorsque vous y travaillez, chose que les lecteurs n'appréçieraient pas.

Dans l'administration de vos articles, ouvrez l'article voulu comme si vous alliez le modifier.
Dans la barre d'adresse, l'url se présente comme ceci :
http://admin.over-blog.com/admin-article.php?a=2&recherche=&page=&filtre=&tri=0&Id=1789601&From=1
nous avons besoin du numéro de l'article, ce numéro est unique, c'est la partie en vert ci-dessous :
http://admin.over-blog.com/admin-article.php?a=2&recherche=&page=&filtre=&tri=0&Id=1789601&From=1

L'adresse d'un article est composée de l'adresse de votre blog et des indications suivantes :
http://www.photofarfouille.com/article-1789601.html

La partie verte est à ajouter à l'adresse de votre blog, la série de chiffres étant votre N° d'article.

Une fois cette url trouvée, allez dans votre entête pour l'y insérer dans le menu.

Répètez l'opération pour chaque Menu.

Concernant les liens vers les catégories, ils ne seront plus modifiés par la suite, alors placez tout simplement votre module sur le blog afin d'en relever les url et lorsque tout sera fini, retirez le module.

 

4 Accueil du blog

Créez votre message d'accueil comme bon vous semble.

Si vous ne désirez aucun article en accueil, il vous faut créer un article vide,
vous modifierez ensuite les dates afin que cet article vide reste toujours le premier.
(il existe également cette astuce de PêUR)

Vous pouvez également choisir d'utiliser ce premier article comme message d'accueil
au lieu de la fonction initialement prévue dans "configuration".

Votre blog est à présent prêt à recevoir vos articles.

 

5 Création des articles

Vous procéderez exactement comme au point 3, vous créez votre article et ensuite
le validez, le ré-ouvrez afin d'en prendre son N° qui vous permet de trouver son url.

Ensuite, selon vos menus, vous allez insérer cette url là où elle doit se trouver,
dans son menu ou dans un article précédent si vous choisissez le parcours
d'article en article comme le menu "photos" ou le menu "animations".

 

6 Astuces CSS

Pour supprimer les dates d'article sur le blog, ajoutez cette ligne dans votre CSS
.Date {display : none;}

Pour supprimer les titres d'articles sur le blog, ajoutez cette ligne dans votre CSS
.titreArticle{display : none;}

 

Voilà, si vous avez des questions vous pouvez les laisser en commentaires,
j'adapterai l'article afin d'y répondre, bonne chance !

Repost 0
Published by Farfouille - dans Design
commenter cet article
25 mars 2008 2 25 /03 /mars /2008 06:26

  
Avoir une jolie entête de présentation pour votre blog n'est pas très compliqué, suivez le guide ...
  
 
Trouver ou fabriquer l'image
 
Une image fabriquée par vous même est tout à fait possible, il vous suffit d'utiliser vos photos et n'importe quel logiciel de travail d'image, Paint ou Photofiltre par exemple.
 
La taille de votre image dépendra de la taille de votre blog, il vous faut donc au préalable réaliser votre design de blog et décider la largeur que vous donnerez à votre blog, il n'y a pas de règle générale mais pensez que tous vos visiteurs n'ont pas le même écran que vous, il faut donc que votre blog soit agréable à regarder même pour des petits écrans. Vous pouvez enregistrer votre image en plusieurs tailles et faire des tests, cela prend du temps mais cela vous garantira un bon résultat.
  
Vous préférez obtenir une bannière toute faite ou un fond de base ?
Vous pouvez demander à l'un des bloggeurs bénévoles de vous assister, rendez vous sur le forum Over-blog, dans la partie design, et regardez les propositions dans le fil de présentation des créateurs de bannières, ce fil reste en permanence dans la partie haute du forum design, en couleur orange.
 
 
Héberger votre image
   
Une fois votre image créée, vous devez l'héberger sur le net, pour les niveaux privilège et premium pas de problème quel qu'en soit la taille, utilisez vos répertoires Over-blog, n'oubliez pas de décocher la case d'optimisation avant de charger votre image.
 
Pour le niveau confiance, il vous faudra vous contenter de la dimension maximum autorisée, mais vous avez également la possibilité d'héberger votre image ailleurs, voir la liste de la FAQ
 
 
Placer votre image dans l'entête de votre blog
 
Dans l'administration de votre blog, cliquez l'icône "configurer", choisissez ensuite le bloc d'en-tête, vous voilà dans l'éditeur qui vous permettra de travailler votre entête.
 
Si vous désirez placer un lien de retour vers votre page d'accueil inséré dans votre bannière, voir cette explication.
 
Vous pouvez également placer cette image dans votre CSS (pour utilisateurs avertis), le principe est le même que pour un fond de blog mais la partie à modifier se trouve dans :
 /* entete */ 
 

  

Repost 0
Published by Farfouille - dans Design
commenter cet article
7 mars 2008 5 07 /03 /mars /2008 09:19

  
Vous désirez avoir des liens qui scintillent lorsque l'on passe au dessus avec le curseur de la souris ?
 
Suivez bien "pas à pas" ces explications et ce sera vite réalisé ...
 

  • Pour tous les niveaux de blog
    (confiance, privilège ou premium)  
     
  • Le scintillement des liens se réalise via une image animée, vous devez donc créer ou trouver l'image scintillante vous convenant, des petites étoiles, des bulles, des points, tout peut convenir selon le résultat que vous désirez, il vous faudra peut-être faire de nombreux essais avant de trouver l'image idéale, ne vous découragez pas.
     
  • Hébergez votre image dans vos répertoires, ou chez votre hébergeur habituel et copiez son adresse ( http://... )
    Ne prenez jamais, sauf autorisation, l'adresse de l'image de quelqu'un d'autre sur le net.
      
  • Allez dans la partie "design"
     
  • Cliquez sur "modifier le CSS"   
      
  • Cherchez, au début de votre CSS, la ligne
    a:hover {}
     
  • Entre les parenthèses, cette ligne contient peut-être déjà des informations diverses,  de couleur et soulignement de vos liens par xemple, vous allez ajouter, entre le point-virgule et la parenthèse de fin (a:hover { blablabla; ici }) le code suivant :
      
    background:url(http://adresse_de_votre_image);
      
    ((http://adresse_de_votre_image) étant l'adresse précédement copiée)
      
    ce qui donnera par exemple comme résultat:
    a:hover {
    text-decoration:none; color:#0033FF; background:url(http://idata.over-blog.com/0/09/71/etoiles.gif);}
      

Voilà, c'est déjà terminé, regardez votre blog, actualisez votre page et passez votre souris sur les liens pour admirer votre travail.
Si cela ne fonctionne pas, vérifiez bien chaque parenthèse, points-virgules ou autres signes, chacun ont leur importance. Vérifiez également l'adresse de votre image qui doit être correcte et complète.
 
Bonne chance
   

Repost 0
Published by Farfouille - dans Design
commenter cet article
10 janvier 2008 4 10 /01 /janvier /2008 08:00

Voici une liste d'endroits à visiter afin de trouver LE fond idéal pour votre blog
ou de chouettes textures pour n'importe lequel de vos travaux.
Quelques petits conseils à ne pas oublier lorsque vous placez un fond de blog :

- Toujours vous assurer que l'image est librement utilisable ou demander à son auteur la permission de l'utiliser.

- Enregistrer l'image sur votre PC et la charger ensuite chez votre propre hébergeur, excepté s'il est spécifiquement indiqué que vous pouvez en utiliser l'url. Utiliser l'url d'une image sans la permission du responsable du site source peut être illégal, lisez bien les informations utiles sur le site où vous trouvez votre image.

- Si vous utilisez une image, il est bienvenu, pour en remercier l'auteur, de faire un lien vers son site.

- Pensez que tout le monde n'a pas la même taille d'écran ni la même résolution, si vous choisissez de mettre un fond sous forme de grande image il vous sera plus difficile d'adapter votre design afin que cela soit cohérent pour tous vos visiteurs.

 

Voici donc ma liste de sites testés, elle s'agrandira, vous pouvez également mettre les liens de vos sites favoris en commentaire.

Bonne recherche !

 

 

Comment placer ce fond sur votre blog (over-blog V1) pour la V2 cliquez ICI

Vous devez être en mode "avancé", dans l'accueil de votre administration, à droite, vous avez la possibilité de passer en "mode avancé"

1. Chargez votre image dans votre répertoire photos.

2. A côté de la miniature de l'image chargée, vous avez une petite loupe, positionnez votre curseur sur cette loupe et faites un "clic droit", ensuite choisissez "copier le raccourci" ou "copier l'adresse du lien" (surtout PAS "adresse de l'image" !) suivant le menu proposé, cliquez sur ce choix pour enregistrer l'adresse, collez-là en attente dans un fichier bloc note.

3. Allez dans l'onglet "design".

4. Cliquez sur "modifier le CSS" dans le sous menu à droite

5. Cochez la case "je souhaite modifier moi-même le fichier CSS" - ATTENTION, toute modification érronée du fichier CSS peut gravement endommager votre blog, agissez donc prudement et, avant et après chaque modification, sauvegardez votre CSS dans un fichier bloc-note sur votre ordinateur afin d'avoir la possibilité de réparer en cas de fausse manoeuvre.

6. Au début de votre CSS, cherchez la ligne qui commence par body

7. Dans cette ligne cherchez background

8. La partie à modifier est celle comprise depuis le mot background et le premier point-virgule ;

9. Remplacez cette partie par background-image : url(URLde-votre-image) ;

10. Remplacez URLde-votre-image par l'adresse copiée au point 2 ci-dessus

11. Cliquez "enregistrer" en bas de page

12. Cliquez sur "aperçu" tout en haut à droite, votre blog s'ouvre

13. Cliquez sur le bouton "actualiser" de votre navigateur ou sur les touches ctrl + F5 de votre clavier.

14. Si tout s'est bien déroulé, votre fond est en place, admirez !  

  

 

 

Questions / Réponses

 


 

J'ai réussi à mettre mon fond de blog mais comment rendre le fond de mes articles et modules transparent ?

Cela dépendra de la configuration de votre blog car les CSS sont différents d'un modèle à l'autre, vous devez changer le "background", ou ajouter le code s'il est absent, pour un fond transparent vous mettrez ceci : background-color:transparent;

Vous modifierez, dans la partie "structure", ces lignes suivant votre situation :

#global ou #main (ou #main1, #main2, #main3) pour l'ensemble articles-modules

 pour l'ensemble articles-modules

#main #rightnav ou/et #main #leftnav (1,2 ou 3 suivant votre structure) pour les colones de modules

#main #content (1,2 ou3) pour la colone des articles

exemple de ligne modifiée : #main { margin-bottom:5px; background-color:transparent; }

Il y a de nombreux modèles de CSS différents, il vous faudra donc peut-être chercher un peu avant de trouver la bonne ligne à modifier, donc n'oubliez surtout pas, AVANT de commencer vos modifications, faites une sauvegarde de votre CSS complet dans un fichier bloc-note, ceci afin de le remettre et recommencer si vos eventuelles erreurs dénaturent votre blog.

N'oubliez pas que les points-virgule et parenthèses sont très importants !

 


 

Voir plus loin ...
 

Repost 0
Published by Aide-Blog - dans Design
commenter cet article
18 juillet 2006 2 18 /07 /juillet /2006 09:26

  
Il est très simple de rendre invisible sur votre blog les dates et titres d'articles.
 
Vous devez être en mode avancé,
fonction à activer dans l'accueil de votre administration, à droite, cliquez "changer de mode".
  
Le travail se fera via le CSS, donc pour utilisateur averti !
 
Vous pourrez continuer à mettre les titres que vous désirez,
ils seront visibles dans votre administration mais pas sur le blog.
  
Tous les titres et/ou toutes les dates seront invisibles, même pour les anciens articles.
  

  • Allez dans l'onglet "design".
     
  • Cliquez "modifier le css" dans le sous menu de droite.
     
  • N'oubliez pas de cocher la case "je souhaite modifier le fichier css" si c'est votre première modification.
      
  • Dans votre CSS, dans la partie /* Articles */ afin de facilement retrouver les modifications, ajoutez ceci :
      
         .Date {display : none; }  pour rendre invisible les dates.
         
         .titreArticle {display: none;}  pour rendre invisible les titres d'articles.
     
  • Cliquez "enregistrer" en bas de page
     
  • Visualisez votre blog et actualisez votre page via le bouton "actualiser" de votre navigateur.
     

L'opération est réversible, il faudra simplement retirer les lignes qui ont été ajoutées dans le CSS, tous les titres et/ou dates deviendront alors visibles, y compris pour les articles publiés pendant le temps de cette modification.

   

Repost 0
Published by Farfouille - dans Design
commenter cet article
14 juillet 2006 5 14 /07 /juillet /2006 13:52

 
Vous désirez mettre un fond sur un seul de vos articles ou sur votre message d'accueil ?
 
C'est tout à fait possible et très simple à réaliser pour tous les niveaux de blog si vous suivez bien pas à pas ces explications ...
  

  • Votre blog doit être en mode "avancé".
    (à droite dans l'accueil de votre administration, cliquez "changer de mode")
      
  • Chargez la texture ou la photo désirée dans vos répertoires ou chez votre hébergeur d'images.
      
  • Relevez l'URL de cette image et collez-là en attente dans un fichier bloc note.
    (sur Over-blog, sous la miniature de l'image chargée, vous avez une petite loupe, positionnez votre curseur sur cette loupe et faites un "clic droit", ensuite choisissez "copier le raccourci" ou "copier l'adresse du lien" suivant le menu proposé, cliquez sur ce choix pour enregistrer l'adresse.)
      
  • Ecrivez votre article tout à fait normalement, avec vos éventuelles illustrations, faites la mise en forme du texte, ...
      
  • Lorsque votre article est terminé, cliquez sur "source".
    (en haut à gauche dans votre barre d'outils de l'éditeur d'articles)
      
  • Tout au début du contenu du mode source, collez ce code :
      
    <div style="background-image:url(
    URL_image); width: 100%; height: 100%">
      
    (URL_image étant celle mise en attente sur votre fichier bloc-note)
      
  • Tout à la fin du contenu, collez ceci : </div>
      
  • Cliquez de nouveau sur "source" dans votre barre d'outils et vérifiez votre article.
      
  • Si tout est à votre goût en prévisualisant votre article, vous pouvez le mettre en ligne de manière habituelle.
     

 

Repost 0
Published by Farfouille - dans Design
commenter cet article
15 juin 2006 4 15 /06 /juin /2006 21:52

 
Il y a deux moyens qui permettent de donner une impression d'objets qui bougent ou tombent sur votre Over-blog.

La première possibilité, accessible à tous les niveaux (confiance, privilège ou premium) et très simple, consiste à placer un gif animé en fond de blog, en suivant le tutoriel  (cliquez ici), les objets se trouveront en arrière plan de vos articles.

Si vous désirez des objets qui tombent devant vos articles, il vous faudra être en niveau privilège ou premium car cette fonctionnalité demande l'usage d'un script, vous trouverez ce script, des explications détaillées et même des modèles prêts à l'emploi sur le blog de Ticman [EDIT : Ticman ayant arrêté son blog, le script n'est actuellement plus disponible]

Autres articles concernant ce sujet sur la FAQ et CSS inside

Repost 0
Published by Farfouille - dans Design
commenter cet article

Recherche

test du compteur

Il y a actuellement    personnes connectées à Over-Blog dont    sur ce blog