Aide pour BLOGGER (personalisation des blog) Help me !

Discussion dans 'Gmail, Google Talk, Blogger et Orkut' créé par WEIDER, 28 Novembre 2006.

  1. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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.
     
  2. RomsIW
    RomsIW WRInaute passionné
    Inscrit:
    25 Mai 2004
    Messages:
    1 038
    J'aime reçus:
    0
    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.
     
  3. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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>
     
  4. RomsIW
    RomsIW WRInaute passionné
    Inscrit:
    25 Mai 2004
    Messages:
    1 038
    J'aime reçus:
    0
    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 ?
     
  5. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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.
     
  6. RomsIW
    RomsIW WRInaute passionné
    Inscrit:
    25 Mai 2004
    Messages:
    1 038
    J'aime reçus:
    0
    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
     
  7. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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
     
  8. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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>
     
  9. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    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.
     
  10. WEIDER
    WEIDER Nouveau WRInaute
    Inscrit:
    22 Novembre 2006
    Messages:
    7
    J'aime reçus:
    0
    Personne pour me répondre .... :cry: :cry: :cry:
     
  11. prac
    prac Nouveau WRInaute
    Inscrit:
    20 Juin 2006
    Messages:
    3
    J'aime reçus:
    0
  12. Solentenerife
    Solentenerife Nouveau WRInaute
    Inscrit:
    11 Février 2007
    Messages:
    9
    J'aime reçus:
    0
    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
     
  13. f_trt
    f_trt WRInaute impliqué
    Inscrit:
    17 Septembre 2005
    Messages:
    955
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - Aide BLOGGER (personalisation Forum Date
Besoin d'aide pour Blogger Demandes d'avis et de conseils sur vos sites 6 Mai 2013
Aide pour blogger Gmail, Google Talk, Blogger et Orkut 21 Octobre 2010
aide pour blogger: insérer une image n'importe dans 1 texte Demandes d'avis et de conseils sur vos sites 1 Novembre 2008
aide pour" Blogger":créer des catégories Demandes d'avis et de conseils sur vos sites 11 Mai 2006
Besoin aide pour transfert blogger.com/oxito via FTP Problèmes de référencement spécifiques à vos sites 15 Septembre 2005
Une aide pour une fonction récursive... Développement d'un site Web ou d'une appli mobile 18 Juillet 2022
Aide petite regex Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Aide données structurées produits Woocommerce Débuter en référencement 4 Mai 2022
WordPress A l'aide ! Mon site est spammé, mon domain rating prend un sacré coup Débuter en référencement 26 Avril 2022
WordPress Concours SEO : aide pour référencer site sur Boinmadig Demandes d'avis et de conseils sur vos sites 31 Mars 2022
Pose de liens : Besoin d'aide d'ordre technique et besoin d'éclairage Netlinking, backlinks, liens et redirections 9 Mars 2022
De l'aide pour ma localisation dans les balises SEO Demandes d'avis et de conseils sur vos sites 23 Février 2022
Comparateur de prix de bien commun - Aide / partenariat Demandes d'avis et de conseils sur vos sites 23 Décembre 2021
Avis et aide sur quel-canape Demandes d'avis et de conseils sur vos sites 13 Décembre 2021
Besoin d'aide pour le lancement de mon Application Demandes d'avis et de conseils sur vos sites 12 Août 2021
Besoin d'aide pour la compréhension d'une application Développement d'un site Web ou d'une appli mobile 1 Août 2021
J’ai disparu de la SERP… A l’aide Débuter en référencement 25 Juillet 2021
M'aider à comprendre... Demandes d'avis et de conseils sur vos sites 16 Juin 2021
Comment devenir freelance à l’aide d’internet ? Google : l'entreprise, les sites web, les services 17 Mai 2021
Besoin d'aide SEO pour mon site Débuter en référencement 13 Mai 2021