Aide pour BLOGGER (personalisation des blog) Help me !

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Bonjour à tous et toutes Smile

Voila, connaissez vous, des sites, des forums, ou autres... Traitant principalement de BLOGGER et plus particulièrement de la personalisation de Blog réalisé avec ce dernier.

C'est abérant, sur le Net, je ne touve aucun support, site perso ou autres, en Français c'est important pour moi, traitant de BLOGGER, ou les gens posent des questions, et ou des réponses sont apportées Crying or Very sad

C'est fou !

Exemple de question que j'aurais à poser : Dans un billet, je voudrais mettre 2 photos l'une à coté de l'autre, et non pas l'une en dessous de l'autre, mais comment faire dans le code HTML Crying or Very sad

Connaissez vous des sites, forums ou autres qui propose ce genre d'aide ! Crying or Very sad

Milles merci à vous Smile

Amicaleemnt

Weider.

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Bonsoir RomsIW,

Tout d'abors merci pour ta réponse, c'est très sympa de me répondre et de prendre de ton temps pour m'expliquer les choses, tout comme pene-r qui m'a bien aidé également il y à quelques temps...

Vois ci-dessous, tout mon code html de mon modèle.
Je ne retrouve pas ta ligne de commande ?

Ou alors, je comprends de travers et je dois la créer mais ou la placer ? Et que dois-je supprimer également ?

Tu sais, l'HTML, je n'y connais rien...

Milles merci à toi pour ton aide !

Amicalement

Pascal.

****************************************

<?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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#eeffcb">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#555544" value="#555544">
<Variable name="pageHeaderColor" description="Blog Title Color"
type="color" default="#ffffee" value="#d5ff9c">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#ffffee" value="#ffffff">
<Variable name="linkColor" description="Link Color"
type="color" default="#669922" value="#5522bb">
<Variable name="hoverLinkColor" description="Link Hover Color"
type="color" default="#88bb22" value="#88bb22">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#555544" value="#cc0000">
<Variable name="sidebarHeaderColor" description="Sidebar Title Color"
type="color" default="#555544" value="#cc0000">
<Variable name="sidebarTextColor" description="Sidebar Text Color"
type="color" default="#555544" value="#cc0000">

<Variable name="bodyFont" description="Text Font" type="font"
default="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif" value="normal normal 109% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif">
*/

/* Primary layout */

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://photos1.blogger.com/x/blogger2/3117/341798654064377/320/333211/Fond%20%3Ftoiles%20clignottantes.gif);
font-size: small;
}

img {
border: 0;
display: block;
}

.clear {
clear: both;
}
/* Wrapper */

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

/* Header */

#header-wrapper {
background: #8b2 url(http://photos1.blogger.com/x/blogger2/3117/341798654064377/320/540507/Rideau%20rouge.jpg) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
background-image: url(http://photos1.blogger.com/x/blogger2/3117/341798654064377/320/540507/Rideau%20rouge.jpg);
background-position: top left;
}

h1 a, h1 a:link, h1 a:visited {
color: $pageHeaderColor;
}

#header .description {
font-size: 110%;
text-align: left;
padding: 3px 20px 10px 23px;
margin: 0;
line-height:140%;
color: $blogDescriptionColor;
}

/* Inner layout */

#content-wrapper {
padding: 0 16px;
}

#main {
width: 400px;
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 {
width: 226px;
float: right;
color: $sidebarTextColor;
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 */
}

/* Bottom layout */

#footer {
clear: left;
margin: 0;
padding: 0 20px;
border: 0;
text-align: left;
border-top: 1px solid #f9f9f9;
}

#footer .widget {
text-align: left;
margin: 0;
padding: 10px 0;
background-color: transparent;
}

/* Default links */

a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: $linkColor;
background: transparent;
}

a:hover {
font-weight: bold;
text-decoration: underline;
color: $hoverLinkColor;
background: transparent;
}

a:active {
font-weight : bold;
text-decoration : none;
color: $hoverLinkColor;
background: transparent;
}

/* Typography */

.main p, .sidebar p {
line-height: 140%;
margin-top: 5px;
margin-bottom: 1em;
}

h2, h3, h4, h5 {
margin: 0;
padding: 0;
}

h2 {
font-size: 130%;
}

h2.date-header {
color: $dateHeaderColor;
}

.post h3 {
margin-top: 5px;
font-size: 120%;
}

.post-footer {
font-style: italic;
}

