AccueilFAQRechercherS'enregistrerGroupesConnexion

Partagez | 
 

 Réaliser une fiche de publicité codée tenue à jour automatiquement

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Rem1
Masculin
Inscrit le : 21/07/2006
Age : 25
Messages : 39023
Localisation : France
Autre :
MessageSujet: Réaliser une fiche de publicité codée tenue à jour automatiquement   Sam 18 Aoû - 22:20

Faire une fiche de publicité codée tenue à jour automatiquement

On voit apparaître de plus en plus de fiches décrivant un forum. Savez-vous que grâce à ForumActif il est possible de faire en sorte
qu'elle se mette à jour automatiquement partout où elle est présente ? Le but de ce tutoriel est de vos expliquer quelques astuces pour réaliser une fiche légèrement codée avec des statistiques en temps réel, non de faire un cours de codage.

Arrow À propos des fiches de publicité ...

On remarque que bien souvent les fiches d'un forum sont complètes et très longues, détaillant beaucoup de choses. Pourtant, la longueur ne fait pas tout. Mettez-vous à la place d'un visiteur : tout ce qu'il souhaite savoir sur votre forum c'est son contenu, son originalité, quel est le sujet traité et éventuellement son activité (les statistiques). À quoi bon noyer le visiteur sous des tas d'informations telles que la composition de l'équipe du forum ou autres détails brumeux lorsque l'on n'est pas inscrit sur un forum ?


Arrow Le secret : une page html liée au forum

Grâce à ForumActif et aux pages HTML que l'on peut créer sur son propre forum, il est possible de réaliser une fiche dont les statistiques seront en temps réel et où chaque modification est appliquée à tous les endroits où cette fiche est postée. C'est idéal pour les échanges de fiches entre partenaires ou pour mettre en premier message sur un sujet de publicité Very Happy Voici un exemple avec la fiche de Coin-pub


Arrow Pré-requis : quelques bases en CSS

Seuls le CSS et l'HTML sont pris en compte. Personnellement j'ai fait en CSS le cadre ainsi que les titre ; mais j'ai utilisé l'HTML pour insérer des liens, images ou couleurs au milieu du texte (les balises sont plus simples). Je ne vais pas faire un cours complet ni sur ces deux langages, mais pour les intéressés une simple recherche google devrait leur en trouver Wink.
Dans le cas de cette fiche, j'ai utilisé "style" (indique que l'on souhaite appliquer un effet que l'on indiquera entre guillemets) associé à la balise "div" (CSS). Cela permet d'indiquer l'effet que l'on souhaite appliquer, la fermeture de la balise indiquant quant à elle jusqu'à où cela s'applique. Cela s'applique pour un titre, un paragraphe, un effet général, mais ne peut être utilisé pour un effet ponctuel (un mot au milieu d'une phrase par exemple. J'expliquerais plus bas comment faire). Voici comment placer cette balise :
Code:
<div style="effets voulus">Emplacement du texte</div>
La dernière balise < /div> symbolisant la fin de l'effet. Entre les guillemets vous pouvez indiquer les effets que vous souhaitez appliquer, en les espaçant d'un point virgule. Par exemple vous pouvez indiquer que vous voulez un cadre autour du texte, que ce cadre doit être en ligne continue, que ce cadre aura 5 px de largeur, avec une couleur de fond, ou que vous souhaitez que le texte soit en Arial, taille 18, couleur orange, avec des lettres espacées de 3 pixels etc.

Voici un exemple permettant d'illustrer l'utilisation des ";" :
Code:
 <div style="font-size:12px; color:#ffc03b;">Titre</div>
Ce qui donne :
Titre


En revanche vous remarquerez que l'on ne peut pas l'utiliser pour mettre un effet sur un mot au milieu d'une phrase puisqu'il y a un retour à la ligne automatique. Pour cela on utilise le même codage mais en replaçant "div" par "span" :
Code:
Bonjour et <span style="font-size:12px; color:#ffc03b;">bienvenue</span> sur CP !
Bonjour et bienvenue sur CP !


