Rentabiliser son blog : Google Adsense en version responsive

La manière la plus simple de rentabiliser son blog est d’utiliser les bannières Google Adsense. Cela ne rapporte pas grand chose – sauf si vous avez un trafic conséquent – mais c’est automatique, et donc un rapport travail/gain à considérer… mais j’y reviendrai…

Le problème des bannières – qu’elles viennent de Google ou pas – c’est qu’elles ont une taille fixe, ce qui peut être gênant pour un design responsive.

Et justement, si Google – version moteur de recherche – pousse à l’adoption du responsive pour les sites, il était étonnant que leurs ingénieurs ne sortent pas une solution pour leurs Adsenses, qui est leur principale source de revenu…

C’est chose faite avec un nouveau format de bannière « Bloc d’annonces réactif« , toujours en version bêta.

Comment l’installer ?

C’est assez simple, il s’agit d’un nouveau code fourni par Google, qu’il vous faudra modifier à votre besoin (cela nécessite un minimum de connaissance en HTML/CSS).

Ex (issu de WordPress Gratuit) :

<style>
.wpgratuit { text-align:center; width: 300px; height: 250px; }
@media(min-width: 500px) { .wpgratuit { width: 336px; height: 280px;} }
@media(min-width: 800px) { .wpgratuit {width: 160px; height: 600px; } }
</style>
[ reste du code .. ne PAS modifier ]

Pour comprendre le fonctionnement de ce code, il faut le lire par la fin (cet ordre permet une meilleure compatibilité avec les anciens navigateurs).

• Pour un écran de plus de 800 pixels de large ( ordinateur ou tablette en orientation paysage), afficher une bannière 160×600.
• Pour un écran entre 500 et 799 pixels ( tablette en orientation portrait) , afficher une bannière 336×28.
• Pour le reste (cad. inférieur à 500 pixels = smartphone) , afficher une bannière 300×250.

Vous pouvez personnaliser avec vos formats de bannières préférés, et aussi les résolutions, mais veuillez à toujours respecter l’ordre croissant en pixels dans votre code.