Comment centrer un widget ou une playlist ?





Prenons d'abord l'exemple d'une Playlist Deezer. Je vous rappelle que vous pouvez retrouver votre code HTML à copier-coller en vous connectant sur votre compte Deezer (ou en créant un compte puis une ou plusieurs Playlists) et en sélectionnant votre Playlist, ou l'une de vos Playlists (Vous cliquez sur votre pseudo ou avatar, puis à gauche dans "Musique" et "Mes Playlists"), et en haut à droite, cliquez sur "Lecteur exportable", personnalisez votre widget, et copiez-collez le code HTML fourni à l'endroit désiré sur votre site.


Voilà, c'est fait ! Exemple :

Découvrez la playlist Corsica avec I Muvrini




Pour cette Playlist, comme pour la plupart des objets à centrer dans vos articles (y compris certaines vidéos "incentrables" et autres gadgets ou blidgets), et que vous ne pouvez centrer en mode manuel, il suffit de rajouter la balise <center> (sans espace) avant et après le code HTML de l'objet que vous voulez insérer ; ce qui donne, pour centrer cette Playlist Deezer :


<center><object width="300" height="250"><param name="movie" value="http://www.deezer.com/embed/player?pid=28707256&ap=0&ln=fr&sl=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.deezer.com/embed/player?pid=28707256&ap=0&ln=fr&sl=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="250"></embed></object><div id="dz_ref" style="font:9px Arial">D&eacute;couvrez la playlist <a href="http://www.deezer.com/fr/music/playlist/Corsica-28707256" target="_blank">Corsica</a> avec <a href="http://www.deezer.com/fr/music/les-nouvelles-polyphonies-corses" target="_blank">Les Nouvelles Polyphonies Corses</a></div><center>

 

P.S. : Cliquez pour accéder à l'application Deezer sur Facebook.

 

 

Plus technique : pour centrer une Playlist Jiwa, par exemple, à partir du code HTML d'origine :

 

<div style="position: relative; width: 160px; height: 245px; overflow: hidden;"><a style="position: absolute; left:25px;" href="http://www.jiwa.fr/playlist/Agnus-Dei-435999.html">Agnus Dei</a><div style="position: absolute;"><object width="160" height="245" id="music-widget"><param name="wmode" value="transparent" /><param name="type" value="application/x-shockwave-flash" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://www.jiwa.fr/res/widget/compact.swf?playlistId=435999&skin=bright" /><embed src="http://www.jiwa.fr/res/widget/compact.swf?playlistId=435999&skin=bright" wmode="transparent" type="application/x-shockwave-flash" name="music-widget" width="160" height="245" allowScriptAccess="always"></embed></object></div></div><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyMjAzMjUxNDIyNjImcHQ9MTIyMDMyNTE*NTU3MyZwPTMwODM*MSZkPSZuPSZnPTE=.gif" />

 

 

 

Il suffit de remplacer le code en jaune par :

 

<div style="overflow: hidden; margin-left: auto; margin-right: auto; width: 160px; height: 245px;"><a style="position: absolute; left:25px;" href="http://www.jiwa.fr/playlist/Agnus-Dei-435999.html">Agnus Dei</a><div style="position: absolute;"><object width="160" height="245" id="music-widget"><param name="wmode" value="transparent" /><param name="type" value="application/x-shockwave-flash" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://www.jiwa.fr/res/widget/compact.swf?playlistId=435999&skin=bright" /><embed src="http://www.jiwa.fr/res/widget/compact.swf?playlistId=435999&skin=bright" wmode="transparent" type="application/x-shockwave-flash" name="music-widget" width="160" height="245" allowScriptAccess="always"></embed></object></div></div><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyMjAzMjUxNDIyNjImcHQ9MTIyMDMyNTE*NTU3MyZwPTMwODM*MSZkPSZuPSZnPTE=.gif" />


 

Vous pouvez aussi modifier manuellement la taille de votre widget en changeant la largeur (width) et la hauteur (height) autant de fois qu'elle est répétée dans votre code HTML. Par exemple, ci-dessus, 160 et 245 sont répétés 3 fois : il faudra donc modifier les données de la largeur et de la hauteur 3 fois.


Pensez à partager vos astuces.


Cordialement.


Patrick, l'auteur du site.

 

Aucune note. Soyez le premier à attribuer une note !

Ajouter un commentaire
 

Créer un site internet avec e-monsite - Signaler un contenu illicite sur ce site