Arrow Créer le cadre, indiquer la couleur de fond ainsi que la police du texte

L'ensemble de votre texte sera encadré par cette balise qui indiquera les effets à appliquer. La balise < div style="..."> < /div> est utilisée, et chaque indication est séparée par un ";".

  • Le cadre
    On commence par définir le style du cadre, indiquée grâce à border: valeur. On remplacera valeur par le nom de l'effet voulu :

    Spoiler:
     

    Suivi immédiatement par l'épaisseur de ce cadre, indiquée en pixels : 3px par exemple.
    Puis la couleur du cadre grâce à border-color: valeur, on remplacera valeur soit par le nom de la couleur en anglais (green, orange, pink ...) soit par sa valeur hexadécimale précédée d'un # (#8000c0 par exemple). Pour trouver la valeur d'une couleur, voici deux sites bien pratiques : Jokconcept et Pixelistan

    Ces trois informations doivent être contenues au même endroit, c'est à dire sans ";" entre elles.
    Exemple !
    Code:
    <div style="border:solid 1px #8000c0;">Exemple !</div>

  • La couleur de fond
    On indique ensuite la couleur que l'on souhaite pour l'intérieur de notre fiche grâce à background: valeur, où valeur est remplacé par l'indication de la couleur.

  • La police du texte
    On s'attaque ensuite au texte ! En commençant par la police à appliquer grâce à font-family: valeur, en remplaçant valeur par le nom de la votre (Arial, Verdana ...)

  • L'alignement du texte
    On peut ensuite décider de l'alignement du texte : centré, à droite, à gauche, justifié grâce à text-align:valeurvaleur sera remplacé par ce que l'on souhaite (justify pour un texte justifié, center pour un texte centré, right pour un texte aligné à droite et left pour un texte aligné à gauche)

  • La couleur du texte
    Elle est indiquée tout simplement grâce à color:valeur

  • La taille du texte
    Je l'indique en pixel, ça permet d'avoir beaucoup de tailles possibles. On utilise font-size: 12px où l'on peut remplacer 12 par le chiffre voulu.

  • L'espacement du texte par rapport au cadre
    Si on oublie de l'indiquer le texte se retrouve collé au cadre ! On utilise padding:5px qui indique l'espacement en pixels (remplacer 5 par le chiffre voulu).

  • L'espacement entre les lignes
    Indiqué grâce à line-height:14px, valeur au choix, indiqué en pixel

Exemple !
Code:
<div style="border:solid 1px #8000c0; background: #F7EFFF; font-family: Arial; text-align:justify;  color:#9544FF;  font-size: 12px;  padding:5px; line-height:14px;">Exemple !</div>

Grosso-modo nous avons les propriétés principales de notre fiche de publicité ! Si l'on souhaite avoir un titre ou un paragraphe avec un autre effet, il faut l'indiquer avec une autre balise < div style=".."> < /div> à l'endroit voulu (ou < span style>). À noter que l'ordre des informations par bloc n'a pas d'importance : on peut très bien placer la couleur de la police en premier, l'effet sera le même !


Arrow Indiquer ses statistiques

Certains d'entre vous doivent connaître les variables comme { USERNAME}, hé bien on utilise le même genre pour afficher ses statistiques ! ForumActif a prévu des variables pour afficher le nombre de messages, de membres, etc. d'un forum. Elles fonctionnent dans les messages du forum, mais il est également possible de les faire fonctionner sur une page HTML. Pour cela, on place au début (avant le début du code du cadre) le script suivant qui permettra d'utiliser les variables avec la balise Span. :
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Exemple :
Code:
<span class="USERNAME"></span>

Il suffit de remplacer Username par la variable souhaitée :
Spoiler:
 

Par exemple : Coin-Pub a 20072 membres d'inscrits, 965277 messages postés dans 64530 sujets.
Code:
Coin-Pub a <span class="FORUMCOUNTUSER"></span> membres d'inscrits, <span class="FORUMCOUNTPOST"></span> messages postés dans <span class="FORUMCOUNTOPIC"></span> sujets.


