Aide pour BLOGGER (personalisation des blog) Help me !

**le Mar Nov 28, 2006 13:00**

Bonjour à tous et toutes

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 :cry:

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 :cry:

Connaissez vous des sites, forums ou autres qui propose ce genre d'aide ! :cry:

Milles merci à vous

Amicaleemnt

Weider.

**le Mar Nov 28, 2006 13:14**

WEIDER a écrit:Bonjour à tous et toutes

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 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

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

Milles merci à vous

Amicaleemnt

Weider.

Les forums sont faits pour ça. En l'occurence, tu as besoin d'aide sur le code HTML (blogger n'étant que le contenant).

Voici comment faire le code pour avoir deux photos l'une à côté de l'autre (sous réserve qu'elles ne soient pas trop larges).

Code: Tout sélectionner: <img src="url_de_mon_image.jpg" alt="Texte descriptif" /><img src="url_de_mon_image2.jpg" alt="Texte descriptif" />

lol, et oui, c'est tout simple

la propriété "display" étant à "inline" (en ligne) pour les images par défaut.

enlève tout ce qu'il y a de superflu dans le code par rapport à ça.

**le Mar Nov 28, 2006 18:10**

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/3 ... tantes.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/3 ... 0rouge.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/3 ... 0rouge.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>

**le Mar Nov 28, 2006 18:50**

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 ?

**le Mar Nov 28, 2006 19:06**

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.

**le Mar Nov 28, 2006 19:18**

WEIDER a écrit: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.

Voilà, alors suis ce qui suit

1. Commences à rédiger ton message
2. Charge dans ton message les trois images consécutivement (en choissant alignement à "néant", elles vont selon ce que tu dis ce mettre les unes en dessous des autres
3. Clique sur l'onglet "Modifier le code HTML"
4. Tu vas voir apparaître un code du type

Code: Tout sélectionner: <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/8024/4515/1600/sortie%20297.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/8024/4515/320/sortie%20297.jpg" alt="" border="0" /></a> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/8024/4515/1600/sortie%20297.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/8024/4515/320/sortie%20297.jpg" alt="" border="0" /></a>

et bien supprime simplement le retour à la ligne entre </a> et
<a onblur entre chaque image et reviens sur l'onglet rédaction pour constater

**le Mar Nov 28, 2006 21:37**

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

**le Mar Nov 28, 2006 21:38**

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>

**le Mar Nov 28, 2006 23:29**

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.

**le Mer Nov 29, 2006 12:42**

Personne pour me répondre .... :cry:

**le Jeu Juin 28, 2007 21:38**

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

**le Sam Juin 30, 2007 17:45**

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

**le Sam Juin 30, 2007 19:25**

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 :

Code: Tout sélectionner: <img style="cursor: pointer;" src="http://photos1.blogger.com/blogger2/3117/341798654064377/200/Rideau%20rouge.jpg" alt="" border="0" width="100" />

Sinon donnes nous l'adresse de ton blog aussi

Aide pour BLOGGER (personalisation des blog) Help me !

Aide pour BLOGGER (personalisation des blog) Help me !

Re: Aide pour BLOGGER (personalisation des blog) Help me !

Un groupe Google pour Blogger en français

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne