31 juil. 2010

Faire un retour vers l'accueil

En général, on fait ce lien dans l'entête du blog, afin qu'il soit présent sur tout le blog,

En HTML, vous collez
<a href="adresse principale du blog">ACCUEIL</a>
Par exemple :
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">ACCUEIL</a>
donne

ACCUEIL

Faire un lien vers un endroit précis d'une autre page

Cet article fait suite à Faire un lien vers un endroit précis de la même page

Nous allons donc utiliser la même ancre d'arrivée que dans l'article sus-cité.

1ère étape : dans la page d'arrivée à l'endroit exact

Dans l'HTML, j'implante une ancre en copiant ceci
<a name="AncreArrivée">Ancre d'Arrivée</a>
2ème étape : dans le lieu de départ


Dans l'HTML de la fin de ce présent article, je colle
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/2010/07/faire-un-lien-vers-un-endroit-precis-de.html#AncreArrivée">Vers l'Ancre d'Arrivée</a>
Notez que :
  • ce qui est en bleu est l'adresse de l'article d'arrivée
  • ce qui est en rouge, doit être identique dans les 2 formules
  • ce qui est en vert apparaît à l'écran. Pour l'ancre d'arrivée, vous pouvez mettre un point au lieu de "Ancre d'Arrivée" afin que ce soit invisible
Faîtes le test, cliquez et vous arriverez au début de l'autre article

Vers l'Ancre d'Arrivée

Faire un lien vers un endroit précis de la même page

Ancre d'Arrivée

Ces liens-interpage, interblog- s'appellent des ancres. Elles sont essentiellement utilisées quand les articles sont longs pour naviguer tout leur long. La fonction Retour vers le haut en est une variante.

Imaginons : je suis tout en bas de cet article sur le blog et je veux pouvoir revenir rapidement tout en haut.

1ère étape : dans le lieu d'arrivée

Dans l'HTML tout en haut de l'article, j'implante une ancre en collant ceci
<a name="AncreArrivée">Ancre d'Arrivée</a>
2ème étape : dans le lieu de départ

Dans l'HTML tout en bas de l'article, je colle
<a href="#AncreArrivée">Aller vers l'ancre d'Arrivée</a>
Notez que :
  1. ce qui est en rouge, doit être identique dans les 2 formules
  2. ce qui est en bleu apparaît à l'écran. Pour l'ancre d'arrivée, vous pouvez mettre un point au lieu de "Ancre d'Arrivée" afin que ce soit invisible
Testez : descendez en bas de cette page et cliquez sur "Allez vers l'ancre d'arrivée".

Ces ancres peuvent se mettre à chaque étape de votre article, pas seulement en haut, là est tout leur intérêt.







































































































































































































Aller vers l'ancre d'Arrivée

Faire un retour vers le haut de page fixe en bas d'écran

Il se réalise en CSS et HTML. Mais, malheureusement, cet effet que je trouve très joli, n'est visible que sous Fire Fox.

Un exemple en image pour ceux qui naviguent sous Internet Explorer : regardez en bas à droite



Première étape : dans le CSS

Vous collez
#gototop{position:fixed;bottom:5px;*/ right:2px;z-index:300;width:20px; height:20px;
background:transparent url(http://nsm01.casimages.com/img/2008/02/26//08022607021262651763309.gif) no-repeat center ;font-size: 0px;display:block;_display:none;text-indent:-300px;overflow:hidden;outline:none;}
En rouge, la position de l'image sur l'écran :
  • le pied (bottom) est à 5px
  • la droite (right) est à 2px
En bleu, les dimensions de l'image
  • largeur (width) : 20px
  • hauteur (height) : 20px
En vert : l'adresse de l'image. SI celle là vous convient, elle est hébergée, vous pouvez vous en servir

Seconde étape : en HTML d'un module

Vous collez
<div id="gototop"><a id="gototop" name="gototop" title="Go to Top" href="#">top</a></div>
Lorsque la page a fini de charger, vous pouvez tester

Faire un retour vers le haut de page avec un double-clic

L'intérêt de ce script est que le retour en haut de page peut se faire de n'importe où dans la page. Pas besoin de chercher le bouton "haut de page" qui est généralement tout en bas ou de poser des
ancres à différents niveaux.

Dans l'HTML de l'entête, collez le pavé suivant :
<SCRIPT language=JavaScript1.2>
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</SCRIPT>
Pensez à informer vos visiteurs de cette fonction. Et testez !

Faire un retour vers le haut de page


La première partie du code se place en haut de page. Il se colle en HTML, une fois pour toutes, dans l'entête :
<a name="top"></a>
La seconde partie, le lien allez vers le haut se positionne :
  • en milieu de hauteur si la page est haute
  • dans le pied de page de votre blog
Il permet au visiteur de surfer plus rapidement sur votre blog. Et paradoxalement, plus la navigation sera aisée et rapide, plus longtemps votre visiteur restera sur votre blog.

En html, vous collez
<a href="#top">ALLEZ VERS LE HAUT</a>
Exemple :  ALLEZ VERS LE HAUT

Créer un textarea avec bouton de sélection

Nous avons vu le textarea simple, voici un modèle plus évolué avec bouton de sélection du texte contenu dans le textarea.

En html, vous collez ce code
<script language="JavaScript">
<!--
function selectionner()
{
document.votre_formulaire.votre_textarea.select();
}
-->
</script>
<form name="votre_formulaire">
<textarea name="votre_textarea">
Votre texte
</textarea>
<input type="button" value="tout sélectionner" onclick="selectionner()">
</form>
Et nous obtenons

Créer ses iframe

Une iframe est un cadre incorporé dans une page Web.
C'est un petit code tout simple. Il permet d'appeler une page dans une autre page à la taille voulue et à l'endroit désiré.

Supposons que vous vouliez afficher la page d'accueil de Google sur votre blog.

Vous collez en HTML
<iframe name="Google" SRC="http://www.google.fr/" scrolling="yes" FRAMEBORDER="yes" height="300" width="500"></iframe>

name="Google" : le nom du cadre
http://www.google.fr/ : l'adresse de la page appelée
scrolling="yes": ascenseur désiré ? yes ou no
FRAMEBORDER="yes" : encadrement ? yes ou no
height="300" : sa hauteur
width="500" : sa largeur

Et on obtient :

Créer un textarea

Autrement appelé "boîte de texte défilante"
Il peut être utile lorsque vous avez un texte assez long ou un script à mettre sur votre blog.

Dans l'html, vous collez ce pavé
<textarea name=a cols=50 rows=3 style="font-family:Verdana;font-size:8pt;color:white;background-color:#000080;border:1 white">VOTRE TEXTE ICI</textarea>
Vous obtenez :



cols=50 : la largeur
rows=3 : le nombre de ligne donc la hauteur
font-family:Verdana : police
font-size:8pt : taille de police
color:white : couleur de police
background-color:#000080 : couleur de fond

A voir : créer un textarea avec bouton de sélection

Découvrir les encadrements

Les encadrements ou bordures sont appelées "border" dans le CSS.

Nous allons voir comment fixer leur épaisseur, couleur et aspect grâce à l'analyse d'une bordure :

border:solid 1px #D8D7D7

border est le terme générique qui englobe tous les contours (haut-bas-droite-gauche)
Si l'on veut être plus précis, on met :

border-top : Bordure haut
border-bottom : Bordure bas
border-right : Bordure droite
border-left : Bordure gauche
solid représente l'aspect de la bordure
On a d'autres choix :

dotted : bordure en petit point ......
dashed : bordure en tiret ----
double : bordure double trait
groove : bordure ombrée
ridge : bordure en relief, un peu comme un cadre, mais le nombre de px doit etre assez élevé pour que cela se voit
inset : bordure en relief avec nuance de couleur
outset : bordure en relief avec des nuances inverses de l'inset
1 px est l'épaisseur du trait de bordure en pixels
Il suffit d'augmenter le nombre de pixels pour grossir le trait
#D8D7D7 est la couleur du trait
Il est maintenant possible, par le CSS d'arrondir ces bordures.

Créer des encadrements arrondis

Cette astuce se réalise dans le CSS et n'est, malheureusement, visible que sous FireFox

Un exemple dans la bordure du titre de ce module :



Lorsque, dans le CSS, vous créez un encadrement, il est représenté ainsi :
{border:1px solid #d8e2ec;}
Pour un petit rappel des règles des encadrements.

Pour qu'il soit arrondi, vous rajoutez ce qui est en rouge
{border:1px solid #d8e2ec;  -moz-border-radius: 10px; }
Vous jouez avec le nombre de px pour avoir l'arrondi voulu.

Encadrer un article avec des textures

Voici une méthode pour réaliser un encadrement en couleur ou en texture d'un article.
Les codes présents dans les encadrements sont à coller en HTML

L'encadrement simple en couleur :

En rouge, la couleur du fond de l'encadrement extérieur
En bleu, la couleur du fond intérieur


<table cellspacing="0" cellpadding="40" width="90%" border="1">
 <tbody>
  <tr>
   <td width="100%" bgcolor="#000033">
      <center>
   <table width="100%" border="1">
    <tbody>
     <tr>
      <td width="100%" bgcolor="#f5f5dc">
      <p align="left">Votre Texte</p>
      </td>
     </tr>
    </tbody>
   </table>
   </center></td>
  </tr>
 </tbody>
</table>

L'encadrement simple en texture :



<table cellspacing="0" cellpadding="40" width="90%" background="adresse image de l'extérieur" border="1">
    <tbody>
        <tr>
            <td width="100%">
            <p></p>
            <center>
            <table width="100%" background="adresse image de l'intérieur"
border="1">
                <tbody>
                    <tr>
                        <td width="100%">
                        <p align="left">Votre Texte</p>                   
                        </td>
                    </tr>
                </tbody>
            </table>
            </center></td>
        </tr>
    </tbody>
</table>

L'encadrement double en couleur :

En bleu, la couleur extérieure bleu
En rouge, la couleur du milieu rouge
En rose, la couleur centrale beige





<table cellspacing="1" cellpadding="1" border="1">
 <tbody>
  <tr>
   <td bgcolor="#000033">
   <div align="center">&nbsp;</div>
   <div align="center">
   <table cellspacing="0" cellpadding="40" width="90%" align="center" border="1">
    <tbody>
     <tr>
      <td bgcolor="#660033">
      <div align="center">
      <table width="100%" align="center" border="1">
       <tbody>
        <tr>
         <td bgcolor="#f5f5dc">
         <p align="center">VOTRE TEXTE</p>
         </td>
        </tr>
       </tbody>
      </table>
      </div>
      </td>
     </tr>
    </tbody>
   </table>
   </div>
   <p>&nbsp;</p>
   </td>
  </tr>
 </tbody>
</table>
</center>



L'encadrement double en texture :





<table cellspacing="1" cellpadding="1" background="texture extérieure" border="1">
    <tbody>
        <tr>
            <td>
            <div align="center">&nbsp;</div>
            <div align="center">
            <table cellspacing="0" cellpadding="40" width="90%" align="center" background="texture de milieu d'encadrement" border="1">
                <tbody>
                    <tr>
                        <td>
                        <div align="center">
                        <table width="100%"
align="center" background="texture de l'article" border="1">                   
<tbody>                       
<tr>                             
<td>                               
<p align="center">VOTRE TEXTE</p>                            
</td>                     
</tr>          
</tbody>
                        </table>
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</center>


Changer le fond des cellules d'un tableau au survol de la souris - 2ème partie

Dans ce cas n°2, plus compliqué, nous aborderons le tableau dont chaque cellule a une couleur différente "au repos" et une couleur différente au survol de la souris

A lire : Cas n°1

PREMIERE PARTIE :

Vous collez en html le pavé suivant
<style type="text/css">
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
</style>
Sachant que

a.A et a.A:hover concernent la 1ère cellule (nommée A)
a.B et a.B:hover concernent la 2ème cellule (nommée B)

Vous personnalisez ainsi le lien normal :
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ;
color: #3c4157;  }
a.B {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
border: 1px solid #3c4157 : la bordure
background-color: #d8e2ec : le fond
color: #3c4157: la couleur de la police

le lien au survol de la souris :
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
Modifiez selon le même schéma que pour le lien normal.

Le padding représente les marges intérieures, afin que l'encadrement ne soit pas collé au lien.

DEUXIEME PARTIE :

Vous collez en html, à la suite, le pavé suivant qui représente le tableau
<table cellspacing="0" cellpadding="0" align="center" border="0">
 <tbody>
  <tr>
   <td>
   <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
   </td>
   <td>
      <p style="line-height: 30px" align="center"><a class="B" href="adresse du lien ">Lien 2</a></p>
   </td>
 </tbody>
</table>
A personnaliser ainsi
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien
1
</a></p>
devient par exemple
  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>
Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple
  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>
Si vous avez besoin d'une cellule supplémentaire, vous rajoutez dans le 1er pavé :
a.C {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.C:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
et dans le second pavé :
<td>
    <p style="line-height: 30px" align="center"><a class="C" href="adresse du lien 3">Lien 3</a></p>
   </td>
après la ligne suivante :
<td>
    <p style="line-height: 30px" align="center"><a class="B" href="adresse du lien 2">Lien 4</a></p>
   </td>
et ainsi de suite.

Vous obtenez au final :



Changer le fond des cellules d'un tableau au survol de la souris - 1ère partie

Il s'agit d'une technique couramment utilisée pour réaliser des menus.
Dans ce cas n°1, nous aborderons le tableau dont toutes les cellules ont la même couleur "au repos" et la même couleur au survol de la souris

C'est moins difficile à réaliser qu'il n'y paraît.

PREMIERE PARTIE :

Vous collez en html le pavé suivant
<style type="text/css">
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
</style>
Vous personnalisez ainsi :

la cellule en mode normal :
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color:#3c4157;  }
border: 1px solid #3c4157 : la bordure
background-color: #d8e2ec : le fond
color: #3c4157: la couleur de la police

la cellule au survol de la souris :
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  } 
Modifiez selon le même schéma que pour le lien normal.

Le padding représente les marges intérieures, afin que l'encadrement ne soit pas collé au lien.

DEUXIEME PARTIE :

Vous collez en html, à la suite, le pavé suivant qui représente le tableau
<table cellspacing="0" cellpadding="0" align="center" border="0">
 <tbody>
  <tr>
   <td>
   <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
   </td>
   <td>
      <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 2">Lien 2</a></p>
   <td>
      <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 3">Lien 3</a></p>
   </td>
   <td>
     <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 4">Lien 4</a></p>
   </td>
   <td>
    <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 5">Lien 5</a></p>
   </td>
  </tr>
 </tbody>
</table>
Vous y personnalisez ensuite les liens :
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
devient par exemple
  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>
Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple
  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>
Vous obtenez au final :






Surligner les colonnes d'un tableau avec tableclothes

Au passage de la souris, les colonnes de ce tableau changent de couleur.
Pour tester, attendez le chargement complet de la page et de tous les fichiers.


a1

b1

c1

d1

e1

f1

a2

b2

c2

d2

e2

f2

a3

b3

c3

d3

e3

f3

a4

b4

c4

d4

e4

f4

Première étape
:

Allez sur CSSGLOBE

Cliquez sur Download Tableclothes

Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - extraire vers

Deuxième étape :

Dans l'administration de votre blog - mes documents - autres fichiers :
  • vous créez un répertoire nommé tableclothes
  • vous y sauvegardez les fichiers :


    • tablecloth.js
    • tr_back.gif
  • vous notez les adresses
Troisième étape :

Sur votre PC :
  • vous ouvrez le Bloc Notes
  • vous appelez le fichier tablecloth.css
  • vous modifiez le chemin de l'image tr_back.gif (vous avez note son adresse à la 2ème étape)
  • vous enregistrez le fichier sous le même nom
Quatrième étape :

Dans votre administration - mes documents - autres fichiers - tableclothes :
  • vous enregistrez le fichier tablecloth.css
  • vous notez son adresse
Cinquième étape :

Vous créez votre tableau normalement. Si votre éditeur ne propose pas cette fonction, regardez cet article.

Et vous rajoutez en HTML
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tableclothes/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tableclothes/tablecloth.js"></script>

Avec vos propres adresses de fichiers en rouge.

Trier les colonnes d'un tableau avec sorttable

Ce n'est pas très difficile à réaliser pour un résultat très sympa. Ce script va permettre à vos visiteurs de trier, sur votre blog, les colonnes d'un tableau

Attendez le chargement complet de la page, et donc des fichiers, testez en cliquant sur les titres des colonnes.



Prénom

Année

Nombre de points

Position

Anne Laure

1980

158

3

Margot

1938

256

2

Béatrice

2005

457

4

Huguette

2001

58

1

Première étape
:

Allez sur Kryogenix

Cliquez sur Download the Javascript library

Copiez le contenu de la page qui apparaît

Deuxième étape :

Ouvrez votre Bloc Note sur votre PC
Collez et sauvegardez ce contenu sous sorttable.js

Troisième étape :

Allez dans l'Administration de votre blog - Mes documents - Autres Fichiers :
  • créez un répertoire nommé sorttable
  • enregistrez-y le fichier sorttable.js
  • notez son adresse
Quatrième étape :

Lors de la rédaction de votre article, en HTML, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/sorttable/sorttable.js"></script>

En rouge, l'adresse de votre fichier. Vous l'avez noté à la troisième étape.

Ensuite, vous créez normalement votre tableau. Si votre éditeur ne le permet pas, regardez cet article. Quand il est achevé, vous allez en HTML.

Vous rajoutez ce qui est en rouge et votre tableau est opérationnel.

<table width="100%" cellspacing="1" cellpadding="1" border="1" align="center" class="sortable">
    <tbody>
        <tr>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Pr&#233;nom</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Ann&#233;e</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Nombre de points</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Position</font></td>
        </tr>
        <tr>
            <td>Anne Laure</td>
            <td align="center">1980</td>
            <td align="center">158</td>
            <td align="center">3</td>
        </tr>
        <tr>
            <td>Margot</td>
            <td align="center">1938</td>
            <td align="center">256</td>
            <td align="center">2</td>
        </tr>
        <tr>
            <td>B&#233;atrice</td>
            <td align="center">2005</td>
            <td align="center">457</td>
            <td align="center">4</td>
        </tr>
        <tr>
            <td>Huguette</td>
            <td align="center">2001</td>
            <td align="center">58</td>
            <td align="center">1</td>
        </tr>
    </tbody>
</table>

Réaliser un tableau

Les tableaux sont utilisés pour mettre en forme des données, des images, des chiffres, pour créer des menus ... Ils sont une fonction incontournable.
Si le menu de votre éditeur ne vous propose pas la création de tableau, ce qui est le cas sur Blogger, voici comment le réaliser.

Voici un tableau en mode normal :






Le voici en HTML :
<table width="300" height="100" cellspacing="1" cellpadding="1" border="1" align="center">
    <tbody>
        <tr>
            <td bgcolor="#f5f5dc" bordercolor="000033">&nbsp;</td>
            <td>&nbsp;</td>
            </tr>
       <tr>
            <td>&nbsp;</td>
         <td>&nbsp;</td>
            </tr>
      </tbody>
</table>

Ces tableaux peuvent être personnalisés : background, bordures, largeurs ...mais leur gestion n'est pas aussi souple qu'avec Excel.

Ci-dessous, quelques exemples de personnalisation courante :

Mettre un fond dans tout le tableau : <table style="background-color: #d8e2ec;">

Mettre un fond dans une ligne : <tr bgcolor="#ff6666">

Encadrer les cellules : <td style="border: 1px solid #cc0099;">
Mettre un fond dans une cellule : <td style="background-color: #d8e2ec;">
Pour fusionner 2 cellules d'une même ligne : <td colspan="2" >
Pour fusionner 2 cellules d'une même colonne : <td rowspan="2">

Traduction des termes :
Table : Insertion d'un tableau
Tr: Insertion d'une ligne
Td: Insertion d'une cellule

Width : Largeur
Height : Hauteur

Cellspacing : Espace entre les cellules du tableau
Cellpading : Espace entre le texte et le bord des cellules

Border : Epaisseur de la bordure du tableau
Bordercolor : Couleur des bordures
Bgcolor : Couleur du fond

Align : Alignement horizontal du contenu de la cellule
Valign : Alignement vertical du contenu de la cellule

Colspan : Réunion de plusieurs cellules en largeur
Rowspan : Réunion de plusieurs cellules en hauteur

30 juil. 2010

Diffuser la télévision

Vous allez sur SEVENTELEVISION

Vous avez le choix entre les chaînes suivantes :

- SEVEN TELEVISION - La Chaine des Nouveaux Talents
- HIP HOP TELEVISION – Le Programme 100% HIP HOP, Rap, R&B
- ROCK TELEVISION - Le Programme 100% POP ROCK
- FRENCH MUSIC TELEVISION - Le Programme 100% FRENCH MUSIC
- BANDES ANNONCES CINEMA - La Chaine du Cinéma 100% BANDES ANNONCES
- SHORT MOVIE TELEVISION - La Première Chaine de Court-Métrage et du Programme Court
- CASTING TELEVISION - Le Programme 100% MODE et CASTING
- VU A LA TELE - La Pub a Enfin sa Chaine

Vous copiez le code fourni. Par exemple :
<embed src="http://www.impek.com/go/sseven/wm" width="720" height="576" loop="True"  style="FILTER: xray" name="RAOCXplayer"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
type="application/x-mplayer2" enablecontextmenu="true" autosize="false"
showstatusbar="true" showcontrols="1" showpositioncontrols="false" showtracker="false"></embed>

et vous le collez en html

 

Diffuser la radio

Je vous propose 2 solutions. La première contenant des iframe, la seconde accessible à tous :

ESA-DEV

Chez ESA-DEV

Copiez ce code
<iframe src="http://esa-dev.com/radio-live/player.php?en=0" width="300" height="100" allowtransparency="true" background-color="transparent" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

Collez le en html



GOODINTERNET

Allez sur GOODINTERNET

J'ai un peu retravaillé le code pour qu'il puisse s'installer sans problème :

Copiez le code et collez le en HTML

<a href="http://www.good-internet.net/radio/radios_online.php" onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,
scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=200,
height=250,status'); return false">
<img width="84" height="135" border="0" alt="player GOOD-internet.net" src="http://www.good-internet.net/radio/pics/player.png" /></a>
En cliquant sur l'image, un pop s'ouvre avec un choix de radio :

player GOOD-internet.net

Créer une fenêtre pop up avec une playlist

Si vous installez votre playlist dans un module, à chaque changement de page, votre lecteur se remettra en route à 0.  Ce qui n'est pas agréable.

La solution est de le mettre dans une fenêtre pop-up.

1ère étape :

Vous ouvrez le Bloc Notes sur votre PC, vous y collez le code donné pour la playlist.

Pour cet exemple, je vais prendre la playlist Deezer

Vous nommez ce fichier Machanson1.htm et le sauvegardez.

2ème étape :

Vous hébergez ce fichier Machanson1.htm (chez Archive-host par exemple)

    3ème étape :

    Vous mettez ce fichier en lien, ainsi :

    Dans un module, vous collez en HTML
    <a onclick="window.open(this, 'Zazie', 'width=250,height=300'); return false;" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/jingles/Machanson1.htm">Ma PlayLisr</a>

    En bleu, les dimensions de cette fenêtre
    En rouge, l'adresse de votre fichier .htm
    En vert, le nom de votre paylist qui apparaîtra sur le blog

    Et vous obtenez :

    Ma Play List

    Créer un lecteur de musique dans une multibox

    Un très joli effet lightbox. Testez-le en cliquant sur ce lien

    Lien vers page HTML - Multibox MP3

    Puis sur Cliquez ici pour voir l'exemple

    1ère étape :

    Allez sur Phatfusion

    Cliquez sur multibox.zip

    Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.

    2ème étape :

    Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11

    Vous arrivez sur le site Mootools, où vous cliquez sur Download.

    Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.

    Vous recliquez sur Download.

    Vous venez d'enregistrer le fichier mootools.js

    3ème étape :

    Dans l'administration de votre blog - Documents - Autres Fichiers :
    •  vous créez un répertoire nommé multibox :

      •  dans lequel vous créez un sous-répertoire nommé images

        • vous y enregistrez les images suivantes :

          • close.png       
            left.png
            leftDisabled.png
            loader.gif
            right.png
            rightDisabled.png
        • vous notez leur adresse
    4ème étape :

    Sur votre PC :
    • vous ouvrez votre Bloc-Notes
    • vous appelez le fichier multibox.css
    • vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
    • vous enregistrez sous le même nom
    5 ème étape :

    Dans l'administration de votre blog - Documents - Autres Fichiers - multibox :
    • créez un sous-répertoire multibox :

      • dans lequel vous enregistrez le fichier mp3player.swf
    6ème étape :
    • vous créez un sous-répertoire nommé : css

      • dans lequel vous enregistrez le fichier :

        • multibox.css
    • vous créez un sous-répertoire nommé : js

      • dans lequel vous enregistrez les fichiers :

        • multibox.js  
        • overlay.js
        • mootools.js
    • vous notez les adresses de ces 4 fichiers
    7ème étape :

    Maintenant, plaçons ce lecteur. En HTML, vous collez
    <link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/css/multibox.css" rel="stylesheet"
    type="text/css" />
    <script type="text/javascript"
    src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
    <script type="text/javascript"
    src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/overlay.js"></script>
    <script type="text/javascript"
    src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/multibox.js"></script>
    <style type="text/css">
    #htmlElement {
        padding: 10px;
        background-color: #000;
    }
    </style>

    Vous remplacez les adresses en rouge par les vôtres : vous les avez noté à l'étape 6.

    Si vous êtes sur OverBlog, vous pouvez utiliser les miennes

    Puis votre morceau de musique, toujours en HTML
    <div id="container">
    <a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/music.mp3" rel="" id="mb8" class="mb"
    title="Musique">La musique que j'aime</a>
    <div class="multiBoxDesc mb8">Un morceau de musique</div>
    </div>
    En bleu, votre morceau de musique
    En vert, l'intitulé du lien qui apparaît sur votre blog
    En orange, ce qui apparaîtra sous le lecteur

    Et pour finir, tel quel, toujours en HTML
    <script type="text/javascript">
                var box = {};
                window.addEvent('domready', function(){
                    box = new MultiBox('mb', {
                        useOverlay: true,
                        container: document.body,
                        contentColor: '#FFF',
                        showNumbers: true,
                        descClassName: 'multiBoxDesc',
                        path: 'multibox/'
                    });
                });
    </script>

    Mettre en ligne de la musique avec un mini-lecteur MP3

    Grâce à ce petit script, vous pourrez créer un mini lecteur MP3 tout simple, avec marche / arrét

    En html d'un module, vous collez ce code :
     <script type="text/javascript" src="http://googlepage.googlepages.com/player.js"></script>
    Et à chaque fois, que vous collerez l'adresse d'un MP3 dans l'HTML dans un article
    <a href="http://www.archive-host2.com/membres/up/1404915275/sundaybloodysunday.mp3">Sunday Bloody Sunday</a>

    ce script reconnaitra un lien avec extension mp3 et le transformera en mini-lecteur.

    Exemple : Laissez le temps à la page et au fichier de charger et cliquer sur la flèche verte qui va apparaître.

    Benjamin Biolay

    Attention, veillez bien à laisser un espace devant le titre de votre lien afin de laisser la place pour les petits logos de marche et d'arrêt.

    Mettre en ligne de la musique avec une playlist - 2ème partie

    DEEZER

    Allez sur Deezer

    Inscrivez-vous.

    Nous allons créer une play-liste, c'est-à-dire un lecteur de plusieurs chansons.
    Cliquez dans le menu de gauche, sur Créer une Playlist
    Nommez cette playlist.
    Recherchez les chansons que vous voulez y mettre, cliquez sur le + en début de ligne pour les rajouter.
    Sélectionnez la playlist dans laquelle vous mettrez cette chanson et validez.
    Répétez l'opération pour toutes les chansons à rajouter.

    Une fois, la sélection terminée, cliquez sur le nom de votre playlist dans la colonne de gauche.
    Copier le code du lecteur exportable.
    En cliquant sur Personnaliser le lecteur exportable, vous pouvez changer son design, ses dimensions, choisir une lecture automatique ou non

    Vous obtenez un code
    <div style="width:180px;height:236px;"><object width="180" height="220"><param name="movie"
    value="http://www.deezer.com/embedded/widget.swf?path=2252254&lang=fr&autoplay=0&id=820320"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=2252254&lang=fr&autoplay=0&id=820320" type="application/x-shockwave-flash" width="180"
    height="220"></embed></object><a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music"
    title="free music" border="0" style="border:none;margin:0;padding:0;" /></a></div>
    Vous le copiez et le collez en html

    free music


    MYFLASHFISH

    On peut trouver toutes sortes de multi-lecteurs MP3 sur le Net. Le site myflashfetish.com en a regroupé plusieurs parmi les plus performants et les plus originaux.

    Exemple :

    Check out this MySpace MP3 Player!
    (Pour le faire fonctionner, cliquez la petite flêche)

    Après avoir ouvert un compte ("sign up"), c'est gratuit bien sûr, cliquez sur l'onglets "MP3 players".
    Le site vous propose 10 modèles originaux que vous pouvez voir fonctionner en cliquant sur "preview".
    Votre choix fait, cliquez sur "create".
    Pour illustrer cet article, j'ai choisi le modèle "i Tape".
    Vous pouvez soit aller chercher des chansons sur des sites de musique, soit vous créer votre propre playlist. Pour cela hébergez vos mp3 (voir comment faire ici ) et indiquez les URL de vos morceaux ainsi obtenus dans le tableau situé tout en bas de la page, et indiquez le titre en vis à vis.

    Une fois cette opération terminée, pensez à indiquez si vous voulez que votre lecteur se déclenche automatiquement ou non (auto-start : yes/no) et si vous voulez que l'ordre de passage des
    morceaux soit aléatoire (shuffle songs: yes/no).

    Cliquez sur "Add MP3s".

    Il est temps de donner l'aspect final à votre lecteur en changeant la couleur (n'oubliez pas de cliquer sur "update colour" pour que les changements eventuels soient pris en compte).

    Tout en bas de la page, dans "edit songs here", tous vos morceaux sont présentés sous forme d'étiquettes. Vous pourrez ici changer l'ordre des chansons, en faisant glisser les étiquettes à
    l'endroit voulu ou supprimer un fichier. Rappelez-vous qu'après chaque ajout, suppression ou changement de position d'une chanson, vous devez cliquer sur "update my playlist" pour que les
    changements soient pris en compte.

    Votre travail terminé, sélectionnez "I'm Done"

    Un code vous est donné à copier et coller en HTML . Exemple de code :
    <center><embed src="http://www.mp3asset.com/swf/mp3/mff-mixtape.swf?myid=1858415&mycolor=0x66&mycolor2=
    0x66&autoplay=false&f=3" flashvars="path=2007/03/31" menu="false" quality="best" scale="noscale" bgcolor="#ffffff" wmode="transparent" width="300" height="185" name="MyFlashFetish.com"
    align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center><center><a
    href="http://www.mp3assets.com" target="_blank"><img src="http://www.mp3assets.com/images/badgemp3player.gif" alt="Myspace Mp3 Player, MySpace MP3 Players, Flash MP3 Players"
    style="position:absolute; left:0px; top: 88px; z-index:9;" border="0"></a>Check out this <a href="http://www.mp3assets.com">MySpace MP3
    Player</a>!</center><br><br>

    JAMENDO

    Sur Jamendo, les artistes autorisent le partage de leur musique. C'est libre, légal et illimité.

    Actuellement, les chanteurs proposés ne sont pas encore très connus...enfin me semble t'il... mais ce site est en pleine expansion.

    L'utilisation est assez simple :
    • vous cliquez sur Musique dans le menu horizontal
    • vous sélectionnez par album ou chanteur
    Dans la colonne de droite Widget, vous sélectionnez

    • Site Web/blog HTML
    Vous avez le choix entre plusieurs codes à copier et à coller en html :

    • Lecteur "Musicplayer" étendu
    • Lecteur "Musicplayer" compact
    • Lecteur "Musicplayer" bouton
    • Lecteur Radio.blog version 2
    • Lecteur "dewplayer" multipiste
    Un exemple :



    Vous pouvez utiliser aussi le
    • Lecteur Jamendo standard
    <div align="center"><iframe width="302" height="353" src="http://www.jamendo.com/fr/get/track/id/album/id/playerpage/19701/?item_o=track_no_asc&
    n=all&player_height=353&player_type=coverinfos1&player_width=302&playercode_type=generic" frameborder="0" style="border:0;width:302px;height:353px;" scrollbars="no">
    </iframe></div>
    vous collez ce code en HTML.

    Mettre en ligne de la musique avec une playlist - 1ère partie

    Voici une sélection de sites qui vous proposent, pour la plupart, d'héberger votre musique et de créer vos playlist, à partir de vos propres morceaux et de ceux déjà présents sur le site.

    JIWA

    Jiwa propose des titres, des clips et des playlist.

    Il vous suffit de vous inscrire en cliquant sur Créez votre compte : pseudo, mot de passe, email, nom et prénom, âge, sexe et avatar.

    Ensuite :
    • soit vous sélectionnez un morceau dans :

      • Jiwa radio : pour l'écouter sur le site
      • Nos coups de coeur :

        • vous cliquez sur Intégrer à mon blog
        • vous définissez le design du widget
        • vous copiez le code
        • Vous le collez en HTML
    • Top Songs :

      • vous sélectionnez la chanson
      • vous cliquez sur Intégrer à mon blog
      • vous copiez le code
      • vous le collez en HTML
    • Top Playlist comme Nos Coups de coeur.

    MONK

    Allez sur MOONK

    Inscrivez-vous.
    Vous recevez un mail : vous devez cliquer sur un lien qui s'y trouve pour activer votre compte.

    Cliquez sur Juke Box
    Uploadez vos MP3
    Choisissez votre jukebox et ses dimensions
    Donnez un nom à votre oeuvre
    Copiez le code
    <table style="border-collapse:collapse"><tr><td><embed pluginspage="http://www.macromedia.com/go/getflashplayer" base="http://www.moonk.com"
    wmode="transparent" src="http://www.moonk.com/themes/MAGIX_MOONK/flash/player/player_loader.swf?xmlpath=
    http://www.moonk.com/moonk/xml&eid=C9B364A03D9911DCB21B18CAD45BFC0D&moonk=true" height="272" width="272" type="application/x-shockwave-flash" hspace="0" vspace="0" quality="high"
    allowscriptaccess="always" swLiveConnect="true"></embed></td></tr><tr><td style="text-align:center;"><a
    href="http://www.moonk.com/redirects/moonk_player_link.htm"><img style="border:none;" src="http://www.moonk.com/themes/MAGIX_MOONK/images/logo_moonkSmall.gif" /></a> <a
    href="http://www.moonk.com/redirects/moonk_player_link.htm" style="font-size:10px;color:#33a1ff;text-decoration:none;" onmouseover="this.style.textDecoration='underline';"
    onmouseout="this.style.textDecoration='none';">Get your own Moonk!</a></td></tr></table>
    et collez le en HTML


    Get your own Moonk!

    ODEO

    Allons chez ODEO

    Il s'agit d'un site anglo-saxon ; on y trouvera donc essentiellement de la musique de langue anglaise, libre de droit.

    J'ai envie d'installer une chanson de Leonard Cohen. je fais donc une recherche dans le pavé en haut à droite.
    Je clique sur la réponse qui me convient.
    Je clique sur Embeddable Player
    Je choisis le design de mon player
    Je copie le code
    <embed src="http://odeo.com/flash/audio_player_black.swf" quality="high" width="322" height="54" name="odeo_player_black"
    align="middle" allowScriptAccess="always" wmode="transparent"  type="application/x-shockwave-flash" flashvars="type=audio&id=1446223" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed><br /><a style="font-size: 9px; padding-left: 110px; color: #f39;
    letter-spacing: -1px; text-decoration: none" href="http://odeo.com/audio/1446223/view">powered by
    <strong>ODEO</strong></a>
    je le colle en html

    powered by ODEO

    RADIOBLOG CLUB

    Radio.blog.club est un site qui vous propose de piocher dans une immense base de données musicale et de choisir une ou plusieurs chansons à diffuser sur votre blog.

    L'utilisation est très simple:
    • Recherchez votre artiste ou le titre de votre chanson préférée dans le cadre "music search".
    • Cliquez sur la flêche bleue à gauche du morceau que vous avez choisi.
    • A droite de l'écran, vous pourrez configurer la couleur des différents éléments du lecteur qui sera sur votre blog (fond, bordure, bouton, police).
    • Une fois cette étape terminée, un code vous sera fourni. Copiez le en mode source/html à l'endroit désiré...N'hésitez pas à jouer sur la taille de votre lecteur ("width": largeur; "height":
      hauteur).
    Par exemple, pour The Partisan, j'obtiens le code suivant :
    <embed type="application/x-shockwave-flash"  src="http://stat.radioblogclub.com/radio.blog/skins/mini/player.swf"
    allowScriptAccess="always" width="180px" height="23px"  bgcolor="#FFCCFF"  id="radioblog_player_0"
    FlashVars="id=0&filepath=http%3A%2F%2Fblogflyaway.free.fr%2Fradio.blog%2Fsounds
    %2FThe%20Partisan%20-%20Leonard%20Cohen.rbs&colors=body:#FFCCFF;
    border:#CC00FF;button:#9933FF;player_text:#9900CC;playlist_text:#999999;
    "></embed>
    qui donne :

    LASTFM

    Last.fm, plate forme de musique communautaire  propose quelques widgets intéressants qui vous permettront de faire partager vos goûts musicaux avec les visiteurs de votre blog. Je vous en présente deux...

    Connectez-vous ici. Il vous faudra vous créer un compte au préalable...

    La radio

    Le premier widget est la Radio. Le principe est très simple: vous sélectionnez un artiste et last.fm fournira une sélection de chansons d'artistes "similaires". Néanmoins, les critères de similarités peuvent être surprenants, ce qui peut amener de bonnes surprises, soyons positifs.

    Cliquez sur "Radio Player" puis sélectionnez un nom d'artiste que vous appréciez.
    Cliquez sur "generate". Pour pourrez ensuite régler la couleur et la taille de votre radio.
    Ensuite,sur le petit panneau intitulé "show me the code", cliquez sur la vignette "<>". Vous obtiendrez un code à copier et à coller en html sur votre blog. Vous obtenez :









    La playlist


    Un autre widget sympa est celui qui vous permettra d'afficher votre playlist last.fm. Cette playlist est à construire. Pour ce faire, il vous faudra, lorsque vous écouterez un morceau qui vous plait sur last.fm, le copier en cliquant sur la droite du titre de ce morceau, sur une image représentant une cassette flanquée d'un signe plus. Pour pouvoir utiliser ce widget, il vous faudra une playlist de 15 chansons au minimum.
    Dans votre menu widgets, cliquez sur "playlist player". La procédure est exactement la même que pour la radio. Exemple de playlist player :









    La mosaïque d'albums