Créer une bannière animée en CSS pour son Blog

rédigé par Jean-Baptiste, le novembre 11, 2014

La semaine dernière Olivier Duffez de WebRankInfo m’a fait l’honneur de présenter mon livre à ses lecteurs. A la suite de son article, les commandes se sont littéralement envolées (mon livre s’est retrouvé dans le top 100 Kindle pendant 6 jours) et les sollicitations de professionnels du web aussi ;-) Parmi la dizaine de sollicitations que j’ai reçues, une venant de Matthieu Laroussinie (développeur chez Wifeo) est sortie du lot.

See this Pen on Codepen

 

Matthieu venait d’acheter mon ouvrage (+ 1 point ;-) ), il n’avait rien à me vendre (+ 1 point), et même des ressources gratuites HTML/CSS à offrir pour aider les petits webmasters et blogueurs du dimanche comme vous et moi (+ 2 points).

Alors j’ai regardé ce que je pouvais faire à partir des différents codes proposés et j’ai adapté le CSS slideshow (voir ci-dessus) pour mes propres besoins en créant une bannière animé 300×250 en CSS (voir ci-dessous) :

Celle-ci m’a permis d’avoir une auto-promotion sympa pour  mon livre (la boucle  était bouclée). Je vous propose de vous expliquer ici comment faire la même bannière animée pour votre blog. L’avantage de faire cela en CSS plutôt qu’en flash est que ce sera lisible même sur mobile (si votre thème est responsive).

Au sommaire :

  1. Pré-requis
  2. Créer 3 images PNG et 1 jpg avec The Gimp
  3. Ajouter les instructions CSS suivantes à votre thème
  4. Copie-coller le code HTML suivant dans votre zone de widgets

 

1- Pré-requis

 

Pour pouvoir personnaliser ma bannière, vous allez avoir besoin :

 

2- Créer 3 images PNG et jpg avec The Gimp

 

Le jpg va servir de fond à vos 3 images. Voici le mien :

fond-plage

C’est une photo de la plage de Vieira au Portugal que j’ai prise pendant mes dernières vacances d’été.

Les 3 images seront les slides qui s’animeront dans votre espace 300×250. J’ai fait en sorte de laisser un espace libre transparent de 20 pixels en hauteur et en largeur pour qu’on ait toujours un aperçu du fond (même après l’animation) :

slide1

slide 1

 

slide2

slide 2

 

slide3

slide 3

Pour gérer la transparence sans exploser de trop le poids de vos images, je vous recommande de convertir cela en PNG8 avec l’extension .png. Si vous voulez repartir de mes calques The Gimp, voici mon fichier XCF à modifier : modele-slide-1.xcf

 

3- Copier-coller les instructions CSS suivantes

 

Copiez-collez ce texte à la fin de la feuille de style de votre thème de blog.

.contener_slideshow
{
 width:300px;
 height:250px;
 overflow: hidden;
 position: relative;
 background-image: url(<http://votre-url>/fond-plage.jpg);
}
.slid_1, .slid_2, .slid_3
{
 position: absolute;
 width:300px;
 height:211px;
}
.slid_1{left: 0;}
.slid_2{left: 300px;}
.slid_3{left: 600px;}
.contener_slide
{
 width: 600px;
 height: 300px;
 left:0px;
 position: absolute;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-name: anim_slide;
 -moz-animation-duration: 10s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-name: anim_slide;
 -ms-animation-duration: 10s;
 -ms-animation-iteration-count:infinite;
 -ms-animation-name: anim_slide;
 animation-duration: 10s;
 animation-iteration-count:infinite;
 animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}
@-moz-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}
@-ms-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-610px;}
 45% {left:-610px;}
 66% {left:-1220px;}
 90% {left:-1220px;}
}
@keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}

Vous penserez bien sûr à mettre à jour l’URL de votre image de fond

 

4- Copier-coller le code HTML suivant

 

Copiez-collez ce texte dans un module libre HTML dans votre zone de Widget

<div align= »center »>
<div class= »contener_slideshow »>
<div class= »contener_slide »>
<div class= »slid_1″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide1.png »></a></div>
<div class= »slid_2″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide2.png »></a></div>
<div class= »slid_3″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide3.png »></a></div>
</div>
</div>
</div>

Vous penserez bien sûr à mettre à jour les 2 URLs  (dans href= et dans src=) de vos 3 slides.

 

Des problèmes ? Des questions ?

 

Je ne suis pas rentré dans le détail de l’intégration des codes HTML et CSS pour chaque plateforme (WordPress, Blogger, Tumblr) ni sur les manipulations que j’ai faites dans The Gimp. Si vous avez des questions spécifiques ou rencontrer des problèmes sur l’une de ces plateformes ou sur The Gimp, n’hésitez pas à réagir dans les commentaires. Je répondrai à vos question et détaillerai les manipulations si forte demande de votre part.

Jean-Baptiste
Suivez-moi

Jean-Baptiste

Responsable marketing digital chez Orange le jour. Blogueur, Auteur, Entrepreneur la nuit,j'ai plus de 10 ans d'expérience sur Internet en gestion de projets, création d'audience, monétisation.
Jean-Baptiste
Suivez-moi


Tu veux gagner de l'argent avec ton blog ?
Lis tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous te recommandons :


Categories and Tags:  Design, Webmastering

Commentaires (3)

 

  1. Djamal dit :

    Merci Jean Baptiste de partager avec nous ce bout de code css qui permet de se faire la promotion (c’est bon ça !).
    Je n’ai pas encore testé mais je suppose que tout ça doit rentrer sans problème dans la partie widget de WordPress ?!

  2. taira dit :

    le qel de tous ces code gere l’animation de la baniere si je veux ke personalise a mon blog

  3. Fred dit :

    Super tuto ;-)
    Par contre ne pas oublier de changer les » par des  » dans le Html.
    @+

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *



Deviens toi aussi un YouTubeur


Rechercher


Recevoir Blogbuster par email

    Ajoutez votre email :





BlogBuster, le livre


blogbuster ebook

Derniers Commentaires

  • Jean-Baptiste { @Moussounda Je ne donne pas (encore) de cours de création littéraire ;) Le format livre en lui même est déjà un très bon support de... } – Mar 27, 8:52
  • Cyril { Excellente idée que d'avoir interviewé Camille, Jean-Baptiste ! On oublie souvent que derrière les plateformes, les sites web etc se trouvent des personnes compétentes et... } – Mar 27, 7:40
  • Rachid { Bonjour, votre Blog est interessant.Je suis en algerie,puis je gagner de l'argent en creant un blog ? SI c'est affirmatif je suis imposable domme tout... } – Mar 18, 2:24
  • Marine de SoftySoft.com { Merci Jean- Baptiste pour cet article qui répond parfaitement à mes petites interrogations pour le lancement de notre blog ! } – Mar 08, 10:38
  • jc { Bonjour, Merci pour cet article complet. Je suis chez 1and1 et j'imagine que le processus doit être assez proche de celui proposé pour OVH. Je... } – Mar 05, 3:17
  • tony { j'ai lu sur plusieurs sources différentes que les revenus adsense étaient considérés comme de la vente de marchandises et non presta de service . vous... } – Mar 02, 12:10

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact