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

Démonstration en ligne | Télécharger

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 ?