Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
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".


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":
  1. Download the button graphic and upload it to your web server,
    in the same directory as the HTML files that will display the menu.
  2. Paste the HTML code below into your web pages to display the button.
- Si vous avez créé un bouton dont l'aspect se modifie au passage de la souris :
  1. 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.
  2. 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

Repost 0
Published by Julie - dans Tamagoblog
commenter cet article

commentaires

la grenouille 28/12/2011 16:49


Bonjour! J'ai accroché sur ton site pour le bonnet de nana, que j'ai réalisé et qui a eu un tel succès que ma famille m'en demande déjà deux autres ( va falloir que je cherche des couleurs un peu
originales pour varier par rapport au premier qui était simplement blanc;)). Mais là, je viens de parcourir tout le blog et ouah! Que d'enthousiasme! Tu fais de tout! Je suis assez touche à tout
moi aussi ( entre autre pour le codage, la laine, le carton... J'en profite pour renchérir sur un autre commentaire : le nec plus ultra, c'est le site du zero pour apprendre la program' ;))
et j'adore ton blog! Bravo et bonne continuation! Bonne année 2012!

Julie 06/01/2012 19:34

Merci de tous ces compliments ! Les bérets avaient aussi bien plu à mes proches, et autant les filles que les gars ! Bonne année à toi aussi ! Pleine de créativité !

Diane 20/03/2008 08:52

merci pour toutes ces infos Super Julie

Chris 21/01/2008 20:04

Suite à ton article j'ai réussi à créer 1 bouton (hourra) mais j'ai du mal encore avec la grandeur et du coup j'ai juste fait un essai, je n'ai rien modifié sur le blog. En tout cas tes explications sont claires.. je te tiens au courant pour la suite encore Merci et @+

Julie 21/01/2008 20:35

Mais de rien ! Contente de t'avoir été utile.

chrystalline 18/01/2008 12:12

Pour des explications assez simple, tout en détail, visitez le http://www.siteduzero.com/

sarah 17/01/2008 21:12

Resalut ! je suis allée faire un tour sur la carte des blogs déco, je n'arrive pas avoir la carte de France en grand, du coup tout le monde est "collé", c'est normal ?

Faites comme chez vous !

 
  Mon blog et moi


Week-end-Nantes-La-Rochelle-006--2-.JPG

C'est ici que j'étale ma vie côté bidouillage : déco, couture, cuisine, tricot, récup'...  tout ce qui peut se faire avec les deux mains et peu de moyens !
J'essaie d'en faire un blog comme je rêve d'en lire : des explications, une source d'inspiration (oh oui ! plaggiez-moi !!!), de la bonne humeur et de la convivialité.
N'hésitez pas à me faire des remarques ou à poser des questions en laissant un commentaire.
Mon blog déménage, vous pouvez désormais me retrouver à cette adresse :
 
 

Gribouille, trifouille, gazouille...

 

A bas le carré

 

Gilles en musique

 

Wonder Poubelles

Newsletter