Créer un Player Deezer personnalisé avec Photofiltre

J’avais déjà réalisé et publié ce tuto en plusieurs parties sur mon autre blog Bienvenue dans le monde réel…cette fois j'ai rassemblé toutes les parties en un seul tuto.

Voici donc les explications en vidéo avec le son qui vous aideront à réaliser votre premier Player personnalisé…

Pour éviter les surprises pensez à faire une copie des pages que vous modifiez.

(En fonction de votre résolution d’écran, il peut apparaitre une zone blanche sous le player, pour rectifier cela il faut changer la résolution en maintenant la touche Ctrl enfoncée et en faisant rouler la molette de votre souris, vous verrez votre écran s’agrandir ou se réduire…)

Pour réaliser un Player personnalisé pour votre blog, il vous faut un logiciel de retouche d’images, comme Photofiltre…pour créer l’habillage du Player.

Donc :

1/ Créer un habillage avec Photofiltre.
2/ Allez sur Deezer.com choisissez un titre avec l’outil de recherche, personnalisez le lecteur puis copier le script.

3/ Collez le script du Player dans un Nouveau message en mode Html et ajoutez les balises en bleues ce qui va permettre d’afficher l’habillage du Player grâce à un bloc que l’on va ajouter dans la feuille de style.

Voilà ce que vous devez avoir dans votre Nouveau message en mode Html avant de publier le message :

<p class="deezer1">
<object height="55" width="220"><br />
<param name="movie" value="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=10789&amp;;amp;amp;amp;colorBackground=0x555552&amp;textColor1=0xFFFFFF&amp;colorVolume=0x39D1FD&amp;autoplay=0" /><br /><embed height="55" width="220" src="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=10789&amp;;amp;amp;amp;colorBackground=0x525252&amp;textColor1=0xFFFFFF&amp;colorVolume=0x39D1FD&amp;autoplay=0" type="application/x-shockwave-flash">
</embed><br />
</object>
</p>

Comme indiqué sur la vidéo :

4/ Ajoutez le bloc suivant dans la feuille de style :

.deezer1 {
background: url("http://www.adressehabillagedeezer.gif") no-repeat;
width: 314px;
height: 159px;
text-align: center;
padding: 48px 0px 0px 74px;
margin: 0 auto;
}

Dernière étape, si vous possédez la barre Web Developer…il vous sera plus facile de caler votre Player sur l’habillage.

Source : Le Raton Laveur…
Et encore merci à Justin-Basile pour m’avoir envoyé ce lien par email.