Arrow Quelques balises à savoir

Vous pouvez personnaliser certaines zones de votre texte.

  • Établir une liste avec des points :
    Code:
    <li>Premier point</li>
    <li>Deuxième point</li>

  • Gras : font-weight:bold (ou < b> < /b>, pour un effet isolé. Si on veut faire plusieurs effets en même temps il faut prendre la première proposition, qui peut être intégrée dans une balise div style à la suite d'autres effets : on a alors un code plus propre : tout est indiqué dans une balise, ce qui évite de devoir utiliser 5 balises à la suite comme on le fait parfois en BBcode...)

  • Italique : font-style:italic (ou < i> < /i>)

  • Souligné : text-decoration:underline (ou < u> < /u>)

  • Petites majuscules : font-variant:small-caps

  • Espacement des caractères : letter-spacing:1px (1 étant à remplacer)


Cela peut être utilisé pour les titres : Titre !
Code:
<div style="font-variant:small-caps; letter-spacing:3px; color:orange; font-weight:bold">Titre !</div>
  • Saut de ligne :
    Code:
    <br />

Exemple : Bienvenue sur CP
Le forum de Publicité !

Fondé par Rem1
Code:
Bienvenue sur CP<br /> Le forum de Publicité !<br /> <br /> Fondé par Rem1
Les sauts de ligne n'étant pas pris en compte, je conseille d'en mettre pour bien se repérer :
Code:
Bienvenue sur CP<br />
Le forum de Publicité !
<br /><br />
Fondé par Rem1

  • Insérer un lien :
    Code:
    <a href="Votre Lien">Nom de mon Forum</a>

  • Insérer un lien sans soulignement :
    Code:
    <a href="www Lien" style="text-decoration:none">Nom de mon Forum</a>

  • Rendre une image cliquable :
    Code:
    <a href="www Lien"><img src="www Image Hébergée" border="0"></a>

  • Centrer :
    Code:
    <center>texte</center>


Arrow Pour finir :Hébergez votre code

Il vous suffit d'aller dans votre Panneau d'administration > Onglet "Modules" > HTML & JAVASCRIPT > Gestion des pages HTML > Créer une page HTML. Collez votre code, enregistrez !


Arrow Publiez votre page sur d'autres forums

Il suffit pour cela d'utiliser le code suivant :
Code:
 <iframe src="Lien de votre page HTML" style="width: Largeurpx; height: Hauteurpx;" frameborder="0""></iframe>
Indiquez la largeur ainsi que la hauteur que vous souhaitez,en pixels.


Arrow Exemple

Spoiler:
 
Code:
 <iframe src="http://coin-pub.actifforum.com/h3-publicite-pour-le-tutoriel" style="width: 800px; height: 200px;" frameborder="0""></iframe>
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<div style="border:solid 1px #8000c0; background: #F7EFFF; font-family: Arial; text-align:justify;  color:#9544FF;  font-size: 12px;  padding:5px; line-height:14px;"><div style="font-variant:small-caps; letter-spacing:3px; color:orange; font-weight:bold">Coin-pub</div>
<br /><br />
C'est un <i>forum de publicité</i> créé par Rem1 le <span class="FORUMBIRTHDAY"></span>. Il y a plusieurs services, de l'entraide, des jeux, une super équipe !<br />
Cela fait plusieurs années que le forum est créé et il continuera ainsi.
<br /><br />
Pour nos <span style="font-variant:small-caps">statistiques</span>, nous avons :
Coin-Pub a <b><span class="FORUMCOUNTUSER"></span></b> membres d'inscrits, <span class="FORUMCOUNTPOST"></span> messages postés dans <span class="FORUMCOUNTOPIC"></span> sujets.
<br /><br />
Nous avons trois services :
<li><a href="http://coin-pub.actifforum.com/creations-graphiques-c7/?tid=5f512df76593a07653fa3d7afa2b5c8d" style="text-decoration:none"><font color="#FF3D6A";">Service graphique</font></a> </li>
<li>Service analytique</li>
<li>Service orthographique</li>
</div>


Arrow Lien utile




Tutoriel réalisé par Rem1
Revenir en haut Aller en bas
avatar
Invité
Invité
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Dim 2 Déc - 19:56

Merci, c'est super utile la liste pour les statistiques autos Smile
Revenir en haut Aller en bas
avatar
Rem1
Masculin
Inscrit le : 21/07/2006
Age : 25
Messages : 39023
Localisation : France
Autre :
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Dim 2 Déc - 20:16

Merci Haldor J'ai eu du mal à trouver pour ces statistiques, je connaissais les balises sur le forum mais pour les appliquer en dehors du forum aucune idée ! C'est pourquoi j'en fait profiter les rares à lire tout ce tutoriel
Revenir en haut Aller en bas
avatar
Invité
Invité
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Dim 2 Déc - 20:57

Ah moi c'était l'inverse : je connaissais le script pour mettre le pseudo entre autres sur une page hors forum mais je n'avais pas la liste Smile C'est en cherchant sur Google pour mettre le pseudo dans mon entête (puisqu'elle utilise une iframe) que j'ai trouvé ^^
Revenir en haut Aller en bas
avatar
Bakamat
Membre
Féminin
Inscrit le : 06/09/2012
Age : 23
Messages : 28
Localisation : Chez moi ou au collège.
Emploi / Etudes : Études » Cégep.
Loisirs : RP. Dessiner. Blablater.
http://m-no-toshi.forum-canada.com/
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Dim 10 Fév - 20:20

Bonjour =)

J'ai essayé ton tutoriel, mais quelque chose cloche! Tout mes accents ou symboles sont remplacé ou accompagné par des signes du style î,  ou ê. Ça me fait ça partout où j'ai prévisualisé le iframe. Quatre forums sur 4 me montrent ce défaut d'accent.

Savez-vous comment y remédier?

Merci ><

_________________
Rien ne peut arrêter ma folie.
À quoi bon rêver lorsque la vie est aussi cruelle..?
Revenir en haut Aller en bas
avatar
Rem1
Masculin
Inscrit le : 21/07/2006
Age : 25
Messages : 39023
Localisation : France
Autre :
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Mer 20 Fév - 9:58

Bonjour ! Désolé pour le délai de réponse, est-ce que tu as trouvé solution à ton problème ? Une des explications pourrait être la police de caractère utilisée qui ne prend pas en compte les accents
Revenir en haut Aller en bas
avatar
Ed Speleers Addicts
Fan
Masculin
Inscrit le : 28/08/2012
Age : 29
Messages : 345
Localisation : Londres
Emploi / Etudes : TSM Prêt à Manger
Loisirs : Graphisme - Lecture - Ecriture
http://www.edspeleersaddicts.co.uk
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Dim 24 Mar - 19:02

Sympa ton tuto, merci mille fois Smile

_________________

Edward : "Qu'est-ce que tu penses de moi?"
Me : "Qu'est-ce que tu veux dire?"
Edward : "Est-ce que tu voudrais être ma petite-amie?"
Me : "Moi? Je pourrais être ta mère!!"
Edward : "Mais tu ne l'es pas... Alors, qu'est-ce que tu penses de moi?"
Me : "Tu veux la version soft ou la version Sandy?"
Edward : "La version Sandy?"
Me : "T'es un putain de canon!!"
Edward : ""RIRES!!!!!!!"
Revenir en haut Aller en bas
avatar
Invité
Invité
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Mar 16 Avr - 16:32

J'ai une petite question! Razz quand j'essaie les trucs de codage et tout sur mon forum ça ne fonctionne pas... problem? Enfin bref, merci pour ce tuto! ^^
Revenir en haut Aller en bas
avatar
Wild
Fan
Masculin
Inscrit le : 27/03/2013
Age : 18
Messages : 419
Localisation : Sur Sinnoh !
Emploi / Etudes : Collégien, dehors, mangas *-*
Loisirs : Toujours joyeux et en pleine forme !
http://poke-sword.frbb.net/
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Mar 16 Avr - 16:38

Merci beaucoup j'essayerai d'en faire une ce week-end si j'ai un problème je poserai mes questions ici ^^'

_________________


Merchi ma Yona :3:
 


Kit by x-zorobin, look :3:
 


Kit by Lusso, regarde =):
 
