Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Aujourd'hui je vous présente les modifications réalisées pour Sophie de So'Blandices.
Design de Blog Blogge r: So'Blandices
Sophie tient un blog de beauté, mode et lifestyle. Elle partage avec nous des tutoriels (coiffures, maquillage), des conseils, des coups de cœurs. Allez jeter un œil à son blog ;)

Sophie m'a contacté pour changer l'apparence de son blog. Elle aimait son menu et sa bannière, mais n'aimait pas les illustrations de cœurs, n'était plus sûre de vouloir conserver l'affichage en grille de ses articles sur la page d'accueil, et voulait modifier sur quelles pages s'affichait ou non sa barre latérale.

Voici quelques aperçus du blog avant mon travail :

Design de Blog Blogger : So'Blandices
Design de Blog Blogger : So'Blandices
Design de Blog Blogger : So'Blandices

J'ai donc proposé à Sophie une mise en page des articles en aperçu, et non plus en grille. On voit le titre et la date, suivi de la première image, des premières lignes de l'article, un lien "Lire la suite" automatique (pas besoin d'ajouter de marqueur d'expansion aux articles!), un pied d'article comprenant le nombre de commentaires, les libellés, et les boutons de partage vers les réseaux sociaux.

Design de Blog Blogger : So'Blandices
Design de Blog Blogger : So'Blandices

La barre latérale à été rajouté à la page d'accueil, mais supprimée des pages des articles. L'encart d'introduction à été modifié : fond vert d'eau avec bordure blanche, rajout d'une plume en bas de l'encart, modification de la police du titre, et suppression de l'image.

Le gadget d'articles associés à été modifié pour n'afficher plus que 4 aperçus, plus grands. Le titre de ce gadget à aussi été traduit en français.

Design de Blog Blogger : So'Blandices

Pour finir, les cœurs du pied de page on été remplacés par des plumes.

Design de Blog Blogger : So'Blandices

Modifications réalisées

  • Apparence automatique des articles en aperçus sur la page d'accueil
  • Suppression de la barre latérale sur les pages d'articles, et rajout de la barre latérale sur la page d'accueil
  • Modification l'apparence de l'encart d'introduction de la barre latérale
  • Remplacement, ou suppression des illustrations de cœurs pour des plumes
  • Modification de l'apparence et de la mise en page des dates et titres des articles
  • Modification de l'apparence du pied d'article
  • Modification de l'apparence des articles associés : centrage, augmentation de la taille des images et traduction du titre en français

Autres articles

13 commentaires:

  1. C 'est vraiment du bon travail je pense que un de ces 4 je vais appel a tes services !

    RépondreSupprimer
  2. C'est génial ! Je ne savais pas qu'il était possible de supprimer la barre latérale sur une page et pas sur une autre.

    RépondreSupprimer
  3. bonjour Lady Bird
    tu as très bien travaillé sur ce blog ! Bravo
    jo

    RépondreSupprimer
  4. Dis, comment supprimes-tu la barre latérale d'une page statique ? J'ai essayé et ca fait simplement disparaître les gadgets, pas la barre latérale

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah, pour supprimer la barre latérale d'une page statique il faut ajouter un code CSS qui ne sera effective que sur la page souhaitée. Je vais faire un tutoriel qui explique comment ajouter des codes CSS sur certaines pages, mais en attendant sur quelle page souhaites-tu faire disparaître ta barre latérale ?

      Supprimer
    2. Sur ma page contact, que je souhaite complètement modifier : http://sarahphotographie.blogspot.fr/p/contact.html

      Supprimer
    3. Bonjour Sarah,
      Rajoutes ces codes à la suite du code que tu as ajouté pour cacher la barre latérale sur ta page de contact :

      aside {
      display: none;
      }

      .main-inner .columns {
      padding: 0 !important;
      }

      .fauxcolumn-inner {
      border: none !important;
      }

      Ça devrait régler le problème ;)

      Supprimer
    4. Bonjour Catherine,

      Ça n'a rien changé.
      Mais je pense que je rajoute ce code au mauvais endroit.

      Pour cacher la barre latérale j'ai ajouté le code suivant dans le corps du message de ma page contact :

      .sidebar {display: none;}
      (y à la place du i de "stile, sinon je ne pouvais pas publier mon commentaire)

      Mais à mon avis c'est pas le bon endroit

      Supprimer
    5. Ah oui effectivement c'est pas le bon endroit ^^
      Vas dans Modèle > Modifier le code HTML. Cherches le code suivant :

      </body>

      Juste au-dessus de cette ligne colles :

      <b:if cond='data:blog.url == "http://sarahphotographie.blogspot.fr/p/contact.html"'>
      <style type='text/css'>
      aside {
      display: none;
      }
      .main-inner .columns {
      padding: 0 !important;
      }
      .fauxcolumn-inner {
      border: none !important;
      }
      </style>
      </b:if>

      Sauvegardes et dis-moi si ça marche

      Supprimer
    6. Essaye avec le code suivant :

      <b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/contact.html&quot;'>
      <style type='text/css'>
      aside {
      display: none;
      }
      .main-inner .columns {
      padding: 0 !important;
      }
      .fauxcolumn-inner {
      border: none !important;
      }
      </style>
      </b:if>

      En le collant après la ligne qui commence par :

      <body

      Au lieu de :

      </body>

      Supprimer
    7. Super merci, ca a fonctionné !
      Tu es vraiment douée :)

      Supprimer
  5. Merci pour ton très beau blog, c'est vraiment très intéressant et pratique.

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger