lundi 6 avril 2009

Mettre un fond derrière les menus de canalblog en mode avancé

 

J'ai mis beaucoup de temps à rédiger ce tuto, pour vous expliquer avec le plus de simplicité possible, afin de vous offrir la possibilité de mettre des fonds derrière vos menus et ce de façon assez facile et j'espère avoir été assez claire 

Voilà mon exemple dans la colonne de gauche du blog, cliquez dessus :

001

Avant de commencer il vous faut un bouton, soit vous le créez vous-même, soit vous en trouvez sur le net. Vous en trouverez également dans mes différents kits/Fonds que je propose par là -> http://joelladesignblog.canalblog.com/

Conseil : Choisisez un bouton de minimum 180 pixels de largeur(width) et en hauteur(height) au minimum de 28 pixels.

Une fois votre bouton fait, enregistrez-le dans un nouveau message que vous laisserez comme brouillon.

 

Maintenant allez dans votre blog en mode avancé, dans le menu "Feuille de style générale"

001_

Sélectionnez le tout et collez-le dans votre bloc notes, word ou autre

Puis repérez le code .navlinks .title { et Sélectionnez tout le code entre .navlinks .title { et } comme sur ma capture ci-dessous

002

Puis copiez mon code ci-dessous et allez le coller à la place de ce que vous venez de sélectionner

background: transparent url(http://p2.storage.canalblog.com/22/57/512558/37345348.png) no-repeat;
height: 28px;
width: 180px;
line-height:26px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 5px;
display:block;
border: none;
white-space:nowrap;
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;

 

 

Maintenant allez chercher le lien de votre bouton, faites comme sur mes captures d'écran

003

005

Et allez le coller à la place du miens comme ceci

006

Puis mettez les bonnes tailles pour le height: 28px; et width: 180px; Ces tailles vous les trouverez également là où vous avez enregistré le bouton

007

Repérez le code  line-height:26px; juste en-dessous et là mettez la même taille que le  height:28px; mais moins 2, ce qui fera  line-height:26px;  (pour mon bouton ici).

Pour modifier la couleur de la police de vos boutons, remplacez   color: #FFFFFF; par votre couleur en mettant le bon code couleur après le #

Vous trouverez la liste des codes couleurs par là -> Cliquez ici

Maintenant, sélectionnez à nouveau la totalité des codes et allez  le recoller en mode avancé, dans le menu "Feuille de style générale" à la place de l'autre et cliquez sur "Valider"

001_

008

Visualisez votre blog, vous y verrez le fond sous chaque menu comme ceci !

009

Bon amusement !             

 

 

 

 

 

 

 

 

 

 

Posté par Joella_ à 21:46 - Canalblog : En mode avancé - Commentaires [4] - Permalien [#]
Tags : ,


Commentaires

LANGAGE SMS - TEXTO INTERDIT, MERCI.


    Merci beaucoup

    Merci beaucoup pour tout ce que tu nous apportes
    Bravo à toi pour ta patience
    Bisous
    Béa

    Posté par : Terlicoton
    Le mardi 7 avril 2009 à 07:58
  • Wouah ! quel travail remarquable.
    Comment installer aussi le compteur de visite Jo ?
    Je vais essayer de faire ce que tu expliques dans ce billet, mais pas sûr que j'y arrive.
    Cà m'a l'air bien compliqué tout çà !
    Bonne nuit bisous
    Fabie

    Posté par : Fabie Psyché
    Le mercredi 8 avril 2009 à 23:19

  • aide

    bonjour, j'ai suivi avec attention tes conseils et ai presque réussi. Le problème c'est que j'aimerai avoir différentes fonds d'images et non la même, et là, sur le coup, je bloque, bien que j'ai cherché sur Google :/. Tu pourras voir par toi-même sur l'adresse de mon blog si ça t'intéresse. Si tu as la réponse, je serai toute ouïe : )

    J'espère ne pas t'importuner et te souhaite une bonne journée.

    Posté par : minose
    Le vendredi 7 août 2009 à 01:54
  • Tapez votre message ici
    bonjour
    je souhaiterai ajouter l'image d'un des sponsors sur le blog de ma soeur( canalblog) je l'ai deja fait mais oups oublié !!! pourrais tu m'aider , d'avance merci

    vero2A

    Posté par : vero2a
    Le mercredi 2 septembre 2009 à 15:07

Vous désirez voir apparaître votre avatar ainsi ? Inscrivez-vous sur Gravatar par ici !
Et pour savoir comment le placer comme ici, allez voir mon tuto par ici

Poster un commentaire









Mes liens favoris

Blogs de ma famille

  • ღ Chez Cecilia ღ
  • ღ Dur dur d'être bébé ღ
  • ღ Blog de ceciliax4 anderlecht ღ
  • ღ Cecilia et oui c'est moi ღ
  • ღ Ma nouvelle vie chez Anthony ღ
  • ღ Ma-couse-et-moi chez Cecilia ღ

  • Blogs de ma fille, Andréa

  • ღ Chez votr tite puce ღ
  • ღ Mlle Dreia ღ
  • ღ My life,family,friends ღ

  • Blogs dont j'ai créé le graphisme

  • A deux plumes
  • A l'ombre du tilleul
  • Au fil des jours
  • Aux délices des arts
  • Chez Angel
  • Chez Carl
  • Chez Catherine
  • Chez Fabian
  • Chez fleur
  • Chez kemistry
  • Chez Nadine
  • Chez supercreations-Vivienne 11 ans
  • Chouchoublog
  • Créa's Ninie
  • Dur, dur d'être bébé !
  • Le monde de Paty
  • Le monde des dauphins
  • Le monde vu par Cecilia
  • LeMondeDesSims2
  • L'univers de Catherine
  • Mamymyriam
  • Marylin Design
  • Mimi Design
  • Pause tendresse
  • SYNDICAT NATIONAL DES TRAVAILLEURS DE L'EDUCATION DE BASE

  • Compressez et partagez vos médias en public ou en privé

  • wambo

  • Des flashs pour votre blog

  • Chez kemistry

  • Douceur, Amour et Tendresse

  • Un Monde de Douceur, D'Amour et de Tendresse

  • Ecrivains

  • A deux plumes

  • Enfants

  • Le monde des dauphins

  • Expériences tristes de la vie

  • JIMMY et PASCALE
  • Mon papa je t'aime par Sarah 14 ans qui a perdu son papa
  • Perdue dans les étoiles
  • Si j'avais su...

  • Faites des créas à partir de vos photos

  • Photos in museums
  • Picnik : Logiciel gratuit et sans installation sur votre pc !

  • Faites vos diapos,créez de belles animations avec vos images

  • Flickr
  • PictureTrail
  • Picturetrail
  • Slide Shows
  • Vamos

  • Fonds - Créations pour vos billets/blogs

  • Aux plaisirs des yeux
  • Chez Mamymyriam
  • Créa's Ninie
  • Créations Nadine
  • La cowgirl dorée
  • Le monde de Patounette
  • L'univers de Gabriella
  • Malide créations

  • Forums divers super sympa et intéressant

  • Best friends
  • Bienvenue Chez ELemiah
  • Electrik Girls
  • Exprimez-vous librement
  • La tanière des loups
  • Lady Graph
  • Le Rendez-vous des amis du Monde Animal et de la Nature
  • Les profolies du psp
  • L'univers du psp
  • Sea horse
  • Speak tuto
  • Tout vous saurez tout
  • Votre graph

  • Gagnez de l'argent par le biais de votre blog ou site !

  • Comment gagner de l'argent !

  • Héberger vos fichiers tout genres

  • PMSC

  • Héberger,Partager,Stocker vos fichiers,images,musiques,vidéos

  • Héberger avec Archive-Host

  • Hébergez vos images-Zics et plus

  • 4shared
  • AOL Photos
  • Archive-host
  • Bulma-animation
  • Flickr
  • Gigasize
  • Goldswords
  • Hibôôx
  • ImagesCoyotesm
  • ImageShack® - Hosting
  • Megaupload
  • Mezimages
  • PatMax
  • Photobucket
  • Photomaniak
  • Photomaniak
  • Voiloo
  • Yoopix
  • ZimageZ

  • Hébergez vos photos

  • AOL Photos, gratuit pour tous !
  • Gestion d'albums photos-Hebergement gratuit d'Images - Bulma
  • Netenviesdemariage
  • Photobucket
  • Voiloo
  • Yoopix
  • Zimagez

  • Humour

  • Le rire et la bonne humeur n'ont pas de nationalité
  • Rire a gogo !! mais aussi sincérité!!!

  • Images pour créations

  • Chez CocoChippie

  • Jeux divers

  • Le monde des sims2

  • Kits graphiques pour MSN

  • L'univers de Chrysstalle
  • L'univers de Chrysstalle 2

  • Kits graphiques pour vos forums

  • LES THEMES DE TRISTANA

  • La passion des animaux

  • Chez Uskaya

  • La passion des dauphins

  • Chez Bernard

  • La passion des perroquets

  • Kiwi mon gris du Gabon

  • La passion du chien et du Loup

  • Chez Nathalie
  • Du royaume argente
  • La passion du chien
  • Nathalie et co
  • Tala la louve

  • La passion du scrapbooking

  • Les scraps de Josy

  • L'amitié

  • Souad

  • Les astuces pour canalblog

  • Blogtuto
  • Blue night
  • Chez Alienor
  • Dans le monde réel
  • Exemples d' Alérion
  • La grande aventure
  • Le p'ti labo
  • Personnaliser son blog
  • SHERLOCK79
  • Un petit blog sans prétentions pour vous aider à créer le votre.
  • Webbricolo

  • Les astuces pour Oldiblog

  • Néopheus et vista
  • Trucs et Astuces pour OldiBlog

  • Les astuces pour Over-blog

  • Aide-blog
  • Forum.over-blog
  • La Déco d'Anna K.
  • Titia blog
  • Trucs et astuces
  • Trucs-astuces
  • Zoelie

  • Les astuces pour SkyRock

  • Caractères Spéciaux
  • Donne des couleurs à ton blog !
  • FaderSkyBlog
  • FormGenerator
  • Forum d'aide
  • Générateur de boite à photos
  • Générateur de caractères spéciaux

  • Les astuces pour SpacesBlogs/MSN

  • Aide Astuce weblogs
  • Astuces pour ton blog...
  • Chez bobine
  • Chez Francine : Trucs et astuces
  • Chez Pierrette
  • Crea Caca
  • La caverne de MSN Live
  • Live-generation
  • OEIL DE MOSCOU
  • Touchme69
  • Tous les trucs pour que votre live space soit au top
  • Yen a pas

  • Les astuces pour tous les blogs

  • Aide Astuce weblogs

  • Les astuces tout genres (PC-Blogs-Messenger-Firefox-etc...)

  • CANAL WEB PASSION
  • Chez Jacques
  • Ctrl+Alt+Suppr : Parce que ça ne plante pas toujours
  • Le blog de libellules
  • Livebackstage
  • Pinnula

  • Liens Paint Shop Pro divers

  • Chez commanche - Tubes et images
  • Chez Louisette : Superbes tubes et tutos

  • Liens pour apprendre à créer sa page web

  • Alsacreations
  • Bienvenue à Mammouthland !
  • Clicpartout
  • Créer un site
  • FORUM d'aide
  • Lissa vous explique tout
  • Nordnet
  • Openweb
  • Site du zéro

  • Liens pour glitters-Textures-Fonds-etc...

  • Chez Shalimar
  • Graphics Flava
  • La maison du soleil
  • Motz graphics

  • Liens pour Utiliser, créer et modifier des îcones et curseurs

  • Cool...Micro

  • Liens ressources pour PSP Tubes-Filtres-Masques-Tuiles-etc.

  • Chez Joriane

  • Liens Tubes pour Paint shop pro

  • Byheart
  • Fantasy designs
  • Graphic allusions
  • Jecajo
  • Joyce
  • kera-tubes
  • Lassies designs
  • Le monde dangie
  • loftydesigns
  • Mooie tube
  • Outlawsdesign
  • Paint shop palace
  • Poser addiction
  • Prestige tubes
  • Psp tube depot
  • Pygal
  • Shuna
  • Vampsart
  • Vic

  • Liens tutoriels divers/Débutants

  • Cheyenne Créations
  • Chez Dariel
  • Chez Louisette

  • Liens Tutoriels pour Paint Shop Pro 11

  • Chez VioletteGraphic

  • Liens Tutoriels pour Paint Shop Pro 4 à 11

  • Cool...Micro
  • La page de Nicou
  • PSP chez Gessy

  • Liens Tutoriels pour Paint Shop Pro 7

  • Chez Elena
  • Chez Joriane
  • Chez kyky
  • Le didacticiel
  • Ludouce
  • Milytoiles
  • Mon chez moi
  • Plan et graf
  • Tutoriels Delenly
  • Vive les rondes

  • Liens Tutoriels pour Paint Shop Pro 7-8-9-10 et 11

  • Chez petite Talie
  • Fredo-design

  • Liens Tutoriels pour Paint Shop Pro 9

  • Yaëlle's dreams

  • Liens Tutoriels pour Paint Shop Pro 9 - 10 et 11

  • Espace Tine

  • Liens Tutoriels pour Photofiltre

  • Aide dannat
  • Demolitetuto
  • GraPhoFil
  • Grizelda
  • Liens utiles pour tutoriels PhotoFiltre et PhotoFiltre Studio
  • NEW YORK EVASION
  • Photofiltre
  • PhotoFiltre version gratuite et PhotoFiltre Studio
  • Ressources-Photofiltre
  • SylvieS ou la passion du dessin

  • Liens Tutoriels pour PhotoImpact

  • Chez VioletteGraphic
  • Le didacticiel

  • Liens Tutoriels pour Photoshop

  • clo1005
  • Cool...Micro
  • Faire de l'or
  • Neutrinium
  • Photoshop-création
  • Ressource web
  • Wisibility

  • Liens Tutoriels pour The Gimp

  • Cool...Micro

  • Liens Tutoriels pour Ulead : Photoimpact, Gif Animator, etc.

  • Cool...Micro
  • Speak-tuto

  • Logiciels sous licence, gratuits.Super intéressant !

  • Giveaway of the day

  • MSN-MESSENGER divers, trucs et astuces

  • Msn Truc Astuce

  • Musique - Liens pour vos blogs

  • ۞ Musiques ۞
  • AllZik
  • DJ TYTY
  • LA MUSIQUE SANS CONCESSION
  • Les Clips Video De La Nuit
  • Les entrailles de l espace msn
  • Musique Pour Ton Blog
  • Parce que je fais bien le veau
  • ZIC ®ØØM
  • ZICZIC !!!!!!!!!

  • Non à la pédophillie

  • Lutte contre la pédophillie

  • Passion du country

  • La cowgirl dorée
  • La passionnée du country

  • Poèmes - textes

  • Ange de larmes
  • Au fil des jours...
  • Chez Akira
  • Chez Nanda
  • Chez p'tit coeur
  • La rose des sables
  • Le monde d'Esmeralda
  • Ninie la rose
  • Ton coeur m'a choisi, tes yeux me l'ont dit, mes lèvre ont subi
  • Une douce famille unie !!!!
  • Vero

  • Santé - Maladies rares

  • Bonjour moi c'est Ludi, j'ai 4 ans et je suis atteinte d'une maladie rare : Le syndrome de williams.
  • Venez voir mon petit prince

  • Sécurité PC Quelques Trucs et sites sympa

  • Chez Jacques

  • Stars - séries - TV

  • GALAXIE SERIES

  • Superbes créations pour décorer vos blogs

  • Chez Nadine
  • Kaly créations
  • Le coffre d'or
  • Le méli-mélo de Véro

  • Tattoo et piercings

  • MY NUMBER IS 666...!!!

  • Un peu de tout pour le plaisir des yeux

  • Angels one
  • Aphrodite20011
  • Aristo ♥ Pimousse
  • Au fil des jours...
  • Bienvenue chez Malide
  • C'est un plaisir de vous voir dans mon univers
  • Chez Béatrice
  • Chez Elodie
  • Chez Evelyne
  • Chez Malicia
  • Chez Marlène
  • Chez Pilar
  • Chez Sandra
  • DaNs La JoIe Et La BoNnE hUmEuR
  • DaNs La JoIe Et La BoNnE hUmEuR 2
  • Dédé la vie du bon cote
  • Espace perso de Léa
  • Espace perso de loulou
  • Et oui la vie vaux la pein d'être vécue
  • Journal intime
  • Ka c moi
  • La fée bleue
  • La joie de vivre
  • La maison de Sidonie
  • La vie du bon côté
  • La vie ne vaut rien mais rien ne vaut la vie
  • Laora
  • Le ptit monde d'Emm@
  • Les belges sont la lolllll
  • L'univers de Myrdhinn
  • Mon petit monde a moi
  • Mon petit paradis
  • Mon univers virtuel chez Gigi
  • Mon univers virtuel chez Gigi
  • Petit Robert 13
  • Rachet
  • REBELLE AVEC UN COEUR
  • TA LE LOOK COCO
  • Tchio Biloute
  • The M4 Family
  • UN MONDE AUTHENTIQUE ET SYMPA CHEZ MARION
  • UN PETIT BOUT DE NOUS

  • ZUniversDesAstuces