Heureusement que j’ai gardé précieusement dans un dossier toutes mes vidéos…par contre j’ai du recommencé le tuto, je l’ai regroupé en un seul, en rassemblent toutes les vidéos dans l’ordre de réalisation…

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

Bumcello – Puppa leslie rip

Pour afficher un petit Player aux couleurs de votre blog, il vous faut le plugin Audio-Player que vous pouvez télécharger ici.

Décompressez le fichier zip et mettez son contenu dans le dossier plugins.

www / wp-content / plugins

Activez le plugin dans l’onglet Extensions de votre administration Wordpress.

Pour changer la couleur du player allez dans Réglages et sélectionnez Audio player dans la liste.

Pour afficher le Player dans votre message importez votre mp3 en passant par Ajouter un son pour récupérer son adresse, Placez l’adresse du mp3 dans la balise [audio:] en mode Visuel comme ceci :

Voilà…vous pouvez faire un aperçu de votre message pour vérifier que le player s’affiche et fonctionne correctement.