Conserver ses widgets après avoir changé son modèle

Il ya de cela deux ans et demi, nous avions vu comment installer un modèle sans perdre ses widgets. Comme Blogger est en pleine évolution, il a été ajoutée une fonction très simple pour conserver ses widgets en changeant des modèles sans avoir à vous battre avec le html de votre blog comme dans l'ancienne méthode.

En effet, dès que vous cliquez sur "Télécharger" après avoir choisis le fichier xml de votre nouveau modèle (ou après en avoir collé le code à la place de l'ancien puis cliqué sur "enregistrer le modèle"),  Blogger vous signale que des widgets manquent sur le nouveau modèle. Ces widgets sont ceux qu'il y avait dans l'ancien mais que Blogger ne trouve nul part dans le code du nouveau.

Deux options vous sont alors offertes : "Conserver les widgets" ou les envoyer dans l'au-delà (Supprimer les widgets) d'une façon irréversible.

Si vous voulez conserver vos anciens widgets dans le nouveau template, cliquez sur "Conserver les widgets" (le bouton orange) et Blogger se fera la joie de leur trouver une place dans le nouveau template.

Il n'y a plus qu'à aller afficher le blog sur votre navigateur pour constater que Blogger a bien conserver vos widgets (souvent dans la sidebar) malgré.le fait que le modèle a été changé.

@+

Lire la suite

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 ?

Lire la suite

Fresh Tweet : Un modèle Blogger inspiré de Twitter

Démonstration en ligne  |  Télécharger

Fresh Tweet est un modèle deux colones pour Blogger. Inspiré du design de Twitter, ce modèle a été conçu pour Wordpress par Hyder Jaffari de weborithm. C'est avec sa bénédiction que je vous en propose la version adaptée pour Blogger.

1. Comment installer

Extraire le modèle Blogger du fichier freshtweet.zip

Après vous être connecté, allez sur > Modifier le code HTML> Parcourir > Choisissez le fichier - fresh-tweet-blogger-template.xml > Transférer > Enregistrer le modèle


2. Barre de menu

Pour modifier la barre de menu, après vous être connecté à votre compte, allez sur "Mise en page", "Modifier le code html" et trouvez la partie suivante :

<ul>
                <li><a href=' '>Socialize</a></li>
                <li><a href=' '>About</a></li>
                <li><a href=' '>Contact</a></li>
                <li><a href='' title='Subscribe to RSS feed'>RSS <img alt='RSS' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkL1VgHllfu6SySKrg9h7sSzWqoG6HnVLU2yf8Bj9_hPy6XHsZelsAjltAakYzDTg1VXX343lMDMvwP_E_NVkoPu9ojmPjnECMxmk4LYSL9B3ldLAY5HxIoX4zA0kpYOKpRGgoYfUEHs5h/s1600/rssicon.png' width='16'/></a></li>
            </ul>

Mettez les urls aux endroit approrié (entre les ' ', juste après href=)et changez les titres de liens en anglais par leurs correspondants en français (à moins que vous ne mettiez quelque chose qui convient le mieux avec votre blog).

3. Lien Rss à la fin de chaque article

Pour éditer le lien "Rss" à la fin de chaque article, toujours quand vous êtes sur "Modifier le code html", cochez sur la case "développer des modèles de gadget" et trouvez le code suivant :

<a href=' ' title='Subscribe to my blog RSS feed'>RSS</a>

remplacez-le par :

<a href=' ' title='Souscrivez au flux rss de ce blog'>Flux RSS</a>

Ajoutez le lien de votre flux rss à l'endroit approprié et enregistrez votre modèle.

Enjoy!

Lire la suite

dNoteBook - Modèle Blogger 2 colonnes

Je viens d'ajouter le modèle dNoteBook (2 colonnes) à la collection des modèles Wordpress que j'ai personnellement adapté pour Blogger.

Démonstration en ligne | Télécharger

Comme vous pouvez le constater à partir de ce screenshot, dNotebook fera revenir votre blog dans sa première définition, celle d'un journal personnel, tout en y ajoutant un ton de modernisme (bas de page 3 colonnes, Pub 125x125).

Voici quelques instructions pour parfaitement réussir l'installation de ce modèle.

1. Comment faire pour installer?


Extraire le modèle Blogger du fichier dnotebook.zip

Après vous être connecté, allez sur > Modifier le code HTML> Parcourir > Choisissez le fichier - dNoteBook-blogger-template.xml > Transférer > Enregistrer le modèle


2. Date

Après vous être connecté, allez sur Paramètres > Mise en forme> Modifier Blog Posts> changer le format de date et heure par quelque chose comme : mardi, janvier 12, 2010. Rappelez-vous, changez le format de date et heure, pas les autres formats (Format des en-têtes de date et Format de date de l'index des archives à ne pas changer).

3. Menu 

Après vous être connecté, allez sur sur > Modifier le code HTML et trouvez ces lignes de code :
<ul id='dropmenu'>
<li><a href='' title='Home'>Home</a></li>
<li><a href='' title='About'>About</a></li>
<li><a href='' title='Original'>Original</a></li>
<li><a href='' title='Contact'>Contact</a></li>
            <li> </li></ul>

Mettez les urls et les nom des liens aux  indiqués pour cela.

4. Description du blog

Trouvez le code suivant :


<title><data:blog.pageTitle/> | Here goes my blog description</title>

Changez "Here goes my blog description" par la description de votre blog.

5. Logo

Trouvez ce code

<div class='logo'><a expr:href='data:blog.homepageUrl'><img alt='' border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgIMlXMX-EPYRVo4aVzmlJKP_qcEw9k8ZKiNVidRM68BJrxnJwwu8Lg0UScMb1y7BNmkpnQCVKhpWSL1YCckvcxLL3RTHC0IUKC5_NOtHxb9uvfI9hN0r8sR0I_OBtbfN9Q5EPiXp19Ph/s1600/logo2.png' title='Home' width='300'/>
</a>

Remplacez l'url du logo en place par celui de votre logo. Notez qu'il existe un modèle jpg et un modèle psd du logo dans le fichierr zip. Vous pouvez les utiliser pour adapter le logo de votre blog.

6. Twitter et flux 

Trouvez ce code :


<span style='margin-left:110px;'><a href='http://www.twitter.com/rodval4ever' target='_blank'><img alt='Follow me on Twitter' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GEI989W4jdaynRA9qR9vvAy3FQU1cW8FDyQzRGSRZEdeC__yFNwmE-P1kgiHATzH81GgCIcoCq-PFC6GO0n52CoCypX_5Q_iHwRpsxyI7C1W9tkzlx_IxZ1Jxq-Xp0LyKS8wyoHpDnwe/s1600/twitter.png' title='Follow me on Twitter' width='80'/>
</a> <a href='http://feeds.feedburner.com/BloggerMastering'><img alt=' FEED' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJK2-oCiZFoMFAIHu6WjxpFXu9YCkr6yXLk6gCNFW-kiCGdGaBPL6wjNcwlPhqe45PVvn5DoBMkGnLmXN2mJ7jkVkKZhWLV0Wu4JaILs66Lc1Cr8McDRZYUJ7xXI7Ur4Twuyl7761mX89/s1600/rss.png' title=' FEED' width='80'/>
</a></span>

Remplacez les deux urls en gras. Le premier par votre url Twitter et le deuxième par celui du flux rss de votre blog.

Il existe aussi une image pour le formulaire de recherche, sauf qu'elle bug sur Google Chrome. Toutefois, si vous désirez l'ajouter, il suffit de mettre le code suivant juste avant </div><!-- End logo -->

 <span style='margin-left: 120px;'><img alt='search' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUWxkgQ7sFxYc_1hMv7ulr8Hofb1LWmOXpbXG7tgAXnJod9DWeZmRYkFcqrNjuUg2XT-srmSHAw-TgHG-9U0Uu0E8NgP-VYKfUrnDE2PL_PQ0VQEnOYkDdWVSju-4j6pfRFMng1SUtI3T/s1600/sicon.png' title='search' width='80'/></span>



7. Bas de page à 3 colonnes
 
Le code du bas de page à 3 colonnes que vous devez modifier est celui-ci :


<div id='footer-box1'>
<h2>Column 1</h2><hr/>
<ul>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>

</ul>
</div>


<div id='footer-box2'>
<h2>Column2</h2><hr/>
<ul>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>  
</ul>
</div>


<div id='footer-box3'>
<h2>Column 3</h2><hr/>
<ul>

<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>               
</ul>
</div>


Alors, qui est preneur ?

Lire la suite

Colourise blogger template : Parce que je ne peux laisser tomber mon avatar

Pas de panique, je ne vais pas me mettre à faire la critique des films ici:. Critiquer avatar ici, pourquoi ? Feufol l'a déjà fait et chez Cineblogywood le film de Cameron a presque lancé une révolution orthographique dans laquelle même Gustave Flaubert refuserait de s'engager. Alors, avec mes fautes d'orthographes, s'il faut que je me mette à écrire des critiques pour avoir ce genre des commentaires, je dis non, merci. Surtout pas pour un film qui rappelle un très bon classique comme Pocahontas 1 de Walt Disney (hihi, ça c'est un dessin animé).

Cet article, ce juste pour présenter Colourise, un modèle wordpress que j'ai passé la journée à convertir pour Blogger avant de découvrir que c'était déjà fait, et il y a même plus d'une année de cela. La prochaine fois je n'oublierais pas de gooogler d'abord le modèle que je veux adapter avant de me mettre à la tâche.

 Démonstration en ligne | Téléchargement

Je me suis donc dis que si Cameron n'avait pas abandonné son film dont le scénario est classique parce qu'il croyait y mettre un peu de sa magie, alors pourquoi allais-je jeter à la poubelle cette oeuvre que certains ici ne connaissent pas et pourraient même être intéresser d'avoir ? Surtout que l'ancienne composition de ce modèle pour Blogger comporte des images de fond qui ne s'affichent plus vu qu'elles étaient hébergées sur Photobucket. Et puis, j'ai pu adapter certains éléments que celui qui m'avait précédé n'avait pas fait.

Bon trève de barvadage, le modèle Colourise pour Blogger est encore là. Donc, si ça vous intéresse, vous savez où l'avoir.

@+

Lire la suite

SpringLoaded : un modèle deux colonnes pour Blogger

Je ne sais pas si j'ai eu un millier des potions magiques comme Asterix, mais je me sens d'humeur à convertir de thèmes wordpress pour Blogger. Aujourd'hui, je vous propose SpringLoaded  conçu par the449.

 Démonstration en ligne | Télécharger

C'est un modèle vert avec deux colonnes qui est prêt à récevoir vos widgets, configuré pour afficher les avatars des commentateurs, etc.. C'est un design simple mais efficace, avec des coins arrondis et les onglets intéressants pour la date des articles.

1. Comment faire pour installer?


Extraire le modèle Blogger du fichier springloaded.zip


Après vous être connecté, allez sur > Modifier le code HTML> Parcourir > Choisissez le fichier - springloaded-blogger-template.xml > Transférer > Enregistrer le modèle


2. Date

Après vous être connecté, allez sur Paramètres > Mise en forme> Modifier Blog Posts> changer le format de date et heure par quelque chose comme : mardi, janvier 12, 2010. Rappelez-vous, changez le format de date et heure, pas les autres formats (Format des en-têtes de date et Format de date de l'index des archives à ne pas changer).


3. Menu 


Après vous être connecté, allez sur sur > Modifier le code HTML et trouvez ces lignes de code :


<ul id='navigation'>
    <li class='page_item '><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li class='page_item page-item-2'><a href=' ' title='About Springloaded'>About Springloaded</a></li>
<li class='page_item page-item-3'><a href='http://449.com' title='about 449'>About 449</a></li>
</ul>


Changez les textes et les liens qui s'y trouvent.

Pour ajouter des liens à votre menu, mettez le genre de lignes suivantes juste avant </ul>

<li class='page_item page-item-4'><a href='' title=''>Link text</a></li>
<li class='page_item page-item-5'><a href='' title=''>Link text</a></li>
<li class='page_item page-item-6'><a href='' title=''>Link text</a></li>

Régalez-vous !

Lire la suite

ComicPress : Un nouveau modèle 3 colonnes pour Blogger

Démonstration en ligne | Télécharger

Mesdames et messieurs, je suis heureux de vous présenter le premier modèle que je met à la disposition des utilisateurs de Blogger, à savoir ComicPress V.


ComicPress V2.8 est un thème wordpress 3 colonnes avec une largeur fixe, conçu par  Tyler Martin, John Bintz and Philip M. Hofer. Il est très simple à installer. Vous allez aimer ce design Chic, mais neutre, pour sa simplicité et son efficacité.

Voici quelques unes de ses caractéristiques (Les instructions pour installer un modèle sont à la réponse n°2 de cette page).

CARACTÉRISTIQUES:

-  3 colonnes
-  Titre et description

  Pour changer le titre et la description, allez à modifier le code html et trouvez ce code

<div id='header'>
<h1><a href=' http://comicpress-blogger-template.blogspot.com/ '> ComicPress 2.8 for Blogger Demo </a></h1>
<div class='description'> Vertical 3-Column Layout for Blogger </div>
<div class='clear'/>
</div>

Remplacez ComicPress 2.8 for Blogger Demo par le titre de votre blog et remplacez Vertical 3-Column Layout for Blogger par la description de votre blog.

Remplacer aussi http://comicpress-blogger-template.blogspot.com/ par le lien de votre blog.

Barre de menu 

Pour changer les mots et les liens  sur la barre de menu, allez sur "modifier le code html" et trouvez ce code (celui en gras est pour le bouton avec une petite flèche au coin droit) :

<div id='menunav'>
                                                        <div class='menunav-prev'>
                    <a href='http://souvenirs-de-prison.blogspot.com/'/>                    </div>
                                </div>
        <ul id='menu'>
        <li class='page_item page-item-home current_page_item'><a href='http://comicpress-blogger-template.blogspot.com/'>Home</a></li>
        <li class='page_item page-item-2'><a href='http://blogger-mastering.blogspot.com/2010/01/comicpress-v28-blogger-template-3.html' title='About'>About</a></li>
<li class='page_item page-item-3'><a href='http://comicpress.org/demo-v3c/about/' title='Original ComicPress'>Original</a></li>
        </ul>
    <div class='clear'/>
</div> 





-  Numérotation des Pages

Pour changer ce paramètre en fonction de votre blog, allez à modifier le code html et trouvez les lignes suivantes (à la fin de la page):

var postperpage=2;
var numshowpage=4;

Postperpage :  Combien d'articles à afficher par page de votre blog
numshowpage : Combien des chiffres seront afficher sur la numérotation des pages

- Archives en forme de calendrier (Merci à Phydeayx3) : Notez que vous pouvez ajouter un autre widget archives

Voici la configuration à mettre pour la date de votre widget, en allant sur "Mise en page" puis en cliquant sur "modifier" pour le widget archive (le premier de la colonne gauche)







Le titre peut du widget peut être n'importe lequel, mais il faut respecter le format ci-dessus : cochez le deuxième point de la première ligne et le premier point de la troisième ligne. Mettre la date au format "janvier 2010".

Enregistrez les modifications et allez voir sur votre blog si tout est correct. Le calendrier devrait être opérationnel.

Modifier le diaporama ...


Il vous faut d'abord préparer vos images qui doivent avoir 510px de largeur et 340px de longueur. Ensuite, rendez vous sur "Mise en page" et cliquez sur "modifier" pour le premier widget (html/javascript) de la colonne centrale (celui au dessus de message de blog).

 


<div id='myGallery'>


<!-- First Picture Start -->


<div class='imageElement'>


<h3>Titre 1 </h3>


<p/>


<a class='open' href='LIEN 1 '/>


<img alt='Valentine And Moi' class='full' src='URL DE L'IMAGE 1 '/>


</div>


<!-- First Picture End -->


<!-- Second Picture Start -->


<div class='imageElement'>


<h3>Titre 2 </h3>


<p/>


<a class='open' href='LIEN 2 '/>


<img alt='Valentine And Me' class='full' src='URL DE L'IMAGE 2 '/>


</div>


<!-- Second Picture End -->


<!-- Third Picture Start -->


<div class='imageElement'>


<h3>Titre 3 </h3>


<p/>


<a class='open' href='LIEN 3 '/>


<img alt='Valentine And Me' class='full' src='URL DE L'IMAGE 3 '/>


</div>


<!-- Third Picture End -->



</div>


Enregistrez les modifications et allez admirer le résultat. Notez que ce widget ne s'affichera que sur la page d'accueil.

Maintenant, votre modèle ComicPress est installé avec succès!

Lire la suite

Modele Blogs officiel de Blogger

J'avais demandé à Zaarko de me dire comment il avait pu avoir un modèle genre blog officiel de Blogger pour son blog Devenir rédacteur. C'est avec gentilesse qu'il m'avait fournis cette adresse où vous pouvez récuper le modèle si ça vous tente.

Modèle Blog officiel blogger

Lire la suite

Modèle Google Chrome pour Blogger

Depuis le lancement du navigateur Google Chrome, les développeurs ne cessent d'inventer des choses qui vont avec ou qui lui ressemble.

C'est ainsi que chez Zonachrome, ils ont eu l'idée de convertir le modèle Google chrome confectionné par Ericulous pour wordpress.

Voir ce modèle en live

Télécharger le modèle

Pour changer les liens de navigation au dessus, se connecter sur son compte, aller sur "mise en page" puis sur "modifier le code html". Trouver le code du genre :
<li class="last"><a href="#">Edit</a></li>

Mettre l'url à la place de # et le nom du lien à la place d'Edit.

Un preneur ?

Lire la suite

Les variables dans un modèle Blogger

Ceci est la quatrième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut-être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

L’un des avantages de modèle pour le nouveau Blogger est l’utilisation des variables (bien qu’elles ne sont limitées qu’aux polices et aux couleurs).

Comme expliqué au premier article de cette série :

Notez

<style type="text/css">
<!-quelques styles css ici -->
</style>

est remplacé par :

<b:skin><![CDATA[/*
*/
<!-quelques styles css ici -->
]]></b:skin>

Les variables sont insérées entre les balises de commentaire /* */, comme ceci :

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="" description="" type="" default="" value="">

*/
<!-Quelques styles css ici -->
]]></b:skin>

Comme vous pouvez le constater, la variable a quelques attributs obligatoires :

name (nom): Un identifiant technique unique;

description: ladescription du nom (name) - comme elle apparaîtra sur la page de modification des Couleurs ;

type: 'color (couleur)' ou 'font (police)' - rien de plus, hélas!;

default: the default value : valeur par défaut, peut être le nom d’une couleur (ou son code hexadecimal ) ou encore la valeur de la police (style de la police, taille de la police, etc. = font-style font-weight font-size font-family).
;

value: nouvelle valeur - peut rester vide;

Voici deux exemples (pour chaque type):

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="textcolor" description="Couleur du texte"
type="color" default="#ccc" value="#cccccc">

<Variable name="bodyfont" description="Police du contenu"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">

*/
<!-- Quelques styles css ici -->
]]></b:skin>

Il faut noter que :

Pour chaque police ou couleur, vous pouvez utiliser des variables prédéfinis dans votre code CSS

Voici deux exemples (pour chaque type):

A la place de

body {
color: #CCC;
font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
}

on peut écrire

body {
color: $textcolor;
font: $bodyfont;
}

Ainsi vous pouvez définir des couleurs séparées pour les couleurs des polices (fonts), liens (links), fond (backgrounds), bordures (borders), et cetera ... et différencier la police pour les articles, les commentaires, les liens, les colonnes latérales, l’entête, et cetera.

Ainsi, vous n’aurez plus à aller toucher au code html de votre blog pour changer une couleur ou une police. Vous pouvez tout contrôler en allant sur Mise en page, puis «police et couleur » à partir de votre tableau de bord.

Vous aurez compris que dans un modèle blogger, la grande partie se joue dans le code css (pour définir l’habillement, la disposition des chaque partie, etc.). Il ne vous reste plus qu’à chercher un bon tuto sur le csss pour approfondir vos connaissance sur la question.

Vous pouvez voter pour cet article sur : Scoopeo !TapemoiBlogastyWikioDiggons

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Lire la suite

Les caractéristiques d'un bon desing

Source de l'image Auroras

PelOmar, un de plus vieux lecteurs de ce blog, m’avait affirmé qu’à son avis il manque à celui-ci un bon design (cela bien avant que je ne prennen ce modèle). Bien que je ne sois pas d’accord avec lui sur certains points, je m’étais mis en tête de chercher un bon design (j'ai crois que celui-ci est bon)  et de savoir en quoi consistait un bon design.

Un coup d’œil sur mon dico Anglais-français m’apprendra que le premier sens du mot design est « dessein, intention ». Le design d’un blog doit donc poursuivre un dessein, avoir un but, une intention me suis-je dis.

Et voilà que je suis tombé sur un article de Pro Blog Design qui relève les 4 aspects qu’un design devrait prendre en compte pour être considéré comme bon, parmi lesquels nous avons :

1. Atteindre les objectifs de blog : Quel est le but de votre blog ? Qu’attendez-vous de vos visiteurs ?

2. Atteindre les objectifs de vos visiteurs : Quels sont les objectifs de ceux qui visitent votre blog ? Que cherchent-ils à faire ?

3. Souvenir : Quel est l’impression laissé par le blog ? Un design n’est pas important seulement quand le visiteur est sur le blog, mais aussi quand il le quitte.

4. Distinction et première impression : Votre design vous différencie-t-il des autres blogs abordant la même thématique ? Quand un visiteur débarque pour la première fois sur votre blog, qu’en dit-il ?. Le design lui donne-t-il envie de lire ?

Espérons qu’après avoir répondu à ces questions, le tripotage de votre modèle, qui vous prend je ne sais combien d’heures, deviendras plus réfléchi.

Si le billet vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Lire la suite

Les 50 plus beaux modèles pour Blogger ?

J'étais encore dans l'une de mes nombreuses investigations sur le net pour en apprendre un peu plus sur Blogger, quand je suis tombé sur cet article de Mashable reprennant 50 modèles pour Blogger, considérés comme les plus beaux.

Il y en a pour toutes les sauces : modèles 2 colonnes, 3 colonnes et même 4 colonnes. De quoi vous demander s'il ne faut peut être pas mieux mettre un nouveau modèle sur le blog afin de le rajeunir. Et puis conseil d'amis, ne gardez pas l'un des 16 modèles proposés par Blogger. Pourquoi votre blog doit-il ressembler à celui de tous le monde ?


Au dessus de l'image de chaque modèle, il y a son nom (avec lien vers la page où le télecharger) ainsi qu'un petit commentaire de l'auteur de l'article.


Bon, je vous laisse aller jeter un coup d'oeil et peut être que l'un de ces 50 modèles Blogger sera bientôt le votre ?

Et vous pouvez voir les 100 modèles Blogger pour 2012.

Au fait, j'ai moi aussi conçu des modèles pour Blogger. Allez y jeter un coup d'oeil.

Lire la suite

Des modèles changeants

Voici pour vous une liste des modèles avec des fonctionnalités particulièrement intéressantes. Il y a en effet moyen de changer en un click soit l'emplacement de la colonne latérale pour certains ou la couleur du blog (en un clic). Tous ces modèles ont été confectionné par Purple Moggy.

Vous pouvez le constater en cliquant sur le lien après demo pour chaque modèle fournit. Sur la page où vous serez redirigé, cliquez sur le lien ou le bouton après "THEME OPTIONS", vous vous rendrez compte de quoi je parle.

Vous avez 12 modèles que vous pouvez télécharger (cliquez sur enregistrer sous sur le lien après xml file). Purple Moggy, l'auteur de ces merveilles, recommande d'enregistrer à deux fois le modèle, car il semble que la première fois, seulement une partie est enregistrée. Il n'a pas encore trouvé pourquoi.

J'espère que dans les jours qui viendront, je vous apprendrais sa méthode pour arriver à cette fin. En attendant, régalez-vous.

1) Minima Stretch
Demo:
--minima-stretch-switch.blogspot.com
CSS files:
--minima_stretch_demo.css
--minima_lefty_stretch_demo.css
XML file:
--minima_stretch_demo.xml

2) Minima
Demo:
--minima-switch.blogspot.com
CSS files:
--minima_demo.css
--minima_dark_demo.css
--minima_blue_demo.css
--minima_ochre_demo.css
--minima_lefty_demo.css
XML file:
--minima_demo.xml

3) Stretch Denim
Demo:
--stretch-denim-switch.blogspot.com
CSS files:
--stretch_denim_demo.css
--stretch_denim_light_demo.css
XML file:
--stretch_denim_demo.xml

4) Denim
Demo:
--denim-switch.blogspot.com
CSS files:
--denim_demo.css
--washed_denim_demo.css
XML file:
--denim_demo.xml

5) Rounders
Demo:
--rounders-switch.blogspot.com
CSS files:
--rounders_demo.css
--rounders2_demo.css
--rounders3_demo.css
--rounders4_demo.css
XML file:
--rounders_demo.xml

6) Herbert Jellyfish
Demo:
--herbert-jellyfish-switch.blogspot.com
CSS files:
--herbert_demo.css
--jellyfish_demo.css
XML file:
--herbert_jellyfish_demo.xml

7) No. 897 & 565
Demo:
--no-switch.blogspot.com
CSS files:
--no_897_demo.css
--no_565_demo.css
XML file:
--no_demo.xml

8) Thisaway
Demo:
--thisaway-switch.blogspot.com
CSS files:
--thisaway_demo.css
--thisaway_blue_demo.css
--thisaway_green_demo.css
--thisaway_rose_demo.css
XML file:
--thisaway_demo.xml

9) Snapshot
Demo:
--snapshot-switch.blogspot.com
CSS files:
--snapshot_demo.css
--snapshot_sable_demo.css
--snapshot_tequila_demo.css
XML file:
--snapshot_demo.xml

10) Moto
Demo:
--moto-switch.blogspot.com
CSS files:
--son_fo_moto_demo.css
--mr_moto_demo.css
--ms_moto_demo.css
XML file:
--moto_demo.xml

11) TicTac
Demo:
--tictac-switch.blogspot.com
CSS files:
--tictac_demo.css
--tictac_blue_demo.css
XML file:
--tictac_demo.xml

12) Dots
Demo:
--dots-switch.blogspot.com
CSS files:
--dots_demo.css
--dots_dark_demo.css
XML file:
--dots_demo.xml

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Lire la suite

Modèles thématiques

Il faut avouer que ces jours-ci, je suis vraiement pris entre deux marteaux et deux enclumes. Je dois finaliser mon travail de fin de cycle ainsi que mon rapport de stage et chercher à payer les frais relatifs à leurs dépôts. Donc, ne me tenais pas trop rigueur de ne pas publier au même rythme que le mois passé.

Pour ne pas trop vous laisser, au risque de croire que le blog est mort, voici une petite liste des sites où vous trouverez des modèles thématiques pour votre blog. Plusieurs thème sont servis : le cartoon, les femmes, l'art, l'architecture, les animaux. Bon régalez vous, on se revoit dès que j'ai le temps.

1. Final sense

2. Isnaini

3. Pyzam

4. Blogger template

5. Cool template

6. Free blogger template

7. Free blogspot template

8. Free blogger templates

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Et n'oubliez pas de donner un point de plus à cet article en cliquant sur le petit bouton rouge .

Lire la suite

Un annuaire perso pour vos blogs

Hé oui, ça vous direz d'avoir un annuaire perso pour vos blogs hébergés par Blogger ? Hoctro a crée depuis quelques mois un modèle excepetionnel pour former un annuaire sur Blogger. Vous avez la possibilité d'y mettre vos blogs ou les blogs que vous avez aimé. Sous les titres des blos apparaîtront les derniers articles publiés.

Je viens juste de créer un annuaire pour mes blogs, vous pouvez voir le résultat ici (à améliorer dans les jours qui suivent).

Pour avoir votre propre annuaire :

1.Téléchargez le modèle ici.

2. Créez un nouveau blog

3. Dans votre nouveau blog, allez sur "Modèle", puis sur "Modifier le code html".

4. Téléchargez le modèle que vous avez enregistré dans votre ordi.

5. Quand le nouveau modèle est accepté, sélectionnez "développer des modèles de gadget"

6. Recherchez les codes suivants :

var blog1 = "uncertainblog.blogspot.com";var tabView1 = new YAHOO.widget.TabView('multiTab1');var labels1 = ['JSON Hacks','Free Templates'];function listTab1(json) {listOneTab(json, tabView1, "", false);}function listLatestPostsTab1(json) {listOneTab(json, tabView1, "Latest Posts", true);}function listLatestCommentsTab1(json) {listOneTab(json, tabView1, "Latest Comments", false);}
// Activating calls!
// Latest Postscb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');
// Latest Commentscb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');
// Preferred Labelsfor (var i=0; i < labels1.length; i++)if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

7. Changez le nom du blog en rouge après var blog 1 par le votre. Vous en ferez de même pour toutes les autres balises "var blog (2, 3, 4, 5, 6, 7, 8, 9...).

8. Recherchez les codes suivants :

<tr>
<td width='50%'>
<h2>Le nom de Votre Blog ici</h2>
</td>
<td width='50%'>
<h2>Le nom de votre blog ici</h2>
</td>
</tr>
<tr>
<td width='50%'>
<div class='yui-navset' id='multiTab3'/>
</td>
<td width='50%'>
<div class='yui-navset' id='multiTab4'/>
</td>
</tr>

9. Mettez le nom de votre blog aux endroits indiqués. N.B. : opération à répeter à tous les endroits où vous devrait changer de nom de blog.

10. Allez voir le résultat. Si certaines titres ne correspondent pas au nom du blog, vous saurez ce qu'il faut changer.

N.B. : Les étapes précendentes décrivent l'essentiel. Il y a d'autres modifications à effectuer, je vous tiendrais au courant avec le temps.

Bonne chance.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog.

Sentez-vous libre de laisser un commentaire.

Merci d'être passé.

Lire la suite

Un modèle révolutionnaire pour Blogger : Neo

Dernièrement, j'avais visité un blog qui m'avait fasciné. A chaque fois que je cliquais pour lire un autre article, celui-ci apparaissait instantanément sur le bloc des messages, sans que les autres parties du blog ne soient téléchargées. Le comble, c'est que c'était un blog hébergé par Blogger.

Après plusieurs recherches, j'ai enfin pu trouver comment en avoir pour son blog.

Le modèle est dénommé Neo et a les particularités suivantes :

1. La navigation dans le blog est plus rapide car seul les billets s'affichent instantanément dans leur bloc, sans que les autres parties du blog ne soient téléchargés.

2. Les commentaires les plus récents sont affichés en première position. Ils sont aussi répartis en page, chacune affichant 10 commentaires.

Vous pouvez voir une démonstration du modèle ici.

Vous pouvez voir les différentes adaptation faites à ce modèle par certaines blogguer ici.

Pour télécharger ce modèle cliquez ici (clic droit et enregistrez sous)

Parmi les défauts, il y a le fait que ce modèle ne convient pas à ceux qui veulent afficher la publicité (google adsense, etc.) sur leurs blogs, car le nombre d'impression de pages est fortement réduit.

Si vous voulez savoir comment mieux adapter le modèle à votre goût et connaître les autres limitations (défauts), voyez ici (en anglais).

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog.

Sentez-vous libre de laisser un commentaire.

Merci d'être passé.

Lire la suite