Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

TOTO

  • Ça m'agace

    Je mets cette note en TOTO, comprendre "Tutos", mais je voudrais la mettre en "Fallait que je le dise".
    C'est un bug que la majorité d'entre vous ne voit probablement pas, et qui concerne la colonne centrale "élastique". Sur Technoblog, Thomas, explique comment faire en sorte que la colonne centrale d'un blog s'élargisse ou rétrécisse en fonction de la largeur de la fenêtre du browser. Beaucoup d'entre vous apprécient cette fonction. Et c'est très bien, sauf que à ce jour, il y a une erreur dans le code donné par Thomas , et que ça se répercute sur tous les blogs utilisant ce code. Je l'ai signalé à l'époque, mais bon hein, comme ça ne se voit QUE sur Safari (butineur/browser/navigateur web) en Mac (c'est ok en Firefox)...
    Quelle est-elle cette erreur qui m'agace ?
    C'est ça :


    Comment faire pour la corriger ? Ben, en plus, c'est très simple !
    Dans le code, il suffit de corriger la valeur en jaune ci-dessous

    #center {
    overflow: hidden;
    float: none;
    width: auto;
    background-color: #fff;
    margin-right: 163px;
    margin-left: 181px

    en

    #center {
    overflow: hidden;
    float: none;
    width: auto;
    background-color: #fff;
    margin-right: 181px;
    margin-left: 181px

    Ben oui quoi, si une colonne a 180 pixels de large, il faut lui laisser 180 pixels de place (plus 1 pour aérer) et non 163...
    Pas difficile... Et après on ira dire que je suis un râleur, mais imaginez, un instant, pour quelqu'un qui travaille dans le graphisme de voir la 3e colonne de nombre de blogs bouffée de... 18 pixels, et plus grave encore ne pas pouvoir lire le début des mots de la colonne de droite de vos blogs. C'est comme ça, même chez Mr Blogspirit (Philippe Pinault)comme on peut le voir ici à ce jour (30 janvier 2006)
    Ceci dit, le site de Thomas, collaborateur de Blogspirit, est le site pour trouver les trucs et astuces de BS.

  • Découverte

    Upload video upload image upload flash

    Je ne l'ai pas encore essayé, mais ça à l'air sympa... un site qui offre un espace illimité* pour y déposer ses fichiers, même des mp3!
    Si c'est efficace, je l'adopte !
    *avec un maximum de 25Mb par fichier

  • Images photos

    La place sur Blogspirit est limitée à 10 Mo pour les blogs gratuits. C'est peu si l'on veut y mettre des photos.
    Alors que faire ?
    - Acheter de l'espace supplémentaire chez BlogSpirit.
    - Héberger ses images ailleurs... ce que je fais, depuis que j'ai vu ça chez MOONCHILD
    Il y a des sites qui "donnent" de la place pour ce faire. Pour le moment, j'utilise IMAGESHACK.

    Comment ça marche ?
    Il faut créer un compte sur leur site (en anglais) et ensuite, suivre leurs instructions. Ce n'est pas trop compliqué... faut faire attention à la "bar"d'info qu'ils mettent par défaut aux images. Y'a une option pour la désactiver. Une fois l'image hébergée, il suffit de récupérer le code html généré par Imageshack.
    Le site génère une petite image (thumbnail) et différents codes html, ceux-ci pour des usages différents (forums, sites...). Il suffit de récupérer le code généré pour les sites, par copier et le coller dans le texte de votre note.
    Attention à y télécharger des images qui rentreront dans vos colonnes... les miennes, font 370px de base, ce qui est la largeur de ma colonne centrale. Si vous voulez une image plus grande, utilisez le lien du thumbnail, il utilisera l'image plus petite dans votre note, et en cliquant dessus, le lecteur du blog sera envoyé chez ImageShack, à la page de votre image.

    Si tout cela n'est pas clair, dites le moi, j'étofferai ma note ;-)

    Il existe d'autres sites, dont notamment : flickr qui lui permet de faire également des albums photos... à suivre

  • Élargir la colonne centrale

    Pour simplement élargir sa colonne centrale, modifier les paramètres suivants dans les styles.
    Aller dans "Présentation/avancées/feuille de styles/modifier"

    Vous y trouverez entre autres ceci :


    #container {
    width: 771px;
    line-height: 140%;

    #center {
    overflow: hidden;
    float: left;
    width: 409px;

    Augmentez les caractéristiques width de la même valeur. Par exemple : 821 et 459.
    Attention, n'augmentez pas trop, tout le monde n'a pas un écran géant...
    Le mieux est de faire en sorte que la colonne soit "élastique", mais pour cela, allez voir le tutorial de "bouge ton blog" Thomas, technicien officiel de Blogspirit. Vous y trouverez d'autres astuces.

  • FOND de page

    A la demande du a.k.a. FD et de BA
    Un mini TOTORIAL pour avoir un fond de page FIXE !

    Ce n'est pas à la portée de tout le monde, je ne devrais pas dévoiler TOUS mes petits secrets, alors q'un bon livre sur les CSS... bon ok ok ok ok (L'arme fatale 2) ok ok ok...

    Commençons par le début, votre page est composée de différents éléments :
    Le corps de la page (la page), en anglais le BODY
    Et des "colonnes calques" les DIV
    Dans votre CSS, il faut rajouter, d'abord au bas de la définition du style BODY, avant l'accolade } qui ferme la définition.

    background: url("[l'URLcomplètedevotrefaitchier]");

    Même chose pour colonne de gauche "left" et celle de droite "right" et la colonne centrale "center" ET "container"

    Pour un fond fixe !

    Suffit de rajouter un attribut "fixed" au "background"...

    background: url("[l'URLdevotrefaitchier]") fixed;

    C'est dur hein ;-)

  • Tuto4 (Pas Pat & Tic)

    Une astuce plutôt qu'un Tuto.
    J'aurais dû écrire un bouquin moi ;-)

    Bon Sophie me demande avec quoi faut-il puiser l'eau ?!?
    Heu je m'égare là.
    Peut-on faire une bannière en Word ?
    J'allais dire non, ou alors, faire une copie d'écran... et bien, je viens de trouver que OUI !!!
    En fait, il faut utiliser les fonctions graphiques de Word, même pour le texte.
    Donc, ne pas faire son texte normalement, mais dans l'éditeur graphique.
    Et enregistrer en tant que page web !
    Oui oui, du coup, Word fait le fichier html, + un petit dossier contenant l'image réalisée en .gif

    Donc, éditeur graphique, outil texte, taper son texte, choisir la police, la taille... et enregistrer en tant que page web
    Là, j'ai fait ça :

    Incroyable Word pour faire une bannière ;-)

  • Tuto3 (Pas Pat & Tic)

    Pour Georges Clooney, Pat & Tic (j'ai mis Georges en premier, c'est plus vendeur)
    Pour simplement changer la police de caractère de ta bannière, c'est "simple".
    Primo tu t'assures que la police que tu choisis se trouve sur tous les ordis qui visitent ton blog ?!?
    Bon, allez, plus facile, tu choisis des familles de police (Arial, Times, Verdana, courier) oui, le choix n'est pas grand. Si tu en veux plus, tu DOIS utiliser une image.
    Qd tu as fait ton choix, tu passes à la phase moins simple :
    Tu te connectes à ton blog, tu vas dans présentation, configuration avancée, feuille de styles, bouton "modifier"

    Dans la feuille de styles, tu repères les 2 paragraphes suivants :


    #banner h1 {
    padding: 15px;
    font-weight: bold;
    padding-bottom: 10px;
    }

    #banner h2 {
    font-size: 80%;
    padding: 0px 0px 0px 15px;
    }

    et tu insères dans chaque paragraphe, sous les lignes qui commencent par #banner, la ligne suivante :
    font-family: Verdana, Arial, sans-serif;

    où Verdana est ta police choisie, Arial une police de substitution (au cas où) et sans-serif si c'est une police sans empattement.

    Addendum
    Comme le signale Thomas, la taille du texte peut être modifiée en rajoutant ou en modifiant la ligne
    font-size: xx%;

  • Relooking


    Donner une nouvelle gueule à son blog... c'est simple ou presque.
    Y'a des adresses sur blogspirit qui expliquent comment faire :
    L'aide en ligne Blogspirit
    Technoblog
    J'ai fait une note ici en rubrique Web, le tuto2. Ce n'est pas un "copier/coller" des FAQ, mais ça ou les FAQ, c'est quasi la même chose.

    Quelques conseils ?
    Lisez les tutos avant de plonger.
    N'oubliez pas que le copier/coller existe (gardez par exemple dans le presse-papier l'adresse de votre blog)
    Soyez rigoureux ! En effet, du bidouillage dans du code demande de la rigueur. Les programmes font ce qu'on leur dit de faire, la moindre faute de frappe peut faire que le résultat escompté ne s'affiche pas. Pour cela il est bon d'imprimer les tutos pour pouvoir comparer facilement, au lieu de jongler de fenêtres en fenêtres.
    Ce n'est pas difficile, il faut juste un peu d'attention et comme dit l'autre "Il ne savait pas que c'était impossible, alors il l'a fait."
    Vous serez fiers d'y être arrivé !
    En cas de pépins, Blogspirit a tout prévu : il y a moyen de revenir au code d'origine (bravo aux programmeurs)

  • TUTO2

    La bannière !
    Pfff que des trucs sérieux :-(
    Donc, pour changer la bannière, le dessus de son blog :
    Pas trop difficile, faut juste suivre le guide et ne pas poser de questions,
    et surtout ne pas me tenir responsable de foirage éventuel !!!
    J'ai mis ça dans une image pour que ça prenne moins de place dans le flux de mes notes et pour la couleur.
    Bonne chance.
    ERATUM : Bannière sur 770 x 130 px

    medium_bannerexpli.jpg

  • Pour OLITANCAM

    COMMENT METTRE UN LIEN....
    ...dans ses notes quand on est sur Mac ?

    Et bien oui, les utilisateurs Mac sont défavorisés, les icones servant à mettre en gras, en italique, les liens... ne fonctionnent pas sur Mac !?! Si, mais pas sur SAFARI.
    Solution simple utiliser FIREFOX
    Solution moins simple : à la paluche comme on dit, c-à-d utiliser le code html.
    Je suis obligé de mettre ça en image car si je met du code ici, il sera transformé et donc pas visible.
    J'espère être clair...
    medium_eurlexplic.jpg