Les dernières chroniques





6 mars 2016

[Tuto n°1] Comment créer un bandeau / bannière des images des derniers articles en ligne ?

Dans ce premier tutoriel, je vais essayer de vous expliquer comment créer un bandeau (ou une bannière appelez cela comme vous le voulez) des images de vos derniers articles en ligne.
Je dis bien "essayer" car c'est la première fois que je joue à l'enseignante ! Alors ne m'en veuillez pas si au début je manque de précision...

Ici, nous parlerons plus particulièrement d'un bandeau de chroniques et donc de couvertures de romans mais c'est adaptable à tout type d'images. Bon commençons sans tarder !

Avant toute modification, n'oubliez jamais de sauvegarder votre blog.

Si vous ne savez pas comment faire, je vous l'ai expliqué ici.

Voici l'exemple d'un bandeau statique, sans bordure et rectangulaire. Le bandeau le plus simple à réaliser.


Pour commencer, allez sur votre tableau de bord, cliquez sur "Mise en page" que j'ai encadré en rouge à gauche. Puis cliquez sur "Ajouter un gadget" également encadré en rouge.



Ensuite une boite de dialogue va s'ouvrir, vous devez trouvez la ligne "HTML/JavaScript" et cliquer sur le symbole "+" associé.


A partir de là, une autre boite de dialogue va s'ouvrir, c'est là que nous insérerons le code html.


Voilà maintenant nous pouvons passer à l'étape la plus intéressante !

Voici le modèle type à insérer et que vous allez donc copier/coller dans le contenu html.

<a href="http://leliendevotrearticle.html"><img border="0" height="200" src="https://leliendevotreimage.jpg" width="140" /></a>

<a href="http://leliendevotrearticle.html"><img border="0" height="200" src="https://leliendevotreimage.jpg" width="140" /></a>

<a href="http://leliendevotrearticle.html"><img border="0" height="200" src="https://leliendevotreimage.jpg" width="140" /></a>

<a href="http://leliendevotrearticle.html"><img border="0" height="200" src="https://leliendevotreimage.jpg" width="140" /></a>

Alors faites très attention en html, la moindre apostrophe ou virgule a son importance et peut tout faire capoter donc toujours bien vérifier que tout est conforme !

Si vous regardez bien, ici il y aura donc 4 images sur notre bandeau. Si vous en voulez plus, il suffit d'ajouter une ligne puis une autre et ainsi de suite.

Pour bien comprendre ce que vous faites, je vais vous expliquer brièvement les balises et à quoi elles correspondent.
La balise <a> avec href permet de faire un lien, ici pour envoyer le lecteur vers l'article que vous voulez relier à l'image.
La balise <img> concerne l'image.
border="0" signifie qu'il n'y a pas de bordure.
height est la hauteur de l'image et width sa largeur.
src= demande la source et donc l'adresse de votre image. (pour l'obtenir, il suffit de faire sur l'image de votre choix clic-droit et copier l'adresse de l'image)

Maintenant il va falloir mettre vos liens bien entre les guillemets " " à chaque fois et sans erreur. Le lien de votre article commencera par http:// et finira par .html ! Pour les images ça commencera par http:// ou https:// et finira par le type d'extension de votre image (jpg, png etc...).

Exemple maintenant, pour le blog sur lequel je travaille actuellement, ça donne ceci :

<a href="http://karybouquineuse.blogspot.fr/2016/03/le-sixieme-sommeil.html"><img border="0" height="200" src="https://4.bp.blogspot.com/-pQfLgybuyOo/VtuHr0W475I/AAAAAAAAAPY/KyNUWeQgT8M/s320/le%2Bsixi%25C3%25A8me%2Bsommeil.jpg" width="140" /></a>

<a href="http://karybouquineuse.blogspot.fr/2016/02/la-fille-du-train.html"><img border="0" height="200" src="https://3.bp.blogspot.com/-UyZ4mbncaNw/VtQyyKvc09I/AAAAAAAAAIo/cIpYTV5HNpI/s320/La%2Bfille%2Bdu%2Btrain.jpg" width="140" /></a>

<a href="http://karybouquineuse.blogspot.fr/2016/02/auteur-celine-charles-editeur-en-cours.html"><img border="0" height="200" src="https://4.bp.blogspot.com/-Seay-YS2tTM/VtSFZMDPXkI/AAAAAAAAAJ4/biFZZve5z7k/s320/Que%2Bdu%2Bbonheur%2B%2521.jpg" width="140" /></a>

<a href="http://karybouquineuse.blogspot.fr/2016/02/chronique-lombre-au-tableau-susan-hill.html"><img border="0" height="200" src="https://2.bp.blogspot.com/-g8xiNbFgXsQ/VtN8q4mk7NI/AAAAAAAAAII/CpVAj7Otb5A/s320/L%2527ombre%2Bau%2Btableau.jpg" width="140" /></a></div>

et en image :


Une fois que vous avez bien remplacé vos liens, vous cliquez sur "Enregistrer" et ensuite n'oubliez pas de déplacer votre gadget bien au centre de la mise en page du blog sinon le widget sera à droite ! Et encore une fois, il faut enregistrer, donc cliquez sur "Enregistrer la disposition".



Puis vous obtiendrez quelque chose qui ressemble à ça de visu :


Maintenant si vous souhaitez insérer un titre, mettre des bordures, arrondir les images ou faire défiler les images, je vous invite à attendre la deuxième partie de ce tutoriel ! (car finalement je risque de vous perdre avec tout ce flot d'informations d'un coup... )
A bientôt pour de nouvelles explications.

18 commentaires:

  1. Clair et concis ! Je vais enfin arrêter de t'embêter ^^
    Merci pour ton tuto, j'en veux d'autres !!!!!!! <3

    RépondreSupprimer
    Réponses
    1. Tu ne m'embêtais pas, j'adore faire ça ;)

      T'en fais pas, j'ai noté quelques idées de tutos, ça viendra au fur et à mesure !

      Supprimer
  2. Je trouve sympas de donner des tutos surtout que ce type de bannière est très recherché :)

    RépondreSupprimer
    Réponses
    1. Oui parfois on ne sait pas où chercher donc je me suis dit que ça pourrait être une bonne idée d'en réaliser sur mon blog :)

      Supprimer
  3. Super tutoriels ! Très clair, merci beaucoup.

    RépondreSupprimer
    Réponses
    1. Merci beaucoup pour ton commentaire ! :)

      Supprimer
  4. Très intéressant comme tuto ! je trouve que c'est toujours sympa de pouvoir se perfectionner. Par contre, je ne crois pas que je puisse le mettre sur un blog canalblog mais bon c'est quand même à essayer ;-)

    RépondreSupprimer
    Réponses
    1. Merci :)
      Alors honnêtement, je ne sais pas pour canalblog, mais si tu peux y ajouter du html je suppose que oui c'est possible...

      Supprimer
  5. Merci 1000 fois!!! J'ai enfin un bandeau comme je le souhaitais depuis quelques temps! <3!!!!!

    RépondreSupprimer
    Réponses
    1. Aaaaah super ! J'ai été voir nickel :D
      Je suis ravie que ça ait pu t'aider !

      Supprimer
  6. Sympa ce premier tuto :) Je n'avais pas particulièrement besoin d'infos sur le sujet mais j'attends avec impatience les prochains articles du genre !

    RépondreSupprimer
  7. Il est super intéressant, ton article ! Moi qui ne savait pas vraiment comment faire (pourtant, je m'en sors plutôt bien dans ce genre de chose XD), et bien, les images n'avaient pas une bonne taille ! C'est très bien expliqué en plus :p Merci !

    RépondreSupprimer
    Réponses
    1. Avec plaisir, je suis contente s'il est bien expliqué, c'était un peu ma peur, je suis pas douée pour ça en principe ^^

      Supprimer
  8. Moi qui cherchais comment faire pour un bandeau ton article m'a été très utile ! :D
    Je vais pouvoir le faire prochainement ^^.

    RépondreSupprimer
  9. Là tu m'auras appris quelque chose, mais ça a l'air laborieux à faire...bref je ne suis pas prête à m'y mettre ^^

    RépondreSupprimer
    Réponses
    1. Si tu suis vraiment mon tuto étape par étape, tu devrais t'en sortir ;)

      Supprimer

Back to Top