AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Les Sites: fonctionnement

Partagez
PNJ
avatar
Messages : 208
Date d'inscription : 18/04/2010

Message par Dieu le Lun 28 Sep - 16:00

Revenir en haut

Les Sites: fonctionnement



N'importe qui peut ouvrir un site. Que ce soit en tant qu'anonyme ou de façon publique, un blog, un espace de vente, ou un forum pour discuter. En soi, l'Internet est immense et remplie de choses utiles, ou non.

Vous l'aurez compris, cette section est donc là pour la vie informatique de votre personnage. Les réseaux sociaux, comme facebook ou twitter, ou encore des sites qui pourraient être intéressants pour la propagande ou l'échange d'informations. En gros, avec un peu d'imagination, vous trouverez bien de quoi faire dans ce sous-forum.
PNJ
avatar
Messages : 208
Date d'inscription : 18/04/2010

Message par Dieu le Lun 28 Sep - 16:28

Revenir en haut

Les Sites: quelques codes


Voici à la suite quelques codes et un aperçu de ces derniers. Notez que seront notés en majuscules le code les endroits que vous pouvez modifier et les X représentent des nombres que vous devez mettre manuellement (nombre d'amis, de Tweets, etc). D'autres informations peuvent être données avant l'aperçu.

Profil Facebook


Vous pouvez utiliser le code des statuts pour en ajouter également, donc certains avec commentaire.


Code:
<div class="facebook_page"><!--
--><div class="fb_barre_haut"><div class="fb_ico"></div><div class="searchbar"><div class="search_ico"></div></div><!--
--><div class="icone_perso" style="background: url('PHOTO_PROFIL');"></div><!--
--><span class="pseudo_perso">PSEUDO</span><!--
--><span class="pseudo_perso">Accueil</span> <span class="pseudo_perso">Retrouver des amis</span><div class="invit_ico"></div><div class="messages_ico"></div><div class="notif_ico"></div></div><!--
--><div class="fb_profil_haut"><!--
--><div class="image_bandeau" style="background: url('IMAGE_BANNIERE_FOND');"></div><!--
--><div class="photo_profil" style="background: url('PHOTO_PROFIL'); background-size: auto 200px;"></div><!--
--><h1>PSEUDO PERSO</h1><!--
--><div class="barre_bandeau"><span class="fb_tab">Journal</span> <span class="fb_tab">À propos</span> <span class="fb_tab">Amis <span class="nombre">XXX</span></span> <span class="fb_tab">Photos</span> <span class="fb_tab">Plus</span></div></div><!--
--><div class="fb_gauche"><!--
--><div class="infos"><span class="emploi">Travaille chez/A travaillé à XXX</span>
<span class="etudes">A étudié à/Étudie à XXX</span><span class="fin_etudes">Diplomé(e) en XXXX</span>
<span class="habite">Habite à XXX</span>
<span class="origine">De XXX</span>
<span class="naissance">Naissance: XX mois XXXX</span></div><!--
--><div class="carre_fb_trucs"><span class="titre">Amis</span><span class="nombre">XXX</span>
<div class="un_ami" style="background: url('IMAGE_AMI'); background-size: 100px; background-position: -10px;"><h2>Pseudo</h2></div><!--
--><div class="un_ami" style="background: url('IMAGE_AMI'); background-size: 100px; background-position: -10px;"><h2>Pseudo</h2></div><!--
--><div class="un_ami" style="background: url('IMAGE_AMI'); background-size: 100px; background-position: -10px;"><h2>Pseudo</h2></div><!--
--><div class="un_ami" style="background: url('IMAGE_AMI'); background-size: 100px; background-position: -10px;"><h2>Pseudo</h2></div><!--
--></div><!--
--><div class="carre_fb_trucs"><span class="titre">Photos</span><span class="nombre">XXX</span>
<div class="une_photo" style="background: url('PHOTO');"></div><!--
--></div><!--
--></div><!--
--><div class="fb_droite"><!--
--><div class="statut_fb"><!--
--><div class="haut"><div class="photo_statut" style="background: url('IMAGE_PROFIL'); background-size: auto 40px;"></div><!--
--><span class="pseudo_statut">Pseudo Membre</span><!--
--><span class="date">XX mois</span></div><!--
--><div class="text_statut">Texte ici</div><!--
--><div class="actions_statut"><span class="jaime">J'aime</span> <span class="comment">Commenter</span> <span class="partage">Partager</span></div></div><!--
--></div>
</div>

Statut Facebook seul avec commentaires et like


Notez que Facebook ne réduit les like qu'à partir de trois likes (mettant à partir de 4 likes les 2 noms de personnes suivi de la mention "et 2 autres personnes". Lorsque vous passez votre souris cette mention, vous verrez alors les Pseudo LIKE SUPP).


Code:
<div class="commenter_statut"><div class="statut_fb"><!--
--><div class="haut"><div class="photo_statut" style="background: url('IMAGE_PROFIL'); background-size: auto 40px;"></div><!--
--><span class="pseudo_statut">Pseudo Membre</span><!--
--><span class="date">XX mois</span></div><!--
--><div class="text_statut">Texte ici</div><!--
--><div class="actions_statut"><span class="jaime">J'aime</span> <span class="comment">Commenter</span> <span class="partage">Partager</span></div></div><!--
--><div class="bas_fb"><div class="aimer"><span class="nom">Pseudo LIKE</span>, <span class="nom">Pseudo LIKE</span> et <span class="nom">X autres personnes<!--
--><span class="autres"><!--
--><span class="nom">Pseudo LIKE SUPP</span><!--
--><span class="nom">Pseudo LIKE SUPP</span><!--
--></span></span> aiment ça.</div><!--
--><div class="commentaire"><!--
--><div class="photo_comment" style="background: url('PROGIL_COMMENTAIRE'); background-size: auto 40px;"></div><!--
--><div class="pseudo_comm">Pseudo</div><!--
--><div class="comm">Commentaire</div>
<div class="date_comm">XX mois, XX:XX</div><!--
--><span class="je_aimer">J'aime</span><!--
--><span class="like">X<!--
--><span class="autres">Vous et Pseudo aimez ça.</span></span></div><!--
--></div></div>

Twitter


Vous pouvez changer la couleur de votre Twitter (la barre de soulignement, la couleur des liens et hashtag) en changeant les deux couleurs hexadécimales (ici #990000 ) dans cette partie du code:
Code:
<style type="text/css">.couleur_twitter {color: #990000;} .couleur_barres {border-bottom: 4px solid #990000;}</style>


Code:
<style type="text/css">.couleur_twitter {color: #990000;} .couleur_barres {border-bottom: 4px solid #990000;}</style><!--
--><!--
--><div class="tweets"><div class="bann_haut"><img src="BANNIERE_HAUT" /></div><!--
--><div class="gauche_tweet"><!--
--><div class="image_profil" style="background: url('IMAGE_PROFIL'); background-size: 200px; background-position: ;"></div><!--
--><div class="pseudo">PSEUDO</div><div class="verified"></div><!--
--><div class="at_twitter">@PSEUDO</div><!--
--><div class="infos">Petite biographie ou infos généraux ici.</div><!--
--><div class="infos_codes"><span class="position">PAYS</span>
<span class="site couleur_twitter">URL VERS SITE</span>
<span class="rejoint">Joined Mois XXXX</span></div><!--
--><div class="photos"><span class="intitule couleur_twitter">XXX photos and videos</span>
<div class="une_photo" style="background: url('PHOTO'); background-size: auto 90px; background-position: -72px 0px;"></div><!--
--><div class="une_photo" style="background: url('PHOTO'); background-size: auto 83px; background-position: -50px 0px;"></div><!--
--><div class="une_photo" style="background: url('PHOTO'); background-size: auto 83px; background-position: -40px 0px;"></div><!--
--><div class="une_photo" style="background: url('PHOTO'); background-size: auto 90px; background-position: -50px 0px;"></div><!--
--></div><!--
--></div><!--
--><div class="droite_tweet"><!--
--><div class="barre"><!--
--><div class="tab couleur_barres"><span class="titre">Tweets</span><!--
--><span class="nombre couleur_twitter">XXX</span></div><!--
--><div class="tab"><span class="titre">Following</span><!--
--><span class="nombre couleur_twitter">XX</span></div><!--
--><div class="tab"><span class="titre">Followers</span><!--
--><span class="nombre couleur_twitter">XX</span></div><!--
--><div class="tab"><span class="titre">Favorites</span><!--
--><span class="nombre couleur_twitter">X</span></div><!--
--><div class="follow"></div></div><!--
--><div class="barre_main"><span>Tweets</span><span class="couleur_twitter">Tweets & replies</span> <span class="couleur_twitter">Photos & videos</span></div><!--
--><div class="un_tweet"><!--
--><div class="avatar_tweet" style="background: url('IMAGE_PROFIL'); background-size: auto 50px;"></div><!--
--><div class="ligne_un"><!--
--><div class="pseudo">PSEUDO</div><!--
--><div class="at_pseudo">@PSEUDO</div><!--
--><div class="date">XX Sep.</div></div><!--
--><div class="texte">Ici le texte. <span class="couleur_twitter">#hastag, liens ou @Pseudo</span></div><!--
--><div class="fin_tweet"><span class="repondre"></span><!--
--><span class="retweet">X</span><!--
--><span class="favoris">X</span><!--
--><span class="trois_points"></span><!--
--></div><!--
--></div><!--
--></div>
</div>

Tweet seul


Postez simplement chaque tweet dans un message à la suite plutôt que d'éditer votre sujet pour notifier ceux qui sont intéressés que votre personnage a fait un nouveau tweet. Ne floodez cependant pas.
Code:
<div class="un_tweet"><!--
--><div class="avatar_tweet" style="background: url('IMAGE_PROFIL'); background-size: auto 50px;"></div><!--
--><div class="ligne_un"><!--
--><div class="pseudo">Pseudo</div><!--
--><div class="at_pseudo">@Pseudo</div><!--
--><div class="date">XX Sep.</div></div><!--
--><div class="texte">Ici le texte. <span class="couleur_twitter">#hastag, liens ou @Pseudo</span></div><!--
--><div class="fin_tweet"><span class="repondre"></span><!--
--><span class="retweet">X</span><!--
--><span class="favoris">X</span><!--
--><span class="trois_points"></span><!--
--></div></div>

Ask


Les questions seront au départ vides. Vous pouvez cependant éditer en ajoutant les questions peu à peu. Les personnes peuvent vous poser des questions anonymement ou pas (simplement en postant un message à la suite de votre ask).


Code:
<div class="ask"><div class="corps"><div class="head"><!--
--><div class="avatar_ask" style="background: url('IMAGE_PROFIL'); background-size: auto 90px;"></div><div class="centre"><!--
--><div class="pseudo">Pseudo</div><!--
--><div class="at_pseudo">@Pseudo</div><!--
--><div class="lieu">Ireland</div><!--
--><div class="texte">Un petit texte de présentation</div></div><!--
--><div class="droite_ask"><!--
--><span class="tab"><span class="nombre">XX</span>réponses</span><!--
--><span class="tab"><span class="nombre">XX</span>j'aime</span><!--
--><span class="tab"><span class="nombre">XX</span>cadeaux</span><!--
--><div class="cadeau"></div><div class="follow">+ Suivre</div><div class="signaler">Signaler</div></div><!--
--></div><!--
--><div class="poser"><h1>Ask me a question</h1><div class="cadre_questio"><div class="barre_bas"><span class="nombre">300</span><span class="bouton">Demander</span></div></div></div><!--
--><h1>réponses</h1><!--
--><div class="une_question_ask"><!--
--><h2>Ici la question</h2><!--
--><div class="demandeur">Pseudo</div><!--
--><div class="rep">Ici la réponse</div><!--
--><div class="date">il y a X mois</div><!--
--><div class="jaime"><span class="nombre">X personnes</span> aiment</div><!--
--></div></div></div>

Question ask seule


Code:
<div class="une_question_ask"><!--
--><h2>Ici la question</h2><!--
--><div class="demandeur">Pseudo</div><!--
--><div class="rep">Ici la réponse</div><!--
--><div class="date">il y a X mois</div><!--
--><div class="jaime"><span class="nombre">X personnes</span> aiment</div><!--
--></div>

La date/heure actuelle est Ven 21 Juil - 18:51