Mardi 29 novembre 2011 2 29 /11 /Nov /2011 18:42

On me demande comment j'ai fait pour changer les titres des modules (un peu simpletse il faut l'avouer) en ces MA-GNI-FI-QUES images qui mettent une top ambiance sur mon blog. La réponse est une simple question de bricolage: j'ai simplement inséré des champs "texte libre" entre chaque module, dans lequel j'ai collé une image de ma composition, rien de bien sorcier en somme.

 

Mais les habitués d'Over-blog ne manqueront alors pas de soulever un sourcil dubitatif. En effet, les champs "texte libre" sont limités à 8 par Over-blog (en comptant l'en-tête et le bas de page). Or si l'on fait les comptes, pour Main-d'Air:

  1. un en-tête
  2. un bas de page
  3. les dernières attractions
  4. l'image-titre "Nouveautés"
  5. l'image-titre "Catégories"
  6. l'image-titre "L'auteur"
  7. l'image-titre "Liens"
  8. l'image-titre "Recherche"
  9. l'image-titre "Abonnement"

Cela fait 9! Comment est-ce possible? A quel obscur démon ai-je dû vendre mon âme pour avoir accès à un tel privilège pourtant hors d'atteinte du quidam lambda déambulant dans la rue d'en-face? Eh bien, c'est ce que je m'en vais vous expliquer dans cet article.

 

 

L'astuce!

 

Elle consiste assez simplement à coller le contenu des modules à l'intérieur d'un champ "texte libre", ce qui fait qu'on peut alors en enchaîner plusieurs dans le même champ, qui ne comptera que pour un seul "texte libre" en tout.

 

Ce que l'on voit

Articles

Titre "Nouveautés" (texte libre)

Derniers articles (module)
Titre "Catégories" (texte libre)
Catégories (module)
Titre "L'auteur" (texte libre)
Profil (module)
Titre "Liens" (texte libre)
Liens (module)
Titre "Recherche" (texte libre)
Recherche (module)
Titre "Abonnement" (texte libre)
Newsletter (module)

 

La réalité

Articles

Titre "Nouveautés" (texte libre)

Derniers articles (module)

Titre "Catégories"

Copie du module Catégories

Titre "L'auteur"

Copie du module Profil

Titre "Liens"

Copie du module Liens (texte libre)

Titre "Recherche" (texte libre)
Recherche (module)
Titre "Abonnement" (texte libre)
Newsletter (module)

 

Ainsi, on voit bien que je suis resté dans le quotas, puisque je n'utilise actuellement que 7 des champs "texte libre" auxquels j'ai le droit.

 

 

Et comment c'est-y qu'ça marche?

 

Avant tout, il faut bien comprendre que dans un champ texte libre, vous pouvez mettre n'importe quoi. Et quand je dis n'importe quoi, je veux dire vous pouvez aussi inclure du code HTML. Cliquez sur le bouton HTML dans l'édtieur d'articles et vous verrez à quoi ressemble votre composition dans la mémoire de l'ordinateur. Si vous comprenez ce langage vous pouvez lui faire afficher n'importe quoi, y compris d'autres parties de votre propre blog (ou même d'un autre!).

 

Rassurez-vous, cependant, pour mettre en oeuvre cette astuce, une compréhension exhaustive du HTML n'est pas requise, bien que quelques bases ne soient à mon avis pas de refus pour éviter de se retrouver complètement perdu. Voici un résumé de ce que nous allons faire:

  1. Mettre en forme les modules et les textes libres tels que nous souhaitons les voir apparaître
  2. Copier le code HTML de la page ainsi formée et le coller dans un champ "texte libre"
  3. Effacer les titres des modules

 

Mise en forme des modules

C'est la partie facile. Allez dans l'option Configurer > Mise en page et insérez des module "texte libre" aux endroits que vous souhaitez (dans mon cas, les trois modules Catégories, Profils et Liens entrecoupés de 3 textes libres contenant les images qui leurs servent de titre). C'est tout.

 

Evidemment, les gens studieux du premier rang me feront remarque qu'on ne peut pas mettre en forme la page entière directement puisqu'on n'a justement pas assez de modules "texte libre"! A ces gens, j'adresse tout d'abord mes félicitations, puis je précise qu'il suffit simplement de répéter cette astuce plusieurs fois puisqu'on contractera à chaque fois plusieurs modules en un seul texte libre, ce qui permettra de continuer à mettre en forme avec ceux qu'on aura libérés.

 

Copier le code HTML dans un champ "texte libre"

Ouvrez votre blog qui présente maintenant vos modules tels que vous souhaiteriez les voir affichés au final (du moins une partie). Cherchez dans votre navigateur une option qui ressemble de près ou de loin à "afficher le code source de la page". Cela devrait vous ouvrir une fenêtre contenant plusieurs kilomètres de code HTML. Ne paniquez pas, maîtrisez votre respiration et accrochez-vous bien à votre souris.

 

La seule difficulté va consister à localiser dans ce code inbuvable la partie qui correspond aux modules que vous souhaitez copier. Les modules qui sont sur le côté de nos articles s'appellent des "box" et sont tous introduits par des balises qui ressemblent à:

  • <div class="box text box1">

Un peu plus loin vous trouvez le titre du module concerné qui va donc vous permettre de mettre la main sur celui ou ceux qui vous intéressent. Vous voyez donc l'intérêt d'avoir déjà mis en forme les modules que vous souhaitez copier: vous n'avez qu'à tous les prendre à la suite sans vous poser de question. Le code qui vous intéresse doit se finir par une autre balise:

  • </div>

Pour savoir à laquelle s'arrêter, cherchez de la même façon: dès que vous trouvez le début d'un module qui ne vous intéresse plus, vous savez qu'il suffit de vous arrêtez juste avant.

 

Sélectionnez toute la portion de code ainsi localiser et appuyez sur "copier". Puis retournez dans la mise en page de votre blog, effacez tous les modules que vous comptez copier de cette façon et insérez un module "texte libre" à la place. Editez-le, cliquez sur le bouton HTML en bas à gauche de la barre d'outils, et enfin collez le tout dans cette fenêtre. Après avoir cliqué sur le bouton "mettre à jour", vous pouvez vérifier que votre module contient bien l'intégralité de ce que vous comptiez copier.

 

Effacer les titres des modules

Fébril, vous rechargez la page d'accueil de votre blog pour voir comment se présentent les choses. Si ça vous plaît, arrêtez-vous là, ou bien reprenez l'opération jusqu'à avoir rentabilisé au maximum votre module "texte libre". Si, comme moi, vous comptiez remplacer les titres, il faut maintenant les effacer. Dans l'absolu, il y aurait plusieurs façons de s'y prendre, mais je vais vous présenter celle qui me semble la plus judicieuse, et qui présente de plus l'avantage, ô combien génial, d'être réversible à tout moment.

 

Allez dans l'option Configurer > Design > Personnaliser mon thème et cliquez sur "Appliquer ma feuille de style personnalisée". Encore du code! Mais ce coup-ci, ce n'est plus du HTML, c'est du CSS... Horreur! Appliquez la technique de respiration déjà utilisée précédemment et cherchez l'identifiant:

  • .box-titre h2

Entre les accolades qui suivent, vous trouverez écrit quelque part:

  • font-size:12px

Remplacez le nombre (12 ou n'importe quel autre) par 0, cliquez sur "Enregistrer", et appréciez la magie en rechargeant la page de votre blog.

 

 

Les limites

 

Les gens studieux du premier rang me demanderont pourquoi je n'ai pas mis tous mes modules dans un seul texte libre, du coup. C'est une excellente question à laquelle je m'apprête à donner une réponse. Le problème, voyez-vous, c'est qu'on ne copie pas tout à fait un module mais plutôt le texte qui est dedans. Je m'explique: si je copie par exemple le contenu du module "Derniers articles", je vais copier uniquement les liens vers les articles qui s'y trouvent au moment de la copie, et ils resteront "figés" ensuite, au lieu de se mettre à jour automatiquement à chaque nouvel article. Il m'est toujours possible d'éditer mon texte libre manuellement pour rajouter des liens vers mes nouveaux articles, mais bon, on n'a pas que ça à faire. C'est la raison pour laquelle j'ai copié uniquement les contenus des modules Catégories, Profils et Liens, qui ne changent jamais ou ont de toute façon besoin d'être édités manuellement.

 

Par ailleurs, j'ai été obligé de laisser de côté les modules Newsletter et Recherche pour une autre raison, c'est qu'ils contiennent des instructions à exécuter lorsque l'on appuie sur le bouton, connues sous le nom de Java Script; or, Over-blog bloque le Java Script, tout simplement pour nous faire chier pour notre sécurité. C'est bien dommage, mais enfin, il faut se faire une raison.

 

Et voilà les enfants, j'ai tout dit, si par malheur il restait quelque point obscur, n'hésitez pas à laisser vos questions en commentaire.

Par Perlune - Publié dans : Niouzes et infos
Ecrire un commentaire - Voir les 0 commentaires
Retour à l'accueil

Nouveautés titre

 

http://error.users.micso.fr/blog/3/titre-nouveautes.png

Reste

Catégories titre

 

http://error.users.micso.fr/blog/3/titre-categorie.png

L'auteur titre

 

http://error.users.micso.fr/blog/3/titre-lauteur.png

L'auteur

  • Perlune
  • Main-d'Air
  • Homme
  • France Dijon
  • littérature écrivain astrologie jeu de rôles MBTI
  • Psychologue-astrologue-musicien-écrivain. Main-d'Air d'après la chiromancie. Jupitérien/lunaire d'après l'astrologie moderne. ENFJ d'après le MBTI. De l'arcane de la Papesse (II) d'après le tarot.

Liens titre

 

http://error.users.micso.fr/blog/3/titre-liens.png

Rechercher titre

 

http://error.users.micso.fr/blog/3/titre-recherche.png

Rechercher

Abonnement titre

 

http://error.users.micso.fr/blog/3/titre-abonnement.png

Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés