Visiting card Blogger template : Un mini-blog pour votre identité numérique

By
Advertisement





Visiting card est un modèle avec quelques effets sympathiques qui peut être installé sur un « mini-blog » pour afficher votre identité numérique. Peu importe que vous soyez un bloggeur ou non, vous pouvez monter un mini-blog affichant des liens vers vos pages sur vos réseaux sociaux préférés.


Comment utiliser ce modèle ?

1. Créer un nouveau blog pour votre carte de visite numérique
2. Créer deux articles, un pour votre présentat ("A propos") et l'autre pour le "Contact". Dans la page pour le contact, mettez juste un mot comme contenu, de tout façon il n'apparaîtra jamais sur le blog.
3. Affichez votre blog et copiez les liens de deux articles (ou pages) créés.
4. Allez modifier les deux articles crées et effacez leur titre, puis publiez de nouveau ces articles.

5. Installation du modèle


Extraire le modèle Blogger du fichier visitingcard.zip

Après vous être connecté, allez sur > Modifier le code HTML> Parcourir > Choisissez le fichier - visiting-card-blogger-template.xml > Transférer > Enregistrer le modèle
6. Paramètres des pages


Après vous être connecté, allez sur Mise en page, Modifier le code html et cochez sur "Développer des modèles de gadget".

Trouvez cette ligne :

<b:if cond='data:blog.url == &quot;http://yourblog.blogpost.com/about.html&quot;'>

Mettez le lien de la page "A propos" à la place de http://yourblog.blogpost.com/about.html

Trouvez cette ligne :

<b:if cond='data:blog.url == &quot;http://yourblog.blogpost.com/contact.html&quot;'>

Mettez le lien de la page "Contact" à la place de http://yourblog.blogpost.com/contact.html

Enregistrez votre modèle.


7. Liens du menu


Trouvez ces deux lignes de code en allant sur "Mise en page", "Modifier le code html" :

<li><a href='http://yourblog.blogpost.com/about.html'>About</a></li>
<li><a href='http://yourblog.blogpost.com/contact.html'>Contact</a></li>

Remplacez les urls par ceux de vos articles (ceux copiés à l'étape 3)

8. Photo ou avatar

Trouvez cette ligne dans votre modèle

 <img alt='VisitingCardBlogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6skM0cR6pJTsMT_iq5RNWVCdARUm8yMtppFcZWmhVI7poBqTYNDS5nqezLAAk1rjgmw_z1q_wfPrx3yQbhx_V2m9OpEtCAOdldPc58aJ0j4sGMq0Fh4Xh3jh1MnrJ0sA56ucu7qesCLGm/s1600/person.png'/>
       
Mettez l'url de votre photo (ou avatar) à la place de  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6skM0cR6pJTsMT_iq5RNWVCdARUm8yMtppFcZWmhVI7poBqTYNDS5nqezLAAk1rjgmw_z1q_wfPrx3yQbhx_V2m9OpEtCAOdldPc58aJ0j4sGMq0Fh4Xh3jh1MnrJ0sA56ucu7qesCLGm/s1600/person.png

Votre photo (ou avatar) doit avoir 59px de largeur et 60px de largeur.

9. Titre et description


Trouvez ces deux lignes et mettez le titre de votre mini blog à la place de "My Visiting card", cela peut être juste votre nom (ou pseudonyme).

Mettez une petite description de votre personne à la place de "A short description of your person"

<h1>My visiting card</h1>
<p>A short description of your person</p>

10. Liens pour les réseaux sociaux


Trouvez ces lignes de code et mettez les liens de vos pages sur les réseaux sociaux entre les ' ' qui succèdent aux href=

<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9x3P8XcvCaSsk_ywND8Oz4w-P-CKedmTaAC73Sd2Oerb1_33rjooQUIbJS62EgpQZMYTTa0FE4pR8B_rvg7uyl20FzycgrEeyvyW7Lp0LC7lyI1dThTaR_i3_z5uL0ek8q2WrLOhlJkio/s1600/i_twitter.png'/> <strong>Twitter</strong>twitter.com</a></li>
           
            <li><a href=' '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qPhwLCOnPrke1eh_KVOq9EQLAmaRJ9Spw3-BtCAwHLljhgIUHcKaiaqJQfTRFm1vuYKu3Exm3hwbrwUm77XCx15MYf542iHQvYln5XsB9K9BJA4cXdhphaT-q2_6SEWNNk_umnopdinj/s1600/i_facebook.png'/><strong>Face Book</strong>facebook.com</a></li>
           
            <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSQhkFZ7MRfpaG5KFb7odT6Mkf0fQs2ND7Hcp-LqERAUqHZpQDh_12jEWVm18H46sYMnxgBZRpbNF3F36njPPCbZk0NTKbXq2VPUTiekDRs6CWlMtsy9gTzC4_SDKRgrLmrvB0N_tRRW8/s1600/i_stumbleupon.png'/> <strong>Stumbleupon</strong>stumbleupon</a></li>
           
            <li><a href=' '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrPB7bgjHvorM5sfLTxNaFQfCqTVnQuWUACbi04R5Qaud6azmg8iitdRv3ck78ECnPUGF3lDhb8QKAcS23ojSrAuyQvJYSHuN4iz2tmIQhZlw6xpRd7Z38MrLYyy0FPpWgSFlJXRKeHE/s1600/i_delicious.png'/> <strong>Delicious</strong>delicious.com</a></li>
           <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygxJBpjXqVMkt_Lf31wTvT-ZHOnbm5tCPggwPpz_N8GagnF3DHkWRCvq6mfPndjaeB-zoOKe0HYYLIChhSKXSlKpRTeIciv0voVu1LCklFbvdG4KUEp-xBSqsAOdw7RhbPTJY9oi8qSt5/s1600/i_digg.png'/> <strong>Digg</strong>digg.com</a></li>
        
            <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfB_8h_xmzgNjATunqHz0EWBK0rkzOOTh4U0S7rqjqYf-6jMRrmPDasVza3FdJTQcGKlaX3GwwLrKMUKNRB2vGiHIYcP-rJC155cMEWinOxukMd-VuRuNLL7ggr6d2ljNw6tzR3yYevl8K/s1600/i_flickr.png'/> <strong>Flickr</strong>flickr.com</a></li>
            <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwbAzno05_uKd7aZgBqD-6EsWxA5DyuEwuQWr6KYyWtJ3pP-5mqkH9MPlRu8VmxkMYElsNApx9se3PNtwDUUioDtX6n5-ZudYuPBUp5YuLL6lA6AbD9n1N29O_jK8LczchazXS2w1i3bux/s1600/i_lastfm.png'/> <strong>Last.fm</strong>last.fm</a></li>
         
            <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3qcagcxfRmUCeUfCEA7yPjMJMcKB4WtoWzMGXueFyUGpglPfvBc9a1G60WBhVL5JVgfY_glGD-jLDnsSZ5kpELJSJEa9aqcdUg_y3CFxkmzUt2Ph5V_1FbbJpQAlJXMhMaR_YkZVWjCN/s1600/i_myspace.png'/><strong>My Space</strong>myspace.com</a></li>
           
            <li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2MbkC4swlBO26f5oKFanL1n9YoUkCPLMisrenVn_6GI9o-QA8zaLDM8tLlEpXCHEFjUgHxlQuhTEYm8h6stHSQYcN6Mpdh3KGNV_UYjs9vuZHZ_y3t1E-qWb88hyphenhyphenPIWfYnNRt3tDGWDEe/s1600/i_reddit.png'/> <strong>Reddit</strong>reddit.com</a></li>

Pour ajouter un lien vers un autre réseau sociale, ajoutez la ligne des codes suivante après celles ci-haut.

            <li><a href='Lien vers votre page sur le réseau'><img src='http://logodureseau.com/reseau.png'/> <strong>Nom du réseau social</strong>Liendureseausocial.com</a></li>

Notez que le logo doit avoir 30x30px.


11. Contenu de la page contact


Sur "Modifier le code html", cochez sur "Développer des modèles de gadget" et Trouvez ces lignes :

<div class='row'><span class='field_l i_company'>Company:</span><span class='field_r'>Your Company Name</span></div>
        
          <div class='row'><span class='field_l i_location'>Location:</span><span class='field_r'>You Location (Town, Country)</span></div>
        
          <div class='row'><span class='field_l i_web'>Website:</span><span class='field_r'><a href='http://yourblogurl.blogspot.com'>Blog or website name</span></div>
        
          <div class='row'><span class='field_l i_mail'>E-Mail:</span><span class='field_r'>youremail@host.com</span></div>
         
          <div class='row'><span class='field_l i_mail'>IM :</span><span class='field_r'>YourIM</span></div>
       
          <div class='row'><span class='field_l i_mail'>Skype:</span><span class='field_r'>yourskype</span></div>

Mettez vos informations à la place des textes en gras puis enregistrez votre modèle.

L'affaire est dans la poche. Alors, qu'en dites-vous ?


3 commentaires:

  1. salut, merci pour ton modèle
    Mais j'ai un probléme, j'ai rien dans "contact"
    http://lecorback-contact.blogspot.com/
    merci d'avance

    RépondreSupprimer
  2. @ Lecorback : Vérifie, ligne par ligne que tu as bien respecté les 7 premières étapes, surtout les étapese 2 et 6. Pour la sixième étape, vérifie que la structure du code est restée intacte quand tu as mis ton lien (peut être as-tu effacé un le & qui précède quot ?).

    RépondreSupprimer
  3. salut rodney,
    j'ai utilisé ton scrpit pour une petite carte de visite elecronique, pour moi c'est la première fois que je touche du code html ton tutorial est tres bien fait,
    merci beaucoup!
    et bravo pour tes blogs ils sont excellents!

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT