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'expliquerais dans un prochain tutoriel.
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>
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 :
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.