Aide pour BLOGGER (personalisation des blog) Help me !

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

Milles merci à vous :)

Amicaleemnt

Weider.
 
WRInaute passionné
WEIDER a dit:
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: :cry: :cry:

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:
<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.
 
Nouveau WRInaute
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='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://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'>

<!-- skip links for text browsers -->
<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>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<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> <!-- end outer-wrapper -->
</body>
</html>
 
WRInaute passionné
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
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.
 
WRInaute passionné
WEIDER a dit:
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:
<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
 
Nouveau WRInaute
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
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
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
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
 
WRInaute impliqué
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:
<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
 
Discussions similaires
Haut