AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez| .

Code facultatif

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage

avatar

Jack Black
Votre admin dévouée <3


♫ Avatar : Mischa Barton
♫ Crédits : Avatar by Kurt Warner; code signature Bazzart; image signa by Kurt
♫ Pseudo : babs


Carte d'identité
♫ Age du perso: 28 ans
♫ Mes amours mes amis, mes emmerdes:
♫ Tes projets:


MessageSujet: Code facultatif Mar 24 Juin - 15:30

Codage Instagram




Le CSS



A mettre au début de chaque poste Very Happy
Code:
   <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><link href='http://Zadig.opendrive.com/files/85298802_ewQZo/Instagram%20-%20CSS%20Page%20principale.css' rel='stylesheet' type='text/css'><!--
    --> <style type='text/css'>.photo{width: 100px; height: 100px; padding:5px; margin: 5px;} .photo-inside{width: 100px; height:100px; background-color: rgba(0, 0, 0, 0.1); background-size:100px;position: relative;left: -1px;top: -1px;}.instapost {width: 480px; background: none repeat scroll 0% 0% #F8F8F8; padding: 5px; border-radius: 5px; margin-bottom: 5px;}</style>



Page d'accueil



Code:
   <center> <div class="insta-fond"><!--

    ---- Début de la barre Instagram ----

    --> <div class="insta-barre"><!--
    --> <table cellpadding="0" cellspacing="0"><tr><td><div style="position: relative; left:-130px;"><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div></td><td><div style="background-color:rgba(6, 54, 95, 0.35); height:30px;"><a href="http://www.bazzart.org/u4334"> <div class="insta-home"> </div></a> </div></td><td><div class="insta-separator"></div></td></tr></table></div></td><td><div class="logo"> Instagram </div> </td><td><div style="position: relative; right:-127px;"> <!--
    --><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div> </td><td> <!--

    --><div style="margin-left:8px; margin-right:3px;"><!--
    Début mini icone utilisateur
    --> <div class="mini-icon-profile" style="background-image: url(votre-image de profil);"></div><!--
    Fin icone utilisateur et début Username
    --></div> </td><td><div class="insta-miniusername">Votre Username ici</div><!--
    ----- Fin Username -----
    --></td><td><div class="insta-separator"></div></td></tr></table></div></td></tr></table> </div><!--

    ---- FIN de la barre Instagram ----

    --><div class="insta-feed-header" style=""><!--

    ---------- Début du header contenant les icones --------------------

    --> <div class="insta-icon-container"> <table cellpadding="0" cellspacing="0"><tr><td><!--
    ----- IMAGE 1 -----
    --><!--
    IMAGE 1.a--><div id="instaimg1" style="background-image: url(votre-image);"> <!--
    IMAGE 1.b
    --><div class="instahover1" style="background-image: url(votre-image);"></div></div><!--
    ---- IMAGE 2 ----
    --> <!-- IMAGE 2.a
    --> <div id="instaimg2" style="background-image: url(votre-image);"> <!--
    IMAGE 2.b
    --><div class="instahover2" style="background-image: url(votre-image);"></div></div></td><td><!--
    ----- IMAGE 3 (grande pic) -----
    --><!--
    IMAGE 3.a --><div id="instaimg" style="background-image: url(votre-image);"><!--
    IMAGE 3.b
    --><div class="instahover" style="background-image: url(votre-image);"></div></div></td><td><!--
    ------ IMAGE 4 ------
    --><!-- IMAGE 4.a
    --><div id="instaimg3" style="background-image: url(http://img4.hostingpics.net/pics/818362NicoIc4.png);"><!--
    IMAGE 4.b
    --><div class="instahover3" style="background-image: url(votre-image);"></div></div> <!--
    ------ IMAGE 5 ------
    --><!-- IMAGE 5.a
    --><div id="instaimg4" style="background-image: url(votre-image);"><!--
    IMAGE 5.b
    --><div class="instahover4" style="background-image: url(votre-image);"></div></div></td> <td><!--
    ------ IMAGE 6 ------
    --><!-- IMAGE 6.a
    --><div id="instaimg5" style="background-image: url(votre-image);"><!--
    IMAGE 6.b
    --><div class="instahover5" style="background-image: url(votre-image);"></div></div><!--
    ------ IMAGE 7 ------
    --><!-- IMAGE 7.a
    --> <div id="instaimg6" style="background-image: url(votre-image);"><!--
    ------ IMAGE 7 ------
    --><!-- IMAGE 7.b
    --><div class="instahover6" style="background-image: url(votre-image);"></div></div></td></tr></table> </div></div><!--

    ---------- FIN du header contenant les icones --------------------

    --> <div class="insta-fond-profile"><table cellpadding="0" cellspacing="0"><tr><td><div class="icon-profile-wrap"> <!--

    ---------- Icone du profil (la même que la mini) --------------------

    --><div class="icon-profile" style="background-image: url(votre-image de profil);"><!--

    --></div><div style="height:4px;"></div><div class="insta-button-follow"> <div class="insta-follow-text"> Following</div></div></div></td><td><!--
    ------------ DEBUT DU PROFIL ------------------
    --><div class="insta-username2">Nom d'utilisateur </div><!--
    --><div class="bio-user"> <b>Pseudo, nom, whatever</b> Hello my name is Robert </div></td><td> <!--
    ------------ DEBUT DES STATS ------------------
    --><div class="insta-stat"><center><!--
    ------------ Nombre de posts ------------------
    --><table cellpadding="0" cellspacing="0"><tr> <td> <div class="stat-a">###</div> <div class="stat-b"> posts </div></td> <!--
    ------------ Nombre de followers ------------------
    --><td> <div class="stat-separator"></div></td><td><div class="stat-a">###</div><div class="stat-b"> followers </div></td><!--
    ------------ Nombre de compte suivis ------------------
    --><td><div class="stat-separator"></div></td><td><div class="stat-a">###</div><div class="stat-b"> following </div></td></tr></table></center></div></td></tr></table></div><!--
    ------------ FIN DU PROFIL ------------------
    --> <!--
    ------------ DEBUT DU FEED PHOTOS ------------------
    --><div class="feed-photos"><table cellpadding="0" cellspacing="0" class="feed-photo-container"><tr><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--
    --> </tr> </table><!--

    --><div class="feed-divider"></div><!--

    --> <table cellpadding="0" cellspacing="0" class="feed-photo-container"><tr><!--
    --><td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td> <!--

    --><td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> </tr> </table>  <!--
    Coller le code avant le <!-- précédent pour rajouter des lignes.
    --></div><div class="load-footer">Load more...</div></div> </center>

Pour rajouter une ligne de photos:
Code:
   <table cellpadding="0" cellspacing="0" class="feed-photo-container"><tr><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--

    --> <td> <div class="photo"> <div class="photo-inside" style="background-image: url(votre-image);"> </div></div></td><!--
    --> </tr> </table><!--

    --><div class="feed-divider"></div>



Nouveau poste ( avec coms )



Code:
   <center><!--

    ---- Début de la barre Instagram ----

    --> <div class="insta-barre" style="left:0px;"><!--
    --> <table cellpadding="0" cellspacing="0"><tr><td><div style="position: relative; left:-130px;"><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div></td><td><div style="background-color:rgba(6, 54, 95, 0.35); height:30px;"><a href="http://www.bazzart.org/u4334"> <div class="insta-home"> </div></a> </div></td><td><div class="insta-separator"></div></td></tr></table></div></td><td><div class="logo"> Instagram </div> </td><td><div style="position: relative; right:-127px;"> <!--
    --><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div> </td><td> <!--

    --><div style="margin-left:8px; margin-right:3px;"><!--
    Début mini icone utilisateur
    --> <div class="mini-icon-profile" style="background-image: url(votre image de profil);"></div><!--
    Fin icone utilisateur et début Username
    --></div> </td><td><div class="insta-miniusername">Votre Username ici</div><!--
    ----- Fin Username -----
    --></td><td><div class="insta-separator"></div></td></tr></table></div></td></tr></table> </div><!--

    ---- FIN de la barre Instagram ----

    --><div class="insta-fond" style="padding-top:5px;"><div class="instapost"><table cellpadding=0 cellspacing=0 cellmargin=0 width=100%><tr valign="middle"><td width="230px" style="border-right: 1px solid #AAA; padding: 3px;"><a href="http://www.bazzart.org/u4334"><!--

    --><div class="insta-post-left"> <!--
    Votre image de post
    --><div class="insta-post-left-img" style="background:url(Pic postée)"></div></div></a><!--

    --></td><td><!--

    --><div style="background: #fefefe;"><div class="profile-bar"><table width="100%"><tr valign="top"><!--
    Mini-image de profil
    --><td width="30px"><div class="insta-comment-img" style="background:url(votre image)"></div></td><td><!--

    --><div class="insta-poster">Votre pseudo <!--
    --><b># days ago</b> </div></td><!--

    --><td width="60px"><div class="insta-button-follow" style="margin-top: 0px"><span class="insta-follow-text">Following</span></div></td></tr><!--

    --><tr><td colspan="2"><div class="instacap"> Ta vie, tes tags #Jambon ! </div> </td></tr></table></div> <!--
    La Like bar. Si t'as pas de likes, bah tu mets 0 *pan*
    --><div class="likesBar"> <span class="likesBar-pseudo">Saucisse au jambon</span> and <span class="likesBar-number">125</span> others like this. </div><!--
    Les champs des commentaires
    --> <div class="insta-comment"><!--

    --> <div style="icomm"> <div class="insta-comment-img" style="background:url(image de profil du commentateur)"></div> <b>un pseudo</b><br/> un commentaire. <i>#tag</i> <a href="" class="insta-link">@Link</a></div><br/> <!--

    --><div style="icomm"> <div class="insta-comment-img" style="background:url(image de profil du commentateur)"></div> <b>un pseudo</b> <br/> un commentaire.</div>
    <!-- Remplacer ici pour rajouter des commentaires -->
    </div><!--
    --> <div style="background: #fefefe; padding: 0px 0px"><img src="http://image.noelshack.com/fichiers/2014/13/1395771220-0nwsiwm2.png"/></div></div><!--

    --></td></tr></table> </div></div></center>



Commentaires



Code:
   <center><!--

    ---- Début de la barre Instagram ----

    --> <div class="insta-barre" style="left:0px;"><!--
    --> <table cellpadding="0" cellspacing="0"><tr><td><div style="position: relative; left:-130px;"><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div></td><td><div style="background-color:rgba(6, 54, 95, 0.35); height:30px;"><a href="http://www.bazzart.org/u4334"> <div class="insta-home"> </div></a> </div></td><td><div class="insta-separator"></div></td></tr></table></div></td><td><div class="logo"> Instagram </div> </td><td><div style="position: relative; right:-127px;"> <!--
    --><table cellpadding="0" cellspacing="0"><tr><td><div class="insta-separator"></div> </td><td> <!--

    --><div style="margin-left:8px; margin-right:3px;"><!--
    Début mini icone utilisateur
    --> <div class="mini-icon-profile" style="background-image: url(votre-image);"></div><!--
    Fin icone utilisateur et début Username
    --></div> </td><td><div class="insta-miniusername">Votre Username ici</div><!--
    ----- Fin Username -----
    --></td><td><div class="insta-separator"></div></td></tr></table></div></td></tr></table> </div><!--

    ---- FIN de la barre Instagram ----

    --><div class="insta-fond" style="padding-top:2px;"><div class="insta-reply-wrap"><div class="insta-reply-img" style="background:url(votre-image)"></div> <span class="reply-pseudo">un pseudo</span> Commentaire pas trop long sinon ça devient grave moche </div></div></center>

   
Crédit de la fiche @ Babs

_________________
drink up with me now
Et quand le temps se lasse de n'être que tué.... Reste nos rêves à inventer....
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://queen-city.1fr1.net

avatar

Jack Black
Votre admin dévouée <3


♫ Avatar : Mischa Barton
♫ Crédits : Avatar by Kurt Warner; code signature Bazzart; image signa by Kurt
♫ Pseudo : babs


Carte d'identité
♫ Age du perso: 28 ans
♫ Mes amours mes amis, mes emmerdes:
♫ Tes projets:


MessageSujet: Re: Code facultatif Mar 24 Juin - 15:34

Voici le résultat de chaque code, si vous voulez le voir avant de le poster Very Happy

   

   
Votre Username ici
Following
Nom d'utilisateur
Pseudo, nom, whatever Hello my name is Robert
###
posts
###
followers
###
following
 


   
Votre Username ici
Votre pseudo # days ago
Following
Ta vie, tes tags #Jambon !
Saucisse au jambon and 125 others like this.
un pseudo
un commentaire. #tag @Link

un pseudo
un commentaire.

   
   


   
Votre Username ici
un pseudo Commentaire pas trop long sinon ça devient grave moche

_________________
drink up with me now
Et quand le temps se lasse de n'être que tué.... Reste nos rêves à inventer....
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://queen-city.1fr1.net

Code facultatif

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

Sujets similaires

-
» Code Pénal Ayisyen an demode.
» Du code d'éthique de l'Armée Mainoise
» [Code Source] Code Source
» THE question ! [le code, pour marquer ton nom ! ]
» Séminaire: la levée du Code International du Scret Magique

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Queen City :: Communications :: Internet :: Instagram-