Avez-vous envie de changer la couleur du texte et du fond des écrits qui sont sélectionnés sur votre blog ? Voici pour vous une petite astuce pour arriver à cette fin.
1. Connectez-vous à votre compte Blogger. Allez sur Modèle, puis cliquez sur "Modifier le code HTML"
2. Trouvez la balise suivante ]]></b:skin>
3. Mettez la ligne css suivante juste avant la balise trouvée à l'étape précédente
::selection {color: white;background-color: red;}::-moz-selection {color: white;
background-color: red;}
Avec ce code, lors de la sélection d'un texte sur votre blog, on aura un texte blanc sur un fond rouge. Vous pouvez changez ces couleurs en changeant les deux "white" (blanc) pour les textes et les deux red (rouge) pour le fond.
4. Enregistrez votre modèle et admirez le résultat sur n'importe quel article de votre blog.
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 == "http://yourblog.blogpost.com/about.html"'>
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 == "http://yourblog.blogpost.com/contact.html"'>
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/AVvXsEjw1pJ98cckGl-3nNKmbPJ_Vt7887LKKLQf-fgB409UMsG4TfmU5p02YUZbXwHb7BcYKYW6mHjwGSh8YliNCQMYN7z_Ul5TCVQDHUC87diVcTnCu0apXoJbTLoiqUExY-5rgFsNbBXJLRUe/s1600/person.png'/>
Mettez l'url de votre photo (ou avatar) à la place de https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1pJ98cckGl-3nNKmbPJ_Vt7887LKKLQf-fgB409UMsG4TfmU5p02YUZbXwHb7BcYKYW6mHjwGSh8YliNCQMYN7z_Ul5TCVQDHUC87diVcTnCu0apXoJbTLoiqUExY-5rgFsNbBXJLRUe/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/AVvXsEjJhyphenhyphenDSTyahIu88j0qkcQQWcDqnjRnNAkVQ94mRuQJesRJ1CU340GzdsMHnxjhePzjU9oKMdRDnJ_ED2Exgavchh6YqZeHEGpxd8RePwZLw16PTKE_xZofh3NUjmPL6ZSio9GIOEbRpq5_l/s1600/i_twitter.png'/> <strong>Twitter</strong>twitter.com</a></li>
<li><a href=' '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUNPLFIgHAIbXHB6hgZbxl5rPyxrK9KZpYwgxau93PfUfL3ozcVVUE-JSN2-xnZxNWIhkuZeLGSq35F77VVsex-wwsi_4KG3IxIq-rR5beb0ZNVyAjIUfiUnGZ0DkBEMdoG5_KN4FQBRZ/s1600/i_facebook.png'/><strong>Face Book</strong>facebook.com</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWaXmIFyZAhyDAGzT3h6CO4ewjReMNSkOyMdlT1HN5-sr-sb6ZTLZQV9tRoEwMgDGFyG7Uwpx-cf0x0EUl3x1gP91dqB8WB2-_0BMAzs71Mbt6emCTJhcEdu0L2Af_lMPa2W9zBD9QHTX/s1600/i_stumbleupon.png'/> <strong>Stumbleupon</strong>stumbleupon</a></li>
<li><a href=' '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvz6S5Xenxfrod2Xeb7K9Iyp6vctYH3ih36Vh7yxEL9nA4wUbln0hI6C9c21o8A87XFc2GMQIR72yXykp7_5Bo8O19FxVqJuU0BLxIYqd8rOG91WHOqgc-hEQVwsJQvpGLiOrNt-XQtgL/s1600/i_delicious.png'/> <strong>Delicious</strong>delicious.com</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0O5Dqxo02W1KTY9H-KmcWfEq7m7-zdKATViL6YURPcCijnMZpFuAXdJ05ZHzMx7UiTFW77jPDQONJvQjbofQHxTYcekrVLRG8TV0wIK-IYjbHxqucYGuCT9KU_XJ0kt3DU9CMtzw5ghzw/s1600/i_digg.png'/> <strong>Digg</strong>digg.com</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwO3euJeshMEhDEParDLGTZh_xFATgazWvCz6yd7Eo7x3gUqf7jwQo_03keXWs4fQIQ9Z5yt30ncm01_9r1x93Ox4-XQno9nL8sjxBsSZdcvo9pTe5oClCCDIzczIIVrBdaJSGSqGVPNv/s1600/i_flickr.png'/> <strong>Flickr</strong>flickr.com</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLXgFoxEGAY0hOSUmB9FvFBAzWd5Gj6IiDjw4_c3k6ljtDRzJ9SuS3TPbIVVpERZ8D-W8j2FSgw6NL2Lr-JILI7bH-ZSXkjJ74MyL394enVR5GFslgzbdYnQ0yKSawQ0xXO7Abh5SxtRhO/s1600/i_lastfm.png'/> <strong>Last.fm</strong>last.fm</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNoCL7RVYjb2b8U-QRNGYPJ-S2Uepfeuxb2wVNrLCLtZNQD0Iw-FdSarTQvM5uEQvpfq33XckInTvtqkDv8Ug6fkkjGGyDgCYxO1Lz9CwPTrvMvPDuJLc9HMp5DK3cflHE8TYJiGc4nrrb/s1600/i_myspace.png'/><strong>My Space</strong>myspace.com</a></li>
<li><a href=''><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4B9muMZTzfH48ZG0DKWm_tVYTWuqPHcu9KgYKm5QohPiuDO1nWDZ1SeulmExG0dgnZpp6HCZ8lVGL8-zZ5AapD80okgJ7KDVOStMRTs_5jPYJXX5VRHuf85J-7oD5bKNu_r_iVn4j8Z8Y/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 ?
Je viens d'ajouter le modèle dNoteBook (2 colonnes) à la collection des modèles Wordpress que j'ai personnellement adapté pour Blogger.
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/AVvXsEh5fAo_MvENhruGx_kTsZRZLxDIp-litJQjibHgvNC3xDYdwpzURXsiWNKVqz4ibFXakg2UrYnxyFXFlc9KIYUPKvADiqhtPyXpGe0J4LlZ7UHrH7aetLpFSqj-wV_waBZcydZxdOQGzgDH/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/AVvXsEizpsbrcZWOluIo3OAM4hPjdPuokH-eUTYv-cy4jOhV_LUjFJWO0kUiQP4PlxxPJ6gxwMbqhto_X6aoEQuUG7JXtFtCsJXuZrG93CfkxRusyeqrN5azR-wjBa4bMZdnZpD5EI5AmaLY3Fq1/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/AVvXsEhwXZ7JYnju1Vq0ReTtp4jVRjdv-gXFzDfA5gY5tvpigpe5BQUl9OX50FW_dWmniIKHVSdu1slfeO2P3Ac-4wgVFH2L99JHLGSj7AucwvBsQwjdiPnpHtxqMUDedHsYD4xwa_7-1aot0fE-/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/AVvXsEhWaE9FhltOH5ozyM_9c8xZu9X1pZaBV1OLF0s9SbpWPdZfk57z5IzTMHqD-6H7_qpWd0N8f2lBIBbF3Pz5zTm-JNLbZ708a-XEVR8U_1CXxk-OlG8QowR3JI5tDV9MYUYB8pWlMikHYT3P/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 ?
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.
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.
@+
Aujourd'hui, je vous propose SpringLoaded conçu par the449.
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 !
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 !