Design


Dans cette page, je ne vous parlerai pas de lecture mais de mise en page, sur laquelle on m'a posé quelques questions par mail (je suis par ailleurs contente qu'elle plaise).

Certaines questions reviennent souvent et c'est pourquoi j'ai décidé de faire un article pour vous donner les codes/astuces qu'on me demande le plus.


 Pour le défilement d'images à droite du blog :

Vous créez une image (j'utilise Paint personnellement, c'est plus rapide) où vous mettez toutes les couvertures que vous voulez. Après, vous allez dans "Mise en page", vous prenez le gadget "html/javascript" et vous collez le code suivant :

<marquee onmouseover="this.stop();" onmouseout="this.start();"behavior="alternate"scrollamount="7"><img src="le lien de votre image"/></marquee>

A la place du texte coloré, vous mettez le lien de votre image.

• Pour le "Vous aimerez peut être..." en bas de chaque article :

Vous allez sur le site suivant : http://www.linkwithin.com/learn

Rentrez votre adresse mail, l'url de votre blog, choisissez votre plateforme (ici, Blogger) et cliquez sur "Get widget". Une fenêtre va s'ouvrir. Cliquez alors sur "Install widget" dans le petit 1) et enfin sur Ajouter un gadget ! Normalement, c'est bon :)

• Pour les dernières chronique en haut du blog :

Vous faites un nouvel article, sans le publier. Vous insérez vos images et vous leur associez un lien. Ensuite, vous allez dans la partie "Html" (normalement, vous êtes en partie "Rédiger") et vous copiez tout le code.
Vous prenez le gadget "Html/javascript" et vous collez le code que vous avez copié. Enregistrez et le tour est joué !

Pour les vignettes des différentes rubriques des genres (ou autre) :

1ère possibilité : prenez le gadget "Html/Javascript" et copiez le code suivant autant de fois que vous avez d'images à placer :
<a href="lien de votre rubrique"><img src="lien de votre image"/></a>
A la place du texte en bleu, vous mettez le lien de votre rubrique (que vous pouvez récupérer à partir des libellés), et à la place de celui en rouge, le lien de votre image. Vous pouvez insérer des sauts à la ligne grâce à la balise <br/>

Pour centrer le tout, insérez l'ensemble du code dans entre les balises <center> :

<center>ensemble du code</center>

2nde possibilité (plus simple, selon moi) : vous créez un nouveau message, que vous ne publierez pas, et dans lequel vous insérez toutes vos images de catégories. Vous associez à chacune des images le lien qui lui correspond. Vous êtes normalement en mode Rédiger. Passez en mode Html (à gauche de la barre), copiez tout le code et collez-le dans un gadget "Html/Javascript". Vos vignettes sont prêtes !



Si vous avez d'autres questions, qui restent à ma portée bien sûr (n'étant pas une pro en informatique), j'y répondrai avec plaisir !

69 commentaires:

  1. Un IMMENSE merci à toi pour cette aide très précieuse :D
    C'est très agréable d'avoir des personnes prêtes à aider et à partager ainsi ;)

    RépondreSupprimer
    Réponses
    1. Il n'y a pas de quoi !
      Je suis contente de pouvoir t'aider :)

      Supprimer
    2. Alors... Petit problème : Quand j'ai pris le code pour les "Vous aimerez peut-être", ça a bien marché, mais... Avec les articles de TON blog !! Pas très pratique x) Tu sais quoi changer ? (Je suis désoooolée de te harceler ainsi...)

      Supprimer
    3. Ah oui, en effet... je suis allée me renseigner du coup. Je change le tuto :P
      C'est normal et merci à toi pour l'info !

      Supprimer
    4. Merci pour ton travail !!

      Supprimer
  2. Merci beaucoup, je me posais justement la question ! Ton blog est vraiment très bien présenté, c'est agréable à lire. (:

    RépondreSupprimer
  3. Merci pour tout tes conseils car justement j'aime énormément la présentation de ton blog!!

    RépondreSupprimer
    Réponses
    1. Il n'y a pas de quoi ^^ Je suis contente qu'elle te plaise !

      Supprimer
  4. Comment fait-tu les rubriques Bilans, Challenges,etc... et les genres de livres à droite de ton blog ?

    RépondreSupprimer
    Réponses
    1. Je vais éditer l'article pour l'expliquer ;)

      Supprimer
    2. Merci ! Quand ? ( c'est pour voir avec mes vacances pas pour te presser ou t'embeter ! ^^)

      Supprimer
    3. J'ai fait les modifications après avoir lu et répondu à ton commentaire... du coup, il faut regarder le dernier point abordé de mon article.
      Et il n'y a pas de quoi !

      Supprimer
    4. Super ! Merci ! Ton blog est vraiment super :)

      Supprimer
    5. Encore une question :D Comment fait-on pour regrouper plusieurs articles en un lien ? Et, par exemple, si je poste une chronique de genre fantastique , comment ca se passe ? Il se mets tout seul dans la bonne catégorie ( je suppose qu'il faut faire quelque chose de spécial mais quoi? ) Désolée en tout cas ! :)

      Supprimer
    6. Merci ^^

      Quand tu créés un article, à ta droite, tu as dans les "paramètres du post" une catégorie qui se nomme "Libellés". Tu cliques dessus et tu créés ton libellé (fantastique, pour ton exemple). Si tu veux rentrer l'article dans plusieurs catégories, tu mets plusieurs noms séparés par une virgule.
      Par exemple : fantastique, dragons, féérie (cela te fait en tout 3 libellés :P)
      Pour voir apparaître les libellés sur la colonne droite ou gauche de ton blog, et ainsi pouvoir récupérer le lien d'une rubrique, tu dois faire :
      Mise en page > Ajouter un gadget > Libellé > Enregistrer (en ajustant le gadget comme tu le souhaites).
      J'espère que tu as tout compris, sinon n'hésite pas à poser tes questions ^^ bises

      Supprimer
    7. Ok merci ! :) Si j'ai un probléme, je crie :D Bisous

      Supprimer
  5. Je confirme: ton blog est superbe! Clair, fluide, agréable, ... Merci pour toutes ces petites astuces :-) Un blog, on dit que c'est accessible même aux non initiés, mais je pense quand même qu'il faut un peu de connaissances informatique pour s'en sortir et réaliser un truc sympa!

    RépondreSupprimer
    Réponses
    1. Merci, et pas de quoi pour les astuces !
      Effectivement... pour arriver à ce résultat, j'avoue avoir eu besoin de toucher au html du blog. Quand on fouille un peu et qu'on y passe du temps, on arrive à mieux s'y retrouver et à réaliser quelque chose de sympa, comme tu dis ;)

      Supprimer
  6. J'adore ton article. j'essaie de mettre en place quelques unes de tes astuces en ce moment. j'espere savoir me débrouiller !

    RépondreSupprimer
    Réponses
    1. Merci et bonne chance. Si tu as des questions, n'hésite pas ^^

      Supprimer
  7. C'est un bien joli blog que tu as là et c'est très agréable de s'y promener. C'est sympa ces tutos. Si jamais j'ai envie de changer la disposition de mon blog un de ces 4, je pourrai venir trouver de l'aide ici. :)

    RépondreSupprimer
    Réponses
    1. Merci bien ^^ Il n'y a pas de soucis pour les tutos, ils sont là pour ça !

      Supprimer
  8. Ah si j'ai une question: c'est toi qui as fait tes boutons sur le côté ? Tu utilises quel logiciel ?

    RépondreSupprimer
    Réponses
    1. Oui, je les réalise moi-même et j'utilise Gimp ;)

      Supprimer
  9. Très agréable à lire ton blog, bravo pour la mise en page :) et très sympa de ta part cette page astuces qui va probablement m'être très utile quand je me déciderais à améliorer quelques trucs sur mon blog ^^

    RépondreSupprimer
    Réponses
    1. Merci !
      Il n'y a pas de quoi, c'est bien pour ça que cette page existe, si elle peut t'aider à améliorer ton blog, alors tant mieux !

      Supprimer
  10. Tes articles est super, ton blog est super et merci pour les infos de la mises en page

    RépondreSupprimer
  11. J'adore les filles sur ta bannière ! MA-GNI-FI-QUE !

    RépondreSupprimer
  12. Hello, c'est vraiment très très sympas de ta part de faire un article consacré aux personnes qui sont débutants et sont perdus dans le monde du net ! LOL xD
    Personnellement, je voulais savoir avec quel logiciel tu fais tes images, oui, je sais ce n'est pas claire ;). Par exemple ta bannière ou encore l'image de cette article en haut '' Quelques astuces de mise en page'', tu les as réalisé avec quel logiciel ? Merci :)

    RépondreSupprimer
  13. Bonjour ! concernant la question sur les différentes rubrique, tu dis que pour faire simple il faut "creer un nouveau message, que vous ne publierez pas, et dans lequel vous insérez toutes vos images de catégories. Vous associez à chacune des images le lien qui lui correspond" mais comment on associe les deux ? pareil que pour la première possibilité ?

    RépondreSupprimer
    Réponses
    1. Bonjour !
      Pour cette partie, il suffit de cliquer sur l'image, puis de cliquer sur le bouton "Associer". Une petite fenêtre va s'ouvrir et tu pourras rentrer le lien de la catégorie ;)

      Supprimer
    2. Aaaaah génial merci ^^ et *oui je suis embêtante* tu connaîtrais pas un site pour avoir un lien de notre image ? Car si on la fait nous-même elle n'a pas de lien HTLM...

      Supprimer
    3. Pas de quoi ^^
      Pour avoir un lien d'une image créée, j'utilise Blogger :P C'est à dire que j'insère l'image (en l'important), puis je vais dans la partie HTML de l'article (normalement tu es dans la partie "Rédiger"). Le lien de l'image est la ou je l'ai indiqué : <img border="0" src="lien de l'image" height="..." width="..."
      Voila, j'espère que tu as tout compris. Si besoin, n'hésite pas à reposer des questions !

      Supprimer
  14. Génial merci beaucoup de prendre le temps de répondre à tous le monde (y) merci mille fois :D

    RépondreSupprimer
  15. Salut :)
    J'aimerais juste savoir sur quel site tu as obtenu les vignettes "team Gale"etc... ?

    RépondreSupprimer
  16. Salut, je voulais savoir pour le défilemnt des photos il faut mettre ou le lien de l'image?
    Bizz
    PS: Ton blog et magnifique! et merci de dire tes astuces c'est super sympa!♥

    RépondreSupprimer
    Réponses
    1. Je l'ai dit dans mon article, le lien de l'image est à insérer à la place de "lien de l'image", juste entre les guillemets. N'enlève pas les guillemets, surtout...
      Ton PS me fait plaisir, merci !! Et y a pas de quoi !

      Supprimer
  17. Salut, pour le défilement d'image a droite de ton blog, c'est marqué qu'il faut mettre le lien de l'image. Mais on la ou le lien de l'image? Merci :)

    RépondreSupprimer
    Réponses
    1. Le lien de l'image, tu peux le récupérer à partir de Blogger. Tu fais un nouvel article, que tu ne publieras pas et que tu effaceras. Tu insères l'image dans l'article, puis tu vas dans la partie "html". Le lien de ton image est après img src=". Voila :)

      Supprimer
    2. Merci beaucoup pour ton aide!!!
      Bizz

      Supprimer
  18. Salut, pour le défilement d'image a droite de ton blog, c'est marqué qu'il faut mettre le lien de l'image. Mais on la ou le lien de l'image? Merci :)

    PS: desoler si tu a eu le meme message mais je crois que mon ordi a beugger donc je le renvois

    RépondreSupprimer
    Réponses
    1. Je t' ai donc répondu :P
      Ce n'est pas grave. C'est une modération des commentaires qui se fait automatiquement à partir de quelques jours (les commentaires ne s'affichent que s'ils sont autorisés) et n'ayant pas eu internet pendant 3 semaines, je n'ai pas pu le faire avant !

      Supprimer
  19. Coucou, il y a un petit moment que je suis ton blog, j'adore la déco. Je voulais savoir comment tu avais fait pour la date? pour sa mise en forme.

    RépondreSupprimer
    Réponses
    1. Coucou ! Merci beaucoup, j'ai mis du temps à arriver à ce résultat :)
      Oulah... j'ai vraiment galéré. Il faut bidouiller le code html, avec "margin", pour le placer, et "border-radius" pour les arrondis :/
      Ces codes sont à ajouter dans la partie .date-header span. Tu peux en faire la recherche en faisant Ctrl F ^^

      Supprimer
    2. Je connais ca j'ai mis un bon mois pour être satisfait du mien, j'en ai passé du temps dessus. Jusque la j'arrive à te suivre, pour déplacer la marge tu as fait comment? tu as mis un "-" devant?

      J'ai horreur de bidouiller le code html. J'ai essayé d'ajouter une pagination à la place d'article anciens et autre...et j'ai du merdouiller quelques part ca s'affiche pas lol

      Supprimer
    3. Si cela te dérange pas de me faire un copier coller de ton code, ca m'arrangerai grandement! Merci d'avance

      Supprimer
    4. Non non...

      Moi j'aime bien XD
      Arf, dommage lol
      Ah, j'ai oublié le float left aussi, il est important ^^
      Il y a cette partie dans mon code :

      float: left;
      margin: 15px -25px -15px -60px;
      padding: 25px 5px 25px 5px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
      border-radius: 200px;
      -goog-ms-border-radius: 200px;

      Supprimer
    5. Merci beaucoup! J'ai réussi! Manque plus que la pagination et je pourrai être entièrement satisfaite! (vu que j'ai la barre de menu déroulante :p)

      Supprimer
  20. C'est une super idée que tu as eu de créer cette page ! Certaines choses m'ont bien aidée donc je te dis un grand merci !!! <3

    RépondreSupprimer
  21. Ton blog est vraiment magnifique♥ =)
    Merciii beaucoup pour cette rubrique, il y avait un ou deux trucs que je ne savais pas faire et maintenant c'est bon^^'

    RépondreSupprimer
    Réponses
    1. Oh merci ! ♥
      Y a pas de quoi, ravie que ça ait pu t'aider :)

      Supprimer
  22. Ton blog est super beau niveau design, merci pour ces aides précieuses ! :D

    RépondreSupprimer
    Réponses
    1. Merci beaucoup :D et de rien !

      Supprimer
    2. C'est de nouveau moi, j'avais une question à te poser, j'espère que tu n'y réponds pas déjà autre part! Je voudrais savoir, dans le menu de l'en tête, comment fais-tu pour regrouper plusieurs liens sous un même titre comme tu l'as fait pour tes RDV par exemple? Ca fait plusieurs semaines que je cherche sans trouver xD merci d'avance, j'ai conscience de ne pas avoir été très claire mais j'espère que tu comprendras ma question ;)

      Supprimer
    3. Oulah, ça fait un moment que je l'ai fait... je ne saurais pas te dire exactement ^^ je me souviens en tout cas que j'utilise un widget html/javascript, et que j'ai galéré pour arriver à ce résultat ^^ j'avais cherché sur internet, y a tout sur google :P

      Supprimer
  23. Je confirme, ton blog a une super mise en page, belle et pratique à la fois! je me demandais si tu l'avais faite faire par un designer^^

    RépondreSupprimer