Personalisez votre lecteur deezer
1 novembre 2008
Certains gros sites ont la chance d’avoir leur lecteur Deezer spéciaux mais pourquoi n’y auriez vous pas droit vous aussi ? Voici donc une technique pour modifier votre lecteur à volonté, seul votre imagination pourra vous limiter.
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.
Abonnez vous par 
Yeaaaah ! Comme ça presse citron sera plus le seul à se la pété avec son lecteur personnalisé !
Merci bien
Personalisez votre lecteur deezer…
Certains gros sites ont la chance davoir leur lecteur Deezer spciaux mais pourquoi ny auriez vous pas droit vous aussi ? Voici donc une technique pour modifier votre lecteur volont, seul votre imagination pourra vous limiter….
Simple et efficace, bien vu !
Excellent, merci pour ce tuyau, mais c’est vrai que je vais plus pouvoir me la péter maintenant, faudra que je trouve autre chose
@Eric: et oué, la gloire ne fut que de courte durée, maintenant va falloir que tu demandes à deezer de te faire des versions de chansons personalisées ^^
Super la technique, c’est bien trouvé je n’y avais jamais pensé ! Merci !
@Touchcream, bonne idée, voilà !
Et avec un div en absolute sur le coin inférieur droit ça peut aussi donner l’impression produite par la feuille sur le player d’Éric. Quoique, il faudrait que j’essaye, pas sûr que ça passe sur du Flash.
Très bonne astuce permettant d’intégrer au mieux ce pratique lecteur de sonorités ^^
Merci !
Bjr, je suis novice dans ce genre de pratiques !
J’aimerai tout simplement avoir plus de détails techniques pour faire cette personnalisation!
Histoire, oui ! De me la péter aussi sur ma page web!
Merci.
(je n’ai pas comrpis insérer les références du second cadre)
Yes excellent on va tous pouvoir se la péter ^^ ! Euh… encore faut-il poster de la musique sur son blog… Et c’est pas mon cas…
@ Cerise : Salut , si tu veux je peux t’aider si Touch est surchargé :d
@pickupjojo : oui là pour le moment on reste dans le simple, on verra plus tard pour le flash, faudrait pas non plus que cela alourdisse la page
@cerise : je ne comprends pas très bien ta question, pourrait tu être plus claire sur le problème que tu rencontre
@eXor : “Touch” a surtout une vie ^^
Merci, c’est vraiment simple et génial comme astuce !