Revenir en haut Aller en bas
petitemanu
Membre régulier
Inscrit le : 10/11/2007
Messages : 66
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Jeu 18 Avr - 15:56

Bonjour,

Merci pour cette note, très bien expliquer.
Revenir en haut Aller en bas
avatar
KageNekko
Membre
Féminin
Inscrit le : 05/07/2013
Age : 16
Messages : 18
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Mer 25 Déc - 19:26

Oh, merci !
Jusqu'à maintenant je ne savais pas faire des iFrames !
Merci Rem1 ! Very Happy

_________________
Incarne un chat et vit dans un monde où l'humain a tout détruit. La mort est partout et les catastrophes naturels s'accumulent. L'humanité disparaît.
Viens nous rejoindre à Apocalypsis !
Revenir en haut Aller en bas
avatar
Invité
Invité
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Mer 22 Oct - 15:32

Merci beaucoup pour ce tutoriel, très pratique ! Wink
Revenir en haut Aller en bas
avatar
Thor d'Asgard
Fan
Masculin
Inscrit le : 31/03/2016
Messages : 370
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Sam 2 Avr - 9:30

Tres utile, merci mille fois Wink
Revenir en haut Aller en bas
avatar
Araya Fenrir
Futur floodeur
Féminin
Inscrit le : 29/12/2011
Age : 28
Messages : 538
Localisation : 17
Emploi / Etudes : Histoire
Loisirs : dessin, rp, informatique
Autre : - Forum surnat city --> En cours
- Forum Doctor Who & Torchwood --> OUVERT
http://rexflicrpg.forumactif.ws
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Ven 21 Oct - 17:19