.sidebar h2 {
color: $sidebarHeaderColor;
}

.sidebar .widget {
margin: 12px 0 13px 0;
padding: 0;
}

.main .widget {
margin: 12px 0 0 0 ;
}

li {
line-height: 160%;
}

.sidebar ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
}

.sidebar ul li {
list-style: disc url(http://www.blogblog.com/moto_son/diamond.gif) inside;
vertical-align: top;
padding: 0;
margin: 0;
}

.widget-content {
margin-top: 0.5em;
}

/* Profile
----------------------------------------------- */

.profile-datablock {
margin: 3px 0 5px 0;
line-height: 140%;
}
.profile-textblock {
margin-left: 0;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
border:4px solid #8b2;

}

#comments {
border: 0;
border-top: 1px dashed #eed;
margin: 10px 0 0 0;
padding: 0;
}

#comments h4 {
margin-top: 10px;
margin-bottom: -10px;
font-weight: normal;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1px;
}

#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://www.blogblog.com/moto_son/commentbug.gif) top left no-repeat;
}

#comments dl dd {
padding: 0;
margin: 0;
}

.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;
}

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
}
]]></b:skin>
</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='WEIDERBLOG - Entre Magie et technologie... (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='BlogArchive1' locked='false' title='Mes anciens messages' type='BlogArchive'/>
<b:widget id='Image1' locked='false' title='' type='Image'/>
<b:widget id='TextList1' locked='false' title='Mes sites préférés...' type='TextList'/>
<b:widget id='Image2' locked='false' title='' type='Image'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>

</div></div> 
</body>
</html>

Alors ça c'est le code de ton template. Souhaites-tu mettre les deux images côte à côté dans le template ou dans un des messages que tu vas mettre dans ton blog ?

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Code de mon Template, de mon modèle quoi. Ok, j'ai encore appris ça.

Ce que je veux, c'est dans un nouveau message que je vais mettre sur mon blog, un billet comme on dit je crois.

Je voudrais disons, en placer, 2 ou 3, en petite taille, les unes à coté des autres. 2 si trois ce n'est pas possible.

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

RomsIw,

J'ai fais ce que tu ma dis, mais j'ai du gaffer à un endroit car le résultat n'est pas celui escompté...

Voici mon code HTML une fois mes trois photos inserées dans mon nouveau message.

Peut tu reprendre ce dernier et mettre en rouge par exemple, tout ce que je dois supprimer !

De cette façon je verrais ou j'ai bouletté...

Merci à toi

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Oup's, voici le dit code.... scuzi...

******************************

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/3117/341798654064377/1600/Rideau%20rouge.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/3117/341798654064377/200/Rideau%20rouge.jpg" alt="" border="0" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/3117/341798654064377/1600/Chapeau%20noir.0.gif"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/3117/341798654064377/200/Chapeau%20noir.png" alt="" border="0" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/3117/341798654064377/1600/Cartes.0.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/3117/341798654064377/200/Cartes.jpg" alt="" border="0" /></a>

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/3117/341798654064377/1600/Chapeau%20noir.gif">
</a>

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Pour RomsIW !

Bon, j'ai réussi ce que tu m'a dis de faire.

Effectivement quand je fais la manipe et qu'ensuite je jette un oeil sur le résultat pour voir (sans publier le message) Oui, les photos se trouvent bien les unes à coté des autres.

Seulement voila, quand je PUBLIE le message sur le Blog, bein... les photos se retrouve les unes SOUS les autres...

J'ai essayé de minimiser un max la taille, rien n'y fait !

Une idée !?

Bonne nuitée

Weider.

Nouveau WRInaute Inscrit le: 22 Nov 2006 Messages: 15

Personne pour me répondre .... Crying or Very sad

Un nouveau groupe, encore peu actif, mais au moins il existe et il est en francais :

http://groups.google.ch/group/bloggers-beta?hl=fr

Bonjour

Le probleme ne viendrait il pas de la taille de tes images qui accolées l'une a l'autre depasseraient la largeur de ta fenetre blogspot ?

Tiens nous au courant

A bientot

Tes images sont surement trop grandes par rapport à ton thème commence par ajouter la largeur pour forcer tu fais petit d'abord puis en agrandissant pour cela tu place width="100" dans la balise image par exemple :

Aide pour BLOGGER (personalisation des blog) Help me !

A lire dans l'actualité sur WRI :

Autres sujets de discussion :