Tutofaf

Un blog d'aide fait par les femmes au foyer pour les cyberquiches !

14 avril 2007

Changer l'aspect de son blog 11- Infobulle ou tableau simple.

Une autre question a été posée à savoir... comment puis-je faire une info bulle.  Un message d'accueil mais dans un tableau.  Je vais commencer par faire une boîte simple  !!! on fera l'autre un peu plus tard.

Tout d'abord, vous pouvez aller visiter ce site. Il y a beaucoup de données intéressantes complémentaires à l'élaboration d'un blog.  Ok, c'est assez théorique mais bon.
Nous allons prendre le code du tableau simple
Il y a deux façon de le faire.. mais on va y aller pour la plus simple dans un sens.  La plus longue mais la plus simple.  Pour l'instant c'est celle que je maîtrise le mieux :-)
Cette fois-ci, nous ferons un tableau, ou info-bulle dans la page principale.  Une fois bien assimilée, vous pourrez faire la même chose en haut ou n'importe où d'une de vos deux colonnes.

Pour cela, vous devez allez dans apparence/modifier/page d'accueil

trouvez le code

  <Blogger> <BlogDateHeader>

et juste au dessus, vous copiez ce code

tut11a

vous pouvez faire un "copier-coller" directement à cette adresse.

Ce tableau s'affichera au début de la page et c'est ce que verra en premier votre lecteur.

tut11b

nous allons modifier un peu les données

Pour les besoins de la cause, je ne mettrai pas les balises de début et de fin ( les  < et >  ) pour que le copier-coller fonctionne au lieu que le blog l'intègre mais ne les supprimez pas dans vos pages !

div><img border="0" src="images/noir.gif" width="100%" height="1"></div

ça c'est juste pour faire une ligne avant le tableau... vous pouvez complètement l'effacer !

<center

ça c'est pour centrer votre tableau, bien sûr vous pouvez indiquer left ou right ! pour gauche ou droite

maitenant le vrai tableau !

table cellspacing="4" style="margin: 10px; border: thick outset silver  à remplacer par style="border: 4px solid #000000 vous pouvez ensuite changer l'épaisseur de votre bordure, le style par dotted ou double et la couleur après le #; background-image: url('ici vous mettez l'url de VOTRE image si vous en voulez une'); width: 450px la largeur de votre tableau; height: 150px la hauteur de votre tableau; font-family:Comic Sans MSla police d'Écriture; font-size: 4em la grosseur de votre écriture, vous pouvez diminuer le chiffre; color: #0000AA vous pouvez naturellement changer la couleur; text-align: center " centrer votre texte ou left ou rigth>
<tr>
<td align="center">Tableau CSS Ça c'est ce que vous écrivez dans votre tableau ! N'importe quoi, les news de votre blogs, un lien extra, un message d'accueil ! n'importe quoi là encore vous pouvez centrer votre texte, ou left ou right !</td>
</tr>
</table> balise de fin de code très important
</center> balise de fin de code, encore très important
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div> ça aussi vous pouvez l'effacer au complet ! c'est encore juste une ligne de séparation après le tableau !

Voici ce que cela donne pour moi avec ce code : en bleu les changements que j'ai effectués

center>
<table cellspacing="1" style="border: 4px solid #000000; background-image: url('http://p6.storage.canalblog.com/67/00/236984/10638776.jpg'); width: 600px; height: 150px; font-family:Comic Sans MS; font-size:2em; color: #000000; text-align: center ">
<tr>
<td align="center">Mon message à moi, bonne chance</td>
</tr>
</table>
</center

tut11c


Ce tuto est une gracieuseté de Frenchgirl

Posté par frenchgirl à 15:50 - 5- Mode avancé - Commentaires [3] - Permalien [#]

Commentaires

    super infos je trouve

    Posté par table massage, 16 février 2008 à 12:29
  • Bonjour je découvre ton blog ...ça tombe bien j'ai un soucis ma troisième colonne s'affiche tout en bas de ma page ...pkoi?

    Posté par Nathalie_b, 01 mai 2007 à 17:50
  • ptt problème

    les tutos sont très bien faits : BRAVO,
    le seul petit problème je n'arrive pas à choisir une police plus proche de celle que j'utilise (font et color) et surtout une taille de caractères plus petite !!!
    une réponse serait la bienvenue car j'ai hâte de personnaliser un peu plus mon blog
    MERCI d'avance

    Posté par catbulle, 09 mai 2007 à 16:03

Poster un commentaire







Haut de Page