Signature codée

Beaucoup se demandent comment faire une signature codée avec des onglets en vertical sur le côté, et bien voilà une des solution que vous pouvez admirer ici : [Seuls les modérateurs ont le droit de voir ce lien]

Alors, avant toute chose, vous devez ouvrir une page de bloc note. Une fois la chose faite, nous allons passer à la création/personnalisation de notre signature codée.

Code à copier/coller dans le bloc note :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Signature by Silver°Dragon</title>

<style type="text/css">

span{
   float:center;
   padding:12px;
   }

.bloc_texte{
   position:absolute;
   left:12px;
   top:5px;
   left: 140px;
   width :500px;
   height:200px;
color: #ffffff;
font-size: 11px;
font-family:georgia;
text-decoration: none;
border-bottom: 5px #4f4f4f solid;
border-top: 6px #4f4f4f solid;
border-right: 2px #4f4f4f solid;
border-left: 2px #4f4f4f solid;
text-shadow: #ffffff 2px 2px 3px;
display:block;
-moz-border-radius: 0px 30px 0px 30px;
-webkit-border-radius: 0px 30px 0px 30px;
background-image: url('http://www.flikie.com/wp-content/uploads/2011/03/Patterns_20110304_Flower-pattern.jpg');
-webkit-box-shadow: 1px 2px 2px 3px #000000;
-moz-box-shadow: 1px 2px 2px 3px #000000;
text-align: justify; }

