Aide pour BLOGGER (personalisation des blog) Help me !

W
WEIDER
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.
 
R
RomsIW
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.
Cliquez pour agrandir...

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.
 
W
WEIDER
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>
 
R
RomsIW
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 ?
 
W
WEIDER
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.
 
R
RomsIW
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.
Cliquez pour agrandir...

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
 
W
WEIDER
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
 
W
WEIDER
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>
 
W
WEIDER
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.
 
S
Solentenerife
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
 
F
f_trt
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
 
Vous devez vous connecter ou vous inscrire pour répondre ici.

➡️ Offre MyRankingMetrics ⬅️

pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)

Voir les détails ici

coaching SEO
Discussions similaires
B
Aide pour blogger
Réponses
3
Affichages
3K
ReDoc
R
J
aide pour blogger: insérer une image n'importe dans 1 texte
Réponses
4
Affichages
4K
jeanpatrickyvettegeneviev
J
T
aide pour" Blogger":créer des catégories
Réponses
7
Affichages
14K
photodauto
P
B
Besoin aide pour transfert blogger.com/oxito via FTP
Réponses
25
Affichages
5K
HawkEye
H
anthony carrel
Besoin d'aide pour optimiser le SEO de ma page d'accueil
Réponses
1
Affichages
1K
pascal malapert
P
jacquesM
Aide pour analyse de cas
Réponses
6
Affichages
879
jacquesM
jacquesM
O
Besoin d'aide pour vendre mes noms de domaine
Réponses
1
Affichages
903
Blanx
B
E
Besoin aide SEO et référencement pour mon SaaS
Réponses
16
Affichages
1K
WebRankInfo
WebRankInfo
infowebb
Lenteur de mon site e-commerce TunisiePara.com - Besoin d'aide
Réponses
7
Affichages
1K
Marie-Aude
Marie-Aude
edchev
Demande d'aide pour un formulaire de contact
Réponses
11
Affichages
1K
edchev
edchev
A
Google Ad Manager, refus de domaine : besoin d'aide
Réponses
8
Affichages
2K
Amrgs
A
B
Création d'un annuaire: votre aide svp.
Réponses
1
Affichages
3K
Madrileño
Madrileño
R
Problème grave besoin d'aide
Réponses
0
Affichages
1K
Ramazoti
R
Z
aide pour mes publicités Google
Réponses
0
Affichages
1K
zorko
Z
A
Aide à la suite de la mise à jour de google d'août 2023
Réponses
1
Affichages
1K
pomination
pomination
H
Besoin d'aide car Adsense refuse mon adhésion
Réponses
3
Affichages
1K
hemera22
H
A
demande d'aide nom de domaine
Réponses
4
Affichages
1K
alexisgrain
A
M
De l'aide svp ?
Réponses
1
Affichages
1K
Madrileño
Madrileño
F
besoin d'aide sur google search console
Réponses
4
Affichages
2K
flexi2202
F
C
demande d'aide
Réponses
4
Affichages
2K
suppr334822
S
Haut