image de fond outil de creation de modeles

obtenir ces boutons

Ajouter sur n'importe quel blog
un décor disponible avec
l' "outil de création de modèles" de Blogger

Les nouveaux template (modèles : disponibles depuis 2010) de Blogger sont plus lents, ne sont pas compatibles avec de nombreux gadgets et leur code est difficilement modifiable.

Si l'esthétique de ces blogs séduit, il vaut mieux utiliser un blog existant et lui donner, comme pour cette page, l'aspect d'un blog créé avec l' "outil de création de modèles".

template modernisé à 2 colonnes pour bloggertemplate modernisé à 2 colonnes pour blogger

Les 2 blogs ci-dessus sont également réalisés de cette manière : cliquer ici.

* * * * *
On peut d'abord ajouter sur n'importe quel blog les images de fond disponibles avec l' "outil de création de modèles" de Blogger.

Exemple : ajouter ce code dans le template (modèle) d'un blog existant (juste après "body { " ou à la place du code d'une autre image) va ajouter une image de fond disponible avec l' "outil de création de modèles" de Blogger:

background: url(http://themes.googleusercontent.com/image?id=1Chj_ye7BsJe4QabnXKJQuhK_LeNly4bySlgKgmDjAgChHUvZW1v1C0LKoAFBqdYE6g6L) top left no-repeat fixed;

On peut supprimer "left" ou le remplacer par "right" ou "center" pour déplacer l'image horizontalement. On peut supprimer "top" ou le remplacer par "bottom" pour déplacer l'image verticalement. L' "outil de création de modèles" de Blogger ne prévoit pas ces options. "fixed" oblige l'image à rester immobile et à ne pas défiler vers le haut avec les messages.

* * * * *
On peut mettre ces instructions dans un gadget HTML/JavaScript (cela évite de modifier le "template" ou "modèle") ou, s'il n'y a qu'un message par page, dans le code HTML d'un message (l'image de fond ne s'affichant dans ce cas que pour un seul message COMME SUR CETTE PAGE : on peut ainsi avoir une image de fond différente par page ; penser aussi à changer la couleur des titres du blog et des gadgets).

Pour mettre ces instructions dans un gadget HTML/JavaScript ou dans le code HTML d'un message, il faut entourer le code par des instructions complémentaires et encoder :
<style type="text/css">body {background: url(http://themes.googleusercontent.com/image?id=1Chj_ye7BsJe4QabnXKJQuhK_LeNly4bySlgKgmDjAgChHUvZW1v1C0LKoAFBqdYE6g6L) top left no-repeat fixed;}</style>.
* * * * *
Sur ce site, un fond blanc semi-transparent a été ajouté derrière la colonne latérale gauche comme sur les nouveaux template de Blogger.

Pour ajouter un fond semi-transparent blanc SANS BORDS ARRONDIS derrière un élément, ajouter dans le modèle (template ) du blog l'instruction suivante :

background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;

La même chose mais en gris :

background: transparent url(http://blogblog.com/1kt/travel/bg_black_40.png) repeat scroll top left;
(4 niveaux de gris : changer 40 en : 50, 60 ou 70).

Chaque endroit où on trouve "background" peut être modifié, pour être appliqué aux : barres latérales, partie centrale du blog, messages, ...

* * * * *
Pour ajouter un fond blanc (noir en bas de page) semi-transparent à bords arrondis (sauf avec Internet Explorer) en-dessous de toute la partie centrale du blog (agrandir éventuellement les marges latérales) comme dans les template (modèles) créés avec l' "outil de création de modèles" de Blogger, ajouter le code suivant dans le template (modèle), (juste avant ]]></b:skin>) :
#content-wrapper {
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
-moz-border-radius: 20px 20px 0 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: 20px 20px 0 0;
}
#footer {
color:#cccccc;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-goog-ms-border-radius: 0 0 20px 20px;
}
La même chose mais en gris : remplacer "http://www.blogblog.com/1kt/transparent/white80.png" par "http://blogblog.com/1kt/travel/bg_black_40.png" (4 niveaux de gris : changer 40 en : 50, 60 ou 70).

Remarque : #content-wrapper et #footer peuvent être remplacés par d'autres noms sur certains templates (modèles).

* * * * *
On peut aussi ajouter, en haut de l'écran, une barre de liens DÉROULANTE.

* * * * *


http://themes.googleusercontent.com/image?id=1Chj_ye7BsJe4QabnXKJQuhK_LeNly4bySlgKgmDjAgChHUvZW1v1C0LKoAFBqdYE6g6L



http://themes.googleusercontent.com/image?id=1y3eC27Cm0mN0_e7VLIgP2tag83UvSEgzr_ch5SdlnYnJ8-bJInLqSW9UNf6_1HlJb2N3


http://themes.googleusercontent.com/image?id=1GBeQIphohvffXIx8_Vd6YmyOklBj_nDNayud7boOKLF6xrEG1ZutiwbhIsq_4DaA3vU-


http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMGY4YzQ0NTgtYTg2OS00NDE0LWIyNDUtMDQ5YWQ5Mjk2OTUx



http://themes.googleusercontent.com/image?id=1sbDCVdylfaB7TKeFHt378q5EKX7N0LZqrNn6Rj52PMX_6iCNiKeZmsuGc-TyI4VlelfT



http://themes.googleusercontent.com/image?id=1M-C2rHwLzLDZGoh3qbWZ6sde9R5UC4jZcYt-QoyO1RyATwD6rQGlARx_UmuMWy_AlUTn



http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNWM4NjJmNDYtMDA5Yi00NGJjLWE0MzAtYjZjNzc2YjNhOTc2



http://themes.googleusercontent.com/image?id=1GZdqfMZ519lW_HRWoMpccRb6-BsfeemvQ2i9xYqJVR_tmHaqcwBSuj7Xrn68bWTibhFo



http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMN2IwNWVhMDktYzNlYy00MGY2LWI5MTYtMTQ2ZTRkMmI3YTE1

Comment trouver une autre image ?

1) Créer un nouveau blog (qui pourra être supprimé ensuite ou servir pour écrire des messages au brouillon) avec une image de fond, au moyen de l' "outil de création de modèles" de Blogger" : choisir un template avec une image de fond puis cliquer sur "Arrière-plan" et changer l'image.

2) Ou afficher un autre blog trouvé sur internet.

Placer le curseur de la souris sur l'image de fond et, avec le bouton droit de la souris, cliquer sur "Afficher l'image de fond". Placer à nouveau le curseur de la souris sur l'image de fond et, avec le bouton droit de la souris, cliquer sur "Copier l'adresse de l'image".

Revenir sur le blog de départ et actionner Ctrl + U, ce qui affiche le code-source de la page. Rechercher enfin un code (à coller, entouré de <style type="text/css"> et </style> dans un gadget au bas du blog ou de la version HTML du message avec un fond spécifique) équivalent à celui-ci : <div style='font-size:13px;text-align: center;'>Template images by <a href='http://www.istockphoto.com/googleimages.php?id=11751797&platform=blogger&langregion=en_US' target='_blank'>TommyIX</a>. Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</div>

Cela donne le résultat suivant :

Template images by TommyIX. Powered by Blogger.

Aucun commentaire: