17 janvier 2008
4
17
/01
/janvier
/2008
15:04
Pour tenter de rendre mon blog plus beau, je me suis essayée au CSS... Quelle galère ! La plupart des sites qui en parlent sont hyper compliqués, totalement inaccessibles pour des débutants tels que moi...
(Enfin, si, il y en a quelques une de biens, notamment celui d'Anna K, chez qui j'ai beaucoup appris !)
Après des heures de recherches et de bidouilles, j'ai réussi à mettre une bannière il y a quelques semaines, et après d'autres heures de recherches et de bidouilles, vous avez pu voir apparaître des boutons sur la droite de mon blog.
Autant faire profiter tout le monde du peu que je sais !
D'abord, le CSS qu'est ce que c'est ? J'ai oublié le nom exact en anglais mais en français ça donne "feuilles de style en cascade". C'est un langage informatique qui définit le design de votre blog.
Où y a-t'on accès ? Dans l'administration de blog Over-blog, à 2 endroits :
- "Design" -> "Mode avancé (CSS)" : Là vous avez 2 onglets ; "original" et "mon style". dans l'onglet "original", il n'est pas possible de modifier le CSS, celui-ci vous servira de référence si vous faites quelques bétises (oups !). Pour pouvoir modifier le CSS, c'est dans "mon style" que ça se passe. Cochez "Je souhaite modifier et appliquer la feuille de style à mon blog", et n'oubliez pas d'enregistrer une fois les modifications apportées.
- Dans n'importe quel traitement de texte (page, article, module texte libre) -> cliquer sur "accéder aux options avancées" -> "Editer la source" pour voir le CSS correspondant au texte en question. Pour revenir à la page de traitement de texte il suffit de cliquer à nouveau sur "Editer la source".
La conception des boutons :
Des sites vous offrent la possibilité de créer pas à pas vos boutons, en choisissant leur forme, leur taille, leur couleur, leur texture... Moi j'ai utilisé GRSites, (en anglais, mais facile à comprendre) mais Anna K propose un certain nombre d'autres sites (ici !), à vous de choisir !
Petit conseil : une fois que vous avez terminé la conception de votre bouton, ajoutez la page de résultat dans vos favoris, ça vous évitera d'avoir tout à recommancer lorsque vous voudrez ajouter un nouveau bouton à votre blog...
Enregistrement des boutons sur votre disque dur :
Sur la page de résultat de GRSites, s'affichent le bouton que vous avez conçu, et un texte :
- Si vous avec créé un bouton fixe (dont l'aspect ne changera pas au passage de la souris":
Cliquez sur les liens, "the button graphic", ou "button image" puis "mouseover image", et enregistrez la ou les images à l'endroit de votre choix sur votre disque dur (clic droit -> enregistrer l'image sous).
Ne vous préoccupez pas de la seconde instruction de GRSites, qui s'adresse aux concepteurs de sites internet, et non de blogs.
Insersion des boutons sur votre blog :
Pour les boutons fixes :
L'idée, c'est d'insérer une image (en l'occurence votre bouton) à l'endroit de votre choix (dans un article, une page ou un module texte libre), et de créer un lien dessus (séléctionner l'image et cliquer sur l'icone "insérer/modifier le lien...)
Pour les boutons dont l'apparence se modifie :
Commencez par télécharger les 2 images du bouton sur OB (par le biais de l'onglet "documents")
A l'endroit où vous souhaitez insérer votre bouton (article, page, texte libre), basculez en mode source et insérez le code suivant en modifiant les parties en couleur :
<a href="adresse-vers-laquelle-vous-souhaitez-rediriger"><img width="185" height="40" src="adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-ne-pointera-pas-sur-le-bouton" onmouseout=
"this.src=' adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-ne-pointera-pas-sur-le-bouton '" onmouseover="this.src=' adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-pointera-sur-le-bouton '" alt="undefined" key="55dc6c24769ae463f3695a42c47fd3e3" /></a>
Pour obtenir l'adresse de vos images allez danc "documents" et cliquez sur la loupe se trouvant sous l'image. Un aperçu de l'image s'ouvre, avec son adresse au dessus.
Vous pouvez modifier la taille de votre bouton en modifiant les chiffres (correspondant au nombre de pixels) en orange, "width" correspondant à la largeur, et "height" à la hauteur.
Voilà, je ne garantie pas que ça fonctionne chez tout le monde, mais c'est comme ça chez moi...
Autres articles déco-blog :
- les images
(Enfin, si, il y en a quelques une de biens, notamment celui d'Anna K, chez qui j'ai beaucoup appris !)
Après des heures de recherches et de bidouilles, j'ai réussi à mettre une bannière il y a quelques semaines, et après d'autres heures de recherches et de bidouilles, vous avez pu voir apparaître des boutons sur la droite de mon blog.
Autant faire profiter tout le monde du peu que je sais !
D'abord, le CSS qu'est ce que c'est ? J'ai oublié le nom exact en anglais mais en français ça donne "feuilles de style en cascade". C'est un langage informatique qui définit le design de votre blog.
Où y a-t'on accès ? Dans l'administration de blog Over-blog, à 2 endroits :
- "Design" -> "Mode avancé (CSS)" : Là vous avez 2 onglets ; "original" et "mon style". dans l'onglet "original", il n'est pas possible de modifier le CSS, celui-ci vous servira de référence si vous faites quelques bétises (oups !). Pour pouvoir modifier le CSS, c'est dans "mon style" que ça se passe. Cochez "Je souhaite modifier et appliquer la feuille de style à mon blog", et n'oubliez pas d'enregistrer une fois les modifications apportées.
- Dans n'importe quel traitement de texte (page, article, module texte libre) -> cliquer sur "accéder aux options avancées" -> "Editer la source" pour voir le CSS correspondant au texte en question. Pour revenir à la page de traitement de texte il suffit de cliquer à nouveau sur "Editer la source".
METTRE DES BOUTONS SUR UN BLOG
La conception des boutons :
Des sites vous offrent la possibilité de créer pas à pas vos boutons, en choisissant leur forme, leur taille, leur couleur, leur texture... Moi j'ai utilisé GRSites, (en anglais, mais facile à comprendre) mais Anna K propose un certain nombre d'autres sites (ici !), à vous de choisir !
Petit conseil : une fois que vous avez terminé la conception de votre bouton, ajoutez la page de résultat dans vos favoris, ça vous évitera d'avoir tout à recommancer lorsque vous voudrez ajouter un nouveau bouton à votre blog...
Enregistrement des boutons sur votre disque dur :
Sur la page de résultat de GRSites, s'affichent le bouton que vous avez conçu, et un texte :
- Si vous avec créé un bouton fixe (dont l'aspect ne changera pas au passage de la souris":
- Download the button graphic and upload it to your web server,
in the same directory as the HTML files that will display the menu. - Paste the HTML code below into your web pages to display the button.
- Download the button image and the mouseover image
and upload them to your web server,
in the same directory as the HTML files that will display the menu. - Paste the HTML code below into your web pages to display the button.
Cliquez sur les liens, "the button graphic", ou "button image" puis "mouseover image", et enregistrez la ou les images à l'endroit de votre choix sur votre disque dur (clic droit -> enregistrer l'image sous).
Ne vous préoccupez pas de la seconde instruction de GRSites, qui s'adresse aux concepteurs de sites internet, et non de blogs.
Insersion des boutons sur votre blog :
Pour les boutons fixes :
L'idée, c'est d'insérer une image (en l'occurence votre bouton) à l'endroit de votre choix (dans un article, une page ou un module texte libre), et de créer un lien dessus (séléctionner l'image et cliquer sur l'icone "insérer/modifier le lien...)
Pour les boutons dont l'apparence se modifie :
Commencez par télécharger les 2 images du bouton sur OB (par le biais de l'onglet "documents")
A l'endroit où vous souhaitez insérer votre bouton (article, page, texte libre), basculez en mode source et insérez le code suivant en modifiant les parties en couleur :
<a href="adresse-vers-laquelle-vous-souhaitez-rediriger"><img width="185" height="40" src="adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-ne-pointera-pas-sur-le-bouton" onmouseout=
"this.src=' adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-ne-pointera-pas-sur-le-bouton '" onmouseover="this.src=' adresse-de-l'image-qui-apparaîtra-lorsque-la-souris-pointera-sur-le-bouton '" alt="undefined" key="55dc6c24769ae463f3695a42c47fd3e3" /></a>
Pour obtenir l'adresse de vos images allez danc "documents" et cliquez sur la loupe se trouvant sous l'image. Un aperçu de l'image s'ouvre, avec son adresse au dessus.
Vous pouvez modifier la taille de votre bouton en modifiant les chiffres (correspondant au nombre de pixels) en orange, "width" correspondant à la largeur, et "height" à la hauteur.
Voilà, je ne garantie pas que ça fonctionne chez tout le monde, mais c'est comme ça chez moi...
Autres articles déco-blog :
- les images
Partager cet article
