La technique est basé uniquement sur un petit peu de code CSS donc bien de rien compliqué ne vous inquiétez pas.
Tout d’abord commencez par créer un fond à l’aide de votre logiciel préféré puis envoyez la sur votre serveur. J’ai créé un fond basique que vous pourrez trouver ici mais je vous conseille de créer le votre pour avoir votre propre identité.
Ensuite, créons le script html et les différentes div que vous insérerez dans vos différents articles :
<div id="lecteur_bg"> <div id="lecteur_deezer"> <div style="width:220px;height:55px;"><object width="220" height="55"><param name="movie" value="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=1493&colorBackground=0x555552&textColor1=0xFFFFFF&colorVolume=0x39D1FD&autoplay=0"></param><embed src="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=1493&colorBackground=0x525252&textColor1=0xFFFFFF&colorVolume=0x39D1FD&autoplay=0" type="application/x-shockwave-flash" width="220" height="55"></embed></object><br><font size='1' color ='#000000'></font></div> </div> </div>
Une fois que cela est fait il va falloir mettre un peu de style dans votre fichier style.css pour mettre un fond et centrer harmonieusement :
#lecteur_bg{
width: 351px;
height: 226px;
background-image: url('images/lecteur_bg.jpg');
}
#lecteur_deezer{
padding-left: 66px;
padding-top: 86px;
}
Et au final ça donne ça :
Maintenant, libre à vous de faire parler votre imagination dans le code et l’image pour intégrer au mieux votre lecteur comme dans un radio, un instrument ou une pencarte par exemple.