Forum du Dessin et de l'Art

Recherche avancée
Connexion Syndication e-Kaki

code html... heeeeeelp !! T_T


code html... heeeeeelp !! T_T

le 26 juillet 2007 à 18:32

Bon alors voila :
j'ai un blog => http://chezluciole.blogspot.com/

Comme je veux personnaliser la mise en page et que le code html est modifiable à volonté (sauf certains truc listés ici : http://help.blogger.com/bin/answer.py?answer=46870 Moi je ne comprend rien à l'anglais donc je ne sais pas ce que c'est XD), j'ai modifié le code html au petit bonheur, en regardant à chaque fois si les changements que je faisais affichaient le rendu desiré.
Sauf que je ne connais strictement rien en code :D

Donc je suis face à deux problemes :
    - Est ce que je n'ai pas ecrit des trucs bizzares ou des aberrations qui peuvent empêcher le blog de bien marcher ?
    - Mon blog s'affiche bien comme je veux sous Firefox mais sous IE c'est n'importe nawak...
    - et heuuu... comment je fais pour afficher des boutons à la place des tags dans la colonne de gauche ?
    - Et pour mettre un nuage de mots ?[/list:u]

    oups, ca fait 4 !!!

    Je mets mon code en ligne ici, est ce qu'il y aurait quelqu'un qui pourrait me le vérifier un peu, me le corriger si il y a des erreurs ?
    Et m'aider pour mes deux dernières questions ? n_n

    Merciiiiiiiiiiiiiiiiiiiiiiiii !!!
    ___________________________________________________

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">; <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <META CONTENT='Luciole' NAME='Author'/>  <META CONTENT='luciole,LUCIOLE,chezluciole,le-blog-de-luciole,luciole,LUCIOLE,la-luciole LA-Luciole,la luciole,laluciole,lucioles,La-Luciole,livre,sorbonne,luciole,etudiant,luciole,société,luciole,contestation,luciole,samurai, samurai deeper kyo,luciole,luciole,dessin,paris,luciole,blog,luciole,discuter,luciole,nuages,luciole,iaido,samourais,LUCIOLE,sabres,seigneur des anneaux,oekaki,e-kaki,whistling moor,héritiers,fantasy,roman,ecriture,luciole' NAME='Keywords'/>  <META CONTENT='Le blog de Luciole, sur le Droit, mes études à la Sorbonne, mais surtout sur le dessin, l"oekaki et le livre que je suis en train d"écrire : Les Héritiers, un roman de fantasy/SF qui se publiera ici petit à petit' NAME='Description'/>   <META CONTENT='All rights reserved on this blog"s content' NAME='Copyright'/>  <META CONTENT='Ados étudiants jeunes éditeurs arts ecriture dessin' NAME='Rating'/> <META CONTENT='all' NAME='Robots'/>  <META CONTENT='Luciole dessin whistling moor héritiers' NAME='Subject'/>  <META CONTENT='follow' NAME='Robots'/>  <meta content='Blogger - http://blogger.com/start?hl=fr' name='generator'/> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* -----------------------------------------------Blogger Template Style Name: Minima Black Designer: Douglas Bowman URL: http://www.stopdesign.com Date: 26 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */  /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#000" value="#000000"> <Variable name="textcolor" description="Text Color" type="color" default="#ccc" value="#cccccc"> <Variable name="linkcolor" description="Link Color" type="color" default="#9ad" value="#e1771e"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#000000" value="#000000"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#777" value="#777777"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#ad9" value="#cc0000"> <Variable name="bordercolor" description="Border Color" type="color" default="#333" value="#333333"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#E18B6B" value="#E18B6B"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#999" value="#999999"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#a7a" value="#f2984c"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Trebuchet, Trebuchet MS, Arial, sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 0% Arial, sans-serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> */  /* Use this with templates/template-twocol.html */  body { background:$bgcolor; margin:0; color:$textcolor; font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; }  /* Header ----------------------------------------------- */  #header-wrapper { width:710px; margin:0 auto 10px; border:1px solid $bordercolor; }  #header {  margin: 5px; border: 1px solid $bordercolor; text-align: left; background:url("http://img250.imageshack.us/img250/5526/headerblogtitre26bi.jpg";)  }  #header h1 { margin:5px 20px 160px; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }  #header a { color:$pagetitlecolor; text-decoration:none; }  #header a:hover { color:$pagetitlecolor; }  #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; background:url }  /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 700px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }  #main-wrapper { width: 480px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }  #sidebar-wrapper { width: 200px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }   /* Headings ----------------------------------------------- */  h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; }   /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; }  .post { margin:.1.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }  .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:bold; }  .post h3 strong, .post h3 a:hover { color:$textcolor; }  .post p { margin:0 0 .75em; line-height:1.6em; }  .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; }  .comment-link { margin-left:.6em; title:"étincelles" } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; }  /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; }  #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; }  .feed-links { clear: both; line-height: 2.5em; }  #blog-pager-newer-link { float: left; }  #blog-pager-older-link { float: right; }  #blog-pager {  text-align: center;  }  /* Sidebar Content ----------------------------------------------- */ .sidebar {  color: $sidebartextcolor; line-height: 1.5em; }  .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; }  .sidebar .widget, .main .widget {  border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }  .main .Blog {  border-bottom-width: 0; }  /* Profile  ----------------------------------------------- */ .profile-img {  float: left; margin: 0 5px 5px 0; padding: 4px; border: 1px solid $bordercolor; }  .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; }  .profile-datablock {  margin:.5em 0 .5em; }  .profile-textblock {  margin: 0.5em 0; line-height: 1.6em; }  .profile-link {  font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; }  /* Footer ----------------------------------------------- */ #footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }  /** Page structure tweaks for layout editor wireframe */ body#layout #header {  margin-left: 0px; margin-right: 0px; } ]]></b:skin> <meta content='mHp8iUsZjIQzAYGyOWWvLbbtHegH9AVG6LuW0L2Q784=' name='verify-v1'/>  </head>  <body> <div id='outer-wrapper'><div id='wrap2'>   <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span>  <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Dans les nuages... (en-tête)' type='Header'/> </b:section> </div>  <div id='content-wrapper'>  <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/> </b:section> </div>  <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile1' locked='false' title='Le Crayon Maléfique :' type='Profile'/> <b:widget id='Label1' locked='false' title='Tags Maléfiques' type='Label'/> <b:widget id='HTML1' locked='false' title='Des supers sites !' type='HTML'/> <b:widget id='HTML3' locked='false' title='DeviantART' type='HTML'/> <b:widget id='BlogArchive1' locked='false' title='Archive Maléfiques' type='BlogArchive'/> </b:section> </div>   <div class='clear'>&#160;</div>  </div>   </div>  <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>  <script language='JavaScript' src='http://remotel.fr/cpt/compteur.php?num=919'/>  <a href='http://www.degriffe.org' title='annuaire gratuit'>annuaire gratuit</a>  </div> </body>  </html>
*Luciole*

Messages: 642
Inscription: 17/02/2007




Re: code html... heeeeeelp !! T_T

le 28 juillet 2007 à 16:10

J'ai une petite astuce, tu vas sur un blog hébergé par blogger, ex: http://kimmmi.blogspot.com (j'me fais dla pub) et tu fais clic droit => code source de la page. Tu vois tout le code html de la page et tu peux t'amuser alors à comparer pour voir ce qui cloche ou bien copier quelques trucs sympas n___n
yaura des trucs qui ne sont pas affichés sur le modèle de ton blog, mais si tu veux plus de précision, tu affiche le code source de TA page n_n (et tu compares...)

Voilà, une bête astuce parce que j'suis une grosse flemmarde et que j'ai pas le courage de t'aider mieux que ça x___x

P.S: pour tes deux derniers problèmes, j'ai pas trop compris v_v
K i m m m i

Pomme
Messages: 1 888
Inscription: 20/07/2006




Re: code html... heeeeeelp !! T_T

le 01 août 2007 à 13:00

en fait pour la comparaison je le fais déjà mais vu que je ne comprend rien à ce que je lis, ca ne m'aide pas beaucoup lol :D

pour les deux derniers problèmes, en fait c'est
1) Pour les tags : tu sais, la liste de libellés des messages, qui permet aux visiteurs d'afficher les messages par thème ?
et bien les liens sont de simples mots avec un lien hypertexte. Moi, je voudrais les remplacer par des boutons, des trucs plus joli quoi, mais je ne sais pas comment on fait ;_;

2) le nuage de mots : ben c'est un truc comme sur le blog de Jori, qui affiche les termes de recherche auxquels ton blog correspond le plus.
Ca ne sert à rien mais c'est marrant XD
sauf que je ne sais pas comment on fait pour ajouter un truc à part du blog.

Luciole le crayon pas doué du tout
*Luciole*

Messages: 642
Inscription: 17/02/2007




Re: code html... heeeeeelp !! T_T

le 01 août 2007 à 14:29

ah oui, pour les tags, j'ai compris ^^ ya peut-être moyen, je vais chercher, mais parfois on sait pas éditer ce genre de trucs (comme les archives) <___< mais d'abord, t'es en ancienne ou nouvelle version blogger?

Edit: je crois que j'ai trouvé =D
dans ta page html, cherche " <h2>Tags Maléfiques</h2> " (Ctrl+f)
à partir de là, tous tes tags sont listés, il suffit de remplacer " <a href='http://chezluciole.blogspot.com/search/label/le tag'>blog</a> " par "<a href="http://chezluciole.blogspot.com/search/label/le tag"><img border="0" src="http://truc.machin.bidule" title="le nom du tag"/></a>"
j'espère que c'est clair...
il faut biensûr mettre le lien de l'image de ton bouton (via imageshack, par exemple)
et tu répètes l'opération pour tous les tags n__n rhalala dur dur hein, vive le copier/coller
ne te plantes pas dans les liens des tags, hein...si t'as un problème, tu le dis =D
K i m m m i

Pomme
Messages: 1 888
Inscription: 20/07/2006




Re: code html... heeeeeelp !! T_T

le 01 août 2007 à 23:08

waaaaaaa merchi beaucoup sourire

je suis en nouvelle version blogger
j'avais bien repéré le coin des tags dans le code mais je ne savais pas comment mettre l'image sourire
je vais mettre ca dès que possible, il me reste du fignolage de boutons, mais dès que ca marche, je te le dis !

Luciole le crayon content
*Luciole*

Messages: 642
Inscription: 17/02/2007



Seuls les utilisateurs enregistrés peuvent poster des messages dans ce forum.

Cliquer ici pour vous connecter