Merci énormément Very Happy

_________________
Rénovation de :

Soutenez-nous!
Revenir en haut Aller en bas
avatar
Alli
Membre régulier
Féminin
Inscrit le : 23/09/2009
Age : 32
Messages : 51
Localisation : Normandie
Emploi / Etudes : Assistante RH
Loisirs : M'occuper de mes filles :)
http://mere-fille.forumactif.org/
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Ven 24 Fév - 11:06

Ah ça va me servir ça !! Merci !!
Revenir en haut Aller en bas
avatar
Alli
Membre régulier
Féminin
Inscrit le : 23/09/2009
Age : 32
Messages : 51
Localisation : Normandie
Emploi / Etudes : Assistante RH
Loisirs : M'occuper de mes filles :)
http://mere-fille.forumactif.org/
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Jeu 9 Mar - 16:43

Je dois être une vraie quiche, j'y arrive pas !!
Revenir en haut Aller en bas
avatar
Aequitas
Membre
Féminin
Inscrit le : 10/06/2017
Age : 18
Messages : 11
Localisation : Franche Comté
Emploi / Etudes : Terminale L
http://aequitas.forumactif.com/
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   Lun 12 Juin - 19:28

Merci pour ce tuto ! Par contre ça ne marche pas, à la place des accents ça me met des symboles bizarres comme Bakamat, mais quand je prévisualise mon code de base ça ne fait pas ça, et pas moyen d'avoir les statistiques, j'ai bien mis le code mais il n'y a aucun chiffre qui apparaît...^^'
Revenir en haut Aller en bas
Contenu sponsorisé
MessageSujet: Re: Réaliser une fiche de publicité codée tenue à jour automatiquement   

Revenir en haut Aller en bas
 

Réaliser une fiche de publicité codée tenue à jour automatiquement

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Réaliser une fiche de publicité codée tenue à jour automatiquement
» CHATTAHOOCHEE • fiche de publicité
» Fiche de publicité avec les statistiques du forum tenu à jour automatiquement.
» ? « Galerie .Cranberry » et sa fiche de publicité.
» (HIRO') One Piece's History a besoin d'une fiche de publicité.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Coin Pub :: Entraide :: Tutoriels-