| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
Diane
Niveau de Participation :
Inscrit le: 02 Mai 2006
Messages: 7
|
 Posté le: Mar Mai 02, 2006 3:58 am Sujet du message: int&gration de bannière dans mon blog |
 |
|
J'ai un blog sur blogger...ou blogspot.com
j'ai "construit " ma bannière mais je n'arrive pas à l'intégrer dans la bande du haut
Peut être pourriez vous m'aider???
Merci d'avance
Diane |
|
| Revenir en haut de page |
|
 |
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Mar Mai 02, 2006 8:29 am Sujet du message: |
|
|
Kikoo
Je ne connais pas trop Blogger de notre cher google. Mais j'ai crée un compte bidon pour voir comment cela fonctionnait.
Il faut modifier ton modèle en fait. (Dans les onglets Envoi/Paramètres/Modèle/Afficher le Blog)
Le code est assez indigeste.
A première vue, il faut modifier ceci dant ton modèle.
Citation:
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage>
<img src=http://adressedetonimage/banniere.jpg">
</a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div>
Ce bout de code est assez loin dans le modèle, il faut "scroller" pas mal pour y arriver.
J'ai juste rajouter en gras dans le code ci-dessus, l'image de ta bannière.
Je regarde ca de plus prés et je te tiens au courant.
Peux-tu donner l'adresse de ton blog pour qu'on puisse voir comment intégrer ta bannière ?
Autre possibilité : modifier la feuille de style.
Dans ton modèle, tu dois avoir quelque chose dans ce gout là :
Citation:
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 4
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
----------------------------------------------- */
Puis descend jusqu'à
Citation:
/* Blog Header
----------------------------------------------- */
Tu devrais trouver à cet endroit ceci :
Citation:
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
Ajoute background-image: url("adressedetonimage/banniere.jpg");
Tu devrais obtenir :
Citation:
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
background-image: url("adressedetonimage/banniere.jpg");
}
Ensuite, plus qu'à cliquer sur enregistrer et publier. Et ca devrait fonctionner. |
|
| Revenir en haut de page |
|
|
Diane
Niveau de Participation :
Inscrit le: 02 Mai 2006
Messages: 7
|
| Posté le: Mar Mai 02, 2006 9:47 am Sujet du message: |
|
|
« guillaume » a écrit: Kikoo
Je ne connais pas trop Blogger de notre cher google. Mais j'ai crée un compte bidon pour voir comment cela fonctionnait.
Il faut modifier ton modèle en fait. (Dans les onglets Envoi/Paramètres/ Modèle/Afficher le Blog)
Le code est assez indigeste.
A première vue, il faut modifier ceci dant ton modèle.
Citation:
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage>
<img src=http://adressedetonimage/banniere.jpg">
</a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div>
Ce bout de code est assez loin dans le modèle, il faut "scroller" pas mal pour y arriver.
J'ai juste rajouter en gras dans le code ci-dessus, l'image de ta bannière.
Je regarde ca de plus prés et je te tiens au courant.
Peux-tu donner l'adresse de ton blog pour qu'on puisse voir comment intégrer ta bannière ?
Autre possibilité : modifier la feuille de style.
Dans ton modèle, tu dois avoir quelque chose dans ce gout là :
Citation:
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 4
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
----------------------------------------------- */
Puis descend jusqu'à
Citation:
/* Blog Header
----------------------------------------------- */
Tu devrais trouver à cet endroit ceci :
Citation:
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
Ajoute background-image: url("adressedetonimage/banniere.jpg");
Tu devrais obtenir :
Citation:
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
background-image: url("adressedetonimage/banniere.jpg");
}
Ensuite, plus qu'à cliquer sur enregistrer et publier. Et ca devrait fonctionner. Merci! merci! tu es vraiment génial....!
Il faut que j'essaye..j'ai déjà tripoté les codes mais j'ai tout fait sauter!! Sans doute en effaçant la mauvaise ligne!!
Je te mets l'adresse du blog....tu verras la bannière est en "message" pour le moment...
http://difusions.blogspot.com/
En fait il s'agit d'un blog pour un de mes amis américains très cher que j'essaye d'aider...
Merci encore et bonne journée
Diane :-) |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Mar Mai 02, 2006 9:57 am Sujet du message: |
|
|
 de rien |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
|
| Revenir en haut de page |
|
|
Diane
Niveau de Participation :
Inscrit le: 02 Mai 2006
Messages: 7
|
| Posté le: Mar Mai 02, 2006 1:15 pm Sujet du message: |
|
|
Voilà ce que j'ai intégré (ton option2) et ça ne marche pas....qu'ai je fait de mal???
Pardon du dérangement
Diane
blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #357;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
background-image: url("http://photos1.blogger.com/blogger/374/2754/400/bib%27s%20banni%3F%3Fre.0.jpg");
color:#eee;
text-transform:uppercase;
letter-spacing:.2em; |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Mar Mai 02, 2006 1:38 pm Sujet du message: |
|
|
« Diane » a écrit:
Pardon du dérangement
On est la pour s('entr)aider ^^
Euh, je viens de tester sur le blog que j'ai crée et ca marche.
As-tu bien ce code dans ton modèle :
Citation:
<div id="header"><div>
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div></div>
http://bloggeressai.blogspot.com/
Sinon envoie moi ton modèle en MP, il y a peut être une erreur dedans. |
|
| Revenir en haut de page |
|
|
Diane
Niveau de Participation :
Inscrit le: 02 Mai 2006
Messages: 7
|
| Posté le: Mar Mai 02, 2006 3:29 pm Sujet du message: |
|
|
ça a marché!!!
MIRACLE!!
La bannière est intégrée....même si elle n'est pas à la bonne taille....faudra maintenant que je trouve quelle est la taille exacte pour que ça corresponde pile à la bande d'origine....vaste programme!
Merci mille fois de ton aide et je te recontacterai sûrement au prochain hic!
D'ici là j'essaye un max de me débrouiller toute seule :-))
Merci encore bonne journée
Diane |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Mar Mai 02, 2006 3:34 pm Sujet du message: |
|
|
Tu peux utiliser ca pour éviter que l'image ne se répète :
A ajouter dans #blog-title comme précédemment
background-repeat:no-repeat;
Pour la taille, il faut en effet que les deux coincident (celle de l'image et celle du bloc "blog-title").
Fais attention, tu as des marges de 5pixels de part et d'autres. |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Mar Mai 02, 2006 4:13 pm Sujet du message: |
|
|
| Par contre est-ce qu'un admin peut déplacer le sujet dans support webmastering ? |
|
| Revenir en haut de page |
|
|
Dragons
VIP
Inscrit le: 03 Jan 2004
Messages: 387
Localisation: Quelque part entre le ciel et la terre!!!
|
| Posté le: Mar Mai 02, 2006 4:18 pm Sujet du message: |
|
|
Voilà c'est fait ;-)
_________________
 |
|
| Revenir en haut de page |
|
|
Diane
Niveau de Participation :
Inscrit le: 02 Mai 2006
Messages: 7
|
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Jeu Mai 04, 2006 1:07 pm Sujet du message: |
|
|
Kikoo Diane, je suis là.
Pour centrer, toujours comme précédemment et au même endroit, rajoutes :
text-align : center;
Pour l'image par contre, il faut l'agrandir toi-même avec un logiciel de retouche d'image. Je te conseille Gimp bien que le bon vieux Paint fera l'affaire (>>Image >> Etirer\Incliner pour agrandir l'image)
_________________
Miaou
Homme terre Espace coming soon on www.enaid.info |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Jeu Mai 04, 2006 1:13 pm Sujet du message: |
|
|
Oups j'ai dit une connerie
text-align : center; C'est pour centrer du texte ^^
Pour centrer l'image mise dans background-image, il faut rajouter :
background-position : argument1 argument2;
Il y a 2 arguments le premier sert à aligner verticalement, le second horizontalement.
Ils peuvent prendre comme valeur : top, center, bottom pour le premier et left,center et right pour le second.
Dans les deux cas tu peux mettre aussi des pourcentages.
Dans ton cas, il faut écrire :
background-position : top center;
Voili, voilou, ce sera mieux comme ca ^^ |
|
| Revenir en haut de page |
|
|
guillaume
Niveau de Participation :
Inscrit le: 29 Juil 2005
Messages: 260
Localisation: valenciennes
|
| Posté le: Jeu Mai 04, 2006 1:20 pm Sujet du message: |
|
|
Encore une chose.
L'image mise dans background-image a une hauteur supérieur à celle de blog-title. C'est pour cela qu'elle apparait coupé sur ton blog.
Il faut toujours au même endroit modifier la hauteur de ton bloc comme ceci :
height: "hauteur de ton image" en pixel
ici à priori ce sera :
height: 87px;
_________________
Miaou
Homme terre Espace coming soon on www.enaid.info |
|
| Revenir en haut de page |
|
|
|
Accueil
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
S'enregistrer
Jeux d'arcade
Profil
Se connecter pour vérifier ses messages privés
Connexion