.titre{
   font-size:11px;
border-bottom: 5px #4f4f4f solid;
border-top: 6px #4f4f4f solid;
border-right: 2px #4f4f4f solid;
border-left: 2px #4f4f4f solid;/
text-shadow: #FFFFFF 0px 0px 3px;
-webkit-box-shadow: 1px 2px 2px 3px #000000;
-moz-box-shadow: 1px 2px 2px 3px #000000;
-moz-border-radius: 0px 30px 0px 30px;
-webkit-border-radius: 0px 30px 0px 30px;
width : 110px;
height: 20px;
background-image: url('http://www.flikie.com/wp-content/uploads/2011/03/Patterns_20110304_Flower-pattern.jpg');
text-align: center
padding:4px;
color: #ffffff; }

.menu{
   font-size:11px;
border-bottom: 5px #4f4f4f solid;
border-top: 6px #4f4f4f solid;
border-right: 2px #4f4f4f solid;
border-left: 2px #4f4f4f solid;
text-shadow: #FFFFFF 0px 0px 3px;
-webkit-box-shadow: 1px 2px 2px 3px #000000;
-moz-box-shadow: 1px 2px 2px 3px #000000;
-moz-border-radius: 0px 0px 30px 30px;
-webkit-border-radius: 0px 0px 30px 30px;
background-image: url('http://www.flikie.com/wp-content/uploads/2011/03/Patterns_20110304_Flower-pattern.jpg');
height: 20px;
width: 315px;
text-align: center;
padding: 4px;
top: -15px;
margin-left: 220px;
margin-top: -10px;
color: #ffffff; }

.ligne{
   font-size:10px;
border-bottom: 5px #4f4f4f solid;
border-top: 6px #4f4f4f solid;
border-right: 2px #4f4f4f solid;
border-left: 2px #4f4f4f solid;
text-shadow: #FFFFFF 0px 0px 3px;
-webkit-box-shadow: 1px 2px 2px 3px #000000;
-moz-box-shadow: 1px 2px 2px 3px #000000;
-moz-border-radius: 0px 30px 30px 0px;
-webkit-border-radius: 0px 30px 30px 0px;
background-image: url('http://www.flikie.com/wp-content/uploads/2011/03/Patterns_20110304_Flower-pattern.jpg');
height: 175px;
width: 15px;
text-align: center;
padding: 4px;
top: -15px;
margin-left: 633px;
margin-top: -234px;
color: #ffffff; }
.ligne:hover{cursor:pointer;}

/* CSS du Texte */

a {text-shadow: #FFFFFF 0px 0px 3px; color: #ffffff;}
a {text-decoration: none !important;}
a:hover{text-decoration: none !important;}
a:hover{font-variant: small-caps;}

/* FIN DU CSS du Texte */

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>
<span><h1 class="titre">ONGLET 1</h1><div class="bloc_texte" id="1">CONTENU DU BLOC DE LA SIGNATURE 1</div></span>

<span><h1 class="titre">ONGLET 2</h1><div class="bloc_texte">CONTENU DU BLOC DE LA SIGNATURE 2</div></span>

<span><h1 class="titre">ONGLET 3</h1><div class="bloc_texte">CONTENU DU BLOC DE LA SIGNATURE 3</div></span>
<br>

<div class="menu"><a href="url-de-la-page" >Lien</a> ♦ <a href="url-de-la-page" >Lien</a> ♦ <a href="url-de-la-page" >Lien</a> ♦ <a href="url-de-la-page" >Lien</a> ♦</div>
<div class="ligne">V<br>O<br>T<br>R<br>E<br><br>P<br>H<br>R<br>A<br>S<br>E</div>
</body>
</html>

Tout ce qui se trouve entre : <'style type="text/css"> <'/style'>, c'est le css de notre signature codée, ce qui permet de personnaliser la couleur ou l'image du fond, la couleur du texte, l'arrondi des onglets etc...

Voici un récapitulatif de ce que vous pouvez personnaliser :

Spoiler:

Une fois que vous avez personnalisé votre css, sur le bloc note, nous allons remplir la signature. Pour se faire, décortiquons une partie du html.

Code:: <span><h1 class="titre">ONGLET 1</h1><div class="bloc_texte" id="1">CONTENU DU BLOC DE LA SIGNATURE 1</div></span>

Voici la partie du premier onglet (on le reconnaît grâce au titre "ONGLET 1"), à la place de ONGLET 1, vous allez mettre le titre de l'onglet que vous voulez. A la place de contenu du bloc de la signature 1, vous allez mettre le contenu de votre signature. Cela peut-être une image ou encore du texte. N'oubliez pas qu'il ne faut pas mettre de BBCODE dans cette signature codée, vous devez mettre seulement du HTML.

Une fois que vous avez rempli les trois onglets de la signature, nous allons créer une iframe. Pour commencer, enregistrer votre bloc note avec le titre "signature.HTML" (mettez obligatoirement .html a votre titre), n'oubliez pas de sélectionner pour le codage "Unicode", sinon, certains caractères ne seront pas pris en compte lors de l’enregistrement.

Une fois votre bloc note enregistré, rendez-vous sur [Seuls les modérateurs ont le droit de voir ce lien] et créez-vous un compte si vous n'en avez pas déjà un ( [Seuls les modérateurs ont le droit de voir ce lien] et sélectionnez "Hébergement de fichiers"). Une fois sur la page suivante (là où vous avez écrit "Etape 1 : Choix de l'offre") , vous descendez en bas de la page et vous cliquez sur "Vos besoins sont simples ?" , vous arriverez ensuite sur une nouvelle page où on vous demande de répondre à quelques questions et remplir un formulaire pour vous inscrire, cette offre là est complètement gratuite.

Une fois votre compte créé, vous vous connectez. Descendez ensuite la page et cliquez sur "Ajout rapide de fichier", une petite fenêtre va s'ouvrir, sélectionnez "mes fichiers" puis cliquez sur "Choisissez un fichier " puis choisissez le fichier "signature". Une fois que c'est fait, vous allez arriver (encore) sur une nouvelle page, vous descendez à "Liens Généraux" et prenez le lien principal que vous mettez ici :

Code:: <IFRAME src="URL_DE_LA_SIGNATURE" width=LARGEUR height=HAUTEUR frameborder=0 scrolling=auto > </IFRAME>

A la place de URL_DE_LA_SIGNATURE, vous devez mettre le lien que nous venons de copier-coller. Ensuite, remplacez LARGEUR par un chiffre, environ 600-700 px puis pareil pour Hauteur, dans les alentours de 300, adaptez à votre signature.

Voilà, le tuto est terminé. Si vous avez la moindre question, n'hésitez pas ;).
Les crédits dans votre signature ne seront pas de refus, comme le merci à la suite :)