Créer un menu horizontal sur Over-blog

Bonjour,

Pour rappel, avant de commencer, cliquer sur les images pour les agrandir. 

Pour créer un petit menu horizontal sur Overblog, voici comment procéder.



Cliquer sur Configurer / Mise en page.
Cliquer sur le petit marteau à côté de "menu personnalisé" et insérer les liens que vous souhaitez voir dans votre menu.  Il peut s'agir de liens externes ou internes à votre blog.

Lorsque vous modifiez ce menu, il se modifie automatiquement sur toutes les pages et il sera donc présent en page d'accueil.

Passons maintenant à une étape supérieure. Si vous souhaitez embellir ce menu, ça se passe bien sûr dans le CSS. Vous aurez la possibilité de mettre une couleur de fond, une image de fond, un encadrement.  Pensez à bien faire une copie de votre CSS actuel en cas d'erreur de manipulation.

Cliquer sur Configurer / Design.  Je vous conseille de prendre le design Easyblog qui vous permettra de faire des modifications à votre blog de façon plus simple.

Cliquer sur Personnaliser mon thème. Si vous avez opter pour le réglage avancé, vous aurez 3 CSS différents.



En bas du CSS, juste avant la balise /* @end */, insérer les codes suivants (n'insérer que les codes que vous souhaitez utiliser) :

Les liens :

#menuob a {text-align : center ; color : #code couleur; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les liens au survol :

#menuob a:hover {text-align : center ; color : #code couleur; font-weight : bold ; text-decoration : underline ; font-size :20px ; font-style : italic ; font-family : Comic Sans MS ;}

Ce qui est en rouge peut être modifié ou supprimé et signifie ce qui suit :

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite
color : red modifie la couleur de la police, voir les codes couleurs
font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal
text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement
font-size : 20px fixe la taille de la police
font-style : italic transforme la police en italique
font-family : Comic Sans MS sélectionne la police

Un fond dans chaque lien :

#menuob a {background-color:#code couleur;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le module :

#menuob {background-color:#code couleur;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Ce qui est en rouge peut être modifié ou supprimé et signifie ce qui suit :

background-color : #code couleur met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour encadrer les liens :

menuob a {border:solid 1px #code couleur}

Pour encadrer les liens au survol :

#menuob a:hover {border:solid 1px #code couleur }

Pour encadre le menu en entier :

#menuob {border:solid 1px  #code couleur }

Bonne journée,