Pages Navigation Menu

(il y a un jeu de mots)

Un photoblog chez Blogger

Autre solution de photoblog « en 1 heure » décrite dans l’article de Réponses Photo, Blogger n’est pas techniquement la solution de photoblogging la plus performante, mais elle présente de nombreux avantages qui en font un outil envisageable.

Principaux avantages : Blogger est gratuit, ne pose pas de limite en terme d’espace de stockage, et est sans publicité. Il est, comme la solution BlogSpirit déjà décrite ici, très simple et immédiat de mise en œuvre. Son inconvénient principal est qu’il est conçu avant tout pour être un blog écrit, avec les articles qui se suivent sur la même page (contournable en choisissant un affichage jour par jour). il ne propose pas non plus de gestion de mots-clefs. En fait, il vous conviendra surtout si vous voulez tenir un photoblog mi-image, mi-texte, comme le didactique ParisDailyPhoto, l’éclectique et délirant Tandis que des chats passaient décomposés, ou l’inépuisable grenier à images de l’Agence eureka.

logo

Suivons donc la création du blog photofloue sur blogger

Rendez-vous sur www.blogger.com et suivez la flêche « créer votre blog » pour arriver sur cet écran :

1b

Remplissez-le, ces coordonnées vous ouvriront un compte chez blogger, où vous pourrez même créer plusieurs blogs, et les gérer très facilement à partir d’une console commune.L’écran suivant vous demande de nommer votre blog. Il y a deux paramètres qui peuvent être différents : le titre qui apparait effectivement sur le blog, et l’adresse internet. Vous pouvez utiliser dans le titre une phrase complète comme « Un photoblog sur la floutitude », alors que l’URL ne devra comporter aucun espace, c’est ce que vous retrouverez avant « .blogspot.com » qui caractérise les blogs sous blogger.

Quelques lettres à recopier pour parer les robots créateurs de blogs à spam, et c’est parti.

2

La page du choix des modèles laisse peu d’alternatives si vous voulez donner une place prépondérante à l’image. J’opte pour le fond noir.

3

Ils ont de belles icônes sur Blogger…

4

Vous voilà au pied du mur : l’angoisse de l’écran blanc. On voit l’orientation texte de Blogger.

L’éditeur de texte intégré permet une mise en page du texte plus sophistiquée que dans un Pixelpost.

6

Pour intégrer la photo, il faut cliquer sur la petite icône d’image, et vous êtes conduit à un dialogue pour vous permettre de charger la photo. Choisissez l’option taille de l’image : Grand : Blogger va redimensionner la photo automatiquement (et elle ne sera pas ce que j’appelle « grande »).

7

Envoyez…

8b

Et publiez…

5

Voilà le résultat.

9

La mise en page est assez jolie, mais la colonne de gauche est vraiment trop présente.

Blogger donne toute latitude pour changer ça, toute une palette de paramètres sont accessibles, jusqu’au code html du modèle.

Comme je suis vachement calé 😉 je vais aller modifier la largeur des colonnes direct in ze code css.

10

C’est mieux, la colonne principale est plus large, et j’ai encore de la marge pour agrandir la photo.

11

Je retourne dans le message pour l’éditer, et je peux tirer sur les coins de la photo pour l’agrandir.

Il est certainement possible de modifier la taille par défaut de l’image en allant fouiller dans le code html du modèle, pour les plus calés.

12

Voilà qui est mieux…

13

Même manip avec ma deuxième image, qui vient se poser au-dessus de la première.

Dans les paramètres, on peut choisir de n’afficher qu’un article par jour, ou ceux des x derniers jours.

14

Voilà. Donc comme vous venez de le voir, une grande simplicité, avec toute latitude de modifier le modèle de base, ou d’aller en piocher un parmi les centaines disponibles sur le net. J’avoue ne pas avoir creusé pour savoir si quelqu’un avait développé un template spécifique pour faire un photoblog sur Blogger.

Comme je le disais, une solution à retenir si vous avez également la fibre littéraire. Un plus de Blogger : vous pouvez le paramétrer pour que la publication se fasse sur votre propre nom de domaine, et que tout soit sur votre serveur, sans avoir à installer de base de données.

Si vous êtes utilisateur de Blogger, les commentaires sont ouverts…

48 Comments

  1. Aujourd’hui, j’ai essayé mon blog, mais après je ne le trouve plus pourtant j’ai enregistré mes écrits.

    Michèle

  2. slt merci pour ce petit tuto, comme tu as l’air plutot fort , je voulé te demander quelque chose, comment as tu fait pour supprimer les petit pointillé blanc entre les catégories sur la droite? de plus g un probleme avec mon blog sur internet explorer, la colonne de droite s’affiche tout en bas, apres mes articles.. voila si tu connais la réponse a mes problèmes pourrait tu me répondre , merci d’avance

  3. Dans Modèle > Modifier, on a le code html du modèle. Ca commence par la description des styles CSS qui sont des balises de mise en forme. Il y a à mi hauteur de la page un bloc : SIDEBAR CONTENT avec :

    #sidebar ul {
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    border-bottom:1px dotted #444;
    list-style:none;
    }

    Il suffit de supprimer la ligne qui commence par border-bottom. Il y en a la même qq lignes plus bas à la rubrique PROFILE pour supprimer la ligne en dessous du profil.

    Avant d’enregistrer les modifs, il y a un bouton Aperçu bien pratique.

  4. merci beaucoup phillipe pour cette réponse

  5. je voudrais mettre une photo ou vais-je dans ce cas là.
    A dte, a gche, qui peut me renseigner.
    NEWS BLOGGEUSE

  6. Salut, et merci pour le tuto…sauf que j’ai pas exactement le meme modèle de script. Du coup, vu que j’y connais rien dedans, je sais pas quoi modifier.

    Peux tu me dire quoi modifier dans le script pour élargir la colonne principale (celle ou je post) ??

    Merci énormément 🙂

    le code :

    /* —( layout structure )—*/

    @media all {
    #wrap {
    width: 847px;
    margin: 0 auto;
    text-align: left;
    background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
    }

    #content {
    margin-left: 62px; /* to avoid the BMH */
    }

    #main-content {
    float: left;
    width: 460px;
    margin: 20px 0 0 0;
    padding: 0;
    line-height: 1.5em;
    }

    #sidebar {
    margin: 0 41px 0 547px;
    padding: 20px 0 0 0;
    font-size: 85%;
    line-height: 1.4em;
    color: #999;
    background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
    }
    }
    @media handheld {
    #wrap {
    width: 90%;
    background: none;
    }

    #content {
    margin:0 2% 0 2%;
    }

    #main-content {
    float: none;
    width: 100%;
    }

    #sidebar {
    margin: 0 2% 0 2%;
    }
    }

    /* —( header and site name )— */

    @media all {
    #blog-header {
    margin: 0;
    padding: 0;
    font-family: « Lucida Grande », « Trebuchet MS »;
    background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat top left;
    }

    #blog-header h1 {
    margin: 0;
    padding: 45px 60px 50px 160px;
    font-size: 200%;
    color: #fff;
    text-shadow: #81A75B 2px 2px 2px;
    background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
    }
    }
    @media handheld {
    #blog-header {
    background: #99cc66;
    }

    #blog-header h1 {
    background: none;
    }
    }

    #blog-header h1 a {
    text-decoration: none;
    color: #fff;
    }

    #blog-header h1 a:hover {
    color: #eee;
    }

    /* —( main column )— */

    h2.date-header {
    margin-top: 0;
    padding-left: 14px;
    font-size: 90%;
    color: #f93;
    background: url(http://www.blogblog.com/tictac/date_icon.gif) no-repeat 0 50%;
    }

    h3.post-title {
    margin-top: 0;
    font-family: « Lucida Grande », « Trebuchet MS »;
    font-size: 130%;
    letter-spacing: -1px;
    color: #f63;
    }

    .post {
    margin: 0 0 1.5em 0;
    padding: 0 0 1.5em 14px;
    border-bottom: 1px solid #ddd;
    }

    .post-footer {
    margin: 0;
    padding: 0 0 0 14px;
    font-size: 88%;
    color: #999;
    background: url(http://www.blogblog.com/tictac/tictac_grey.gif) no-repeat 0 8px;
    }

    .post img {
    padding: 6px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    }

  7. C’est un beau modèle en effet (tictac : http://www.blogger.com/templates/tictac/sample.html).Le code CSS est relativement explicite, voici ce qui concerne la largeur des colonnes :

    #wrap {
    width: 847px;
    >> c’est l’emballage de la page elle-même

    #main-content {
    float: left;
    width: 460px;
    >> c’est la largeur du contenu principal (les posts) : remplacer par la nouvelle largeur (par ex. 500 px)

    #sidebar {
    margin: 0 41px 0 547px;
    >> les marges pour le positionnement de la colonne de droite : haut = 0, droite = 41, bas = 0, gauche = 547 (par rapport à l’emballage de la page. Il faut donc faire varier la marge à gauche en fonction de la modif de la colonne principale, sinon ça va se chevaucher ou se bousculer. (par ex si on a ajouté 40px aux posts, gauche = 587)

    Mais attention, il y a un motif en fond de page :

    #wrap {
    background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;

    et ce motif détermine le grisé de fond de colonne…
    Il faut donc copier cette image, la modifier dans un éditeur d’image pour avoir le grisé de la bonne largeur, le mettre qq part sur son site et changer le lien pour appeler cette nouvelle image, soit supprimer la ligne pour avoir un fond tout gris nettement moins joli…

    Donc pas de modif simple à mettre en œuvre. Il y a peut-être une astuce, mais je ne vois pas ; s’il y a  des spécialistes CSS dans l’assistance…

    Attention d’autre part à la question de la modif de la taille de l’image soulevée par quelques experts du photoblog « un été 06 », mouliné par Blogger : les images dans les posts sont réduites à 400 pixels de large, et leur agrandissement forcé dans les posts peut augmenter la visibilité des pixels (effet variable selon la photo).

  8. merci beaucoup pour toutes ces informations. Effectivement si je change le chiffre à un endroit, ça me décale tout.

    en attendant de trouver la solution je vais devoir me contenter du modèle original.

    🙂

  9. Bonjour, comme je débute sur le net et que je ne suis pas très courageux j’ai créé un photoblog avec blogger d’autant plus facilement que j’utilise Picasa 2.Actuellement mon premier souci est de modifier l’ordre des photos envoyée sur le blog.Existe-t-il une solution?Si quelqu’un peut m’aider d’avance merci. dd

  10. Dans l’administration du blog, onglet Envoi > Modifier > en bas du cartouche de saisie de texte > Options… > Modifier l’heure et la date

    En jouant avec ça, ça doit être possible…

  11. Merci Philippe ça marche je n’ai plus qu’a tout recaser dans le bon ordre.

  12. Bonjour,

    merci pour tous ces conseils !
    moi je voudrais savoir ce qu’on peut rajouter à blogger. Ecrire un texte en couleurs nuancées par exemple… pour plus d’effet… changer le pointeur ou des trucs comme ça, voir même mettre des textes sur un fond d’image… merci

  13. Dans Blogger, la partie édition de texte permet une mise en page avec choix de la taille de police, couleurs, etc. Mais c’est à peu près tout ce que l’on peut personnaliser (avec la mise en page du modèle bien entendu). C’est un système rigide — ce qui fait qu’il est assez robuste et facile d’accès.

    Le mieux est d’ouvrir un compte et de créer un blog test… c’est gratuit et ça se fait en 5 minutes !

  14. Bonjour et merci pour ta patience Philippe. Encore un détail, dans blogger je n’arrive pas a faire passer les lettres accentuées alors si tu as une idée ?

  15. Il faut s’assurer que l’encodage de la page du modèle est compatible avec les accents : menu Paramètres > Mise en forme > sélectionner UTF8.

    Par contre, les accents sont mal gérés dans les mails envoyés par Blogger…

  16. Re-merci Philippe ça a marché.Maintenant je vais me replonger dans le blog photo en un week end.

  17. Bonsoir philippe, j’ai une bannière en jpg (400 x 60), comment est il possible de l’intégrer à ma page ? j’ai changé de modèle depuis l’autre jour, maintenant j’ai « Minima ».

    Merci pour toutes ces précieuses informations et bonne soirée

  18. 🙂

  19. Là il faut entrer dans le html…

    Le plus simple est de repérer une image dans le modèle et de copier le code, le coller à l’endroit désiré, et de changer la référence de l’image. Si il n’y a pas d’image dans le modèle, aller sur une page web quelconque qui contient une bannière, et afficher le code de la page avec son navigateur.

    Comme le blog est hébergé chez Blogger, faudra que cette image soit stockée quelque part sur le web ( par exemple chez http://www.flickr.com, ou sur son espace perso chez son hébergeur), et mettre le lien vers l’image en référence.

  20. Bonsoir philippe, je voudrai ajouter une bannière en jpg (750 x 115), Je ne sais pas comment l’intégrer sur mon blog!!!! Pouvez vous me donner quelques conseils, je vous remercie…

    bonne soirée

    Nicolas

  21. Bonjour …

    J’ai mon blog chez blogger depuis un petit bout de temps … et je voudrai que sur toutes les pages, dans la colonne de droite s’affichent les 5 derniers commentaires …

    Aurais tu une petite idée de comment faire ?

    Je seche !

    Merci d’avance

  22. @ nicolas :
    voir la réponse au-dessus de la question 😉

    @ terry :
    je ne crois pas que ce soit possible avec Blogger, qui est beaucoup plus limité que les autres systèmes de blogs.

  23. Bonjour ami!
    Je cherche désespéremment à ce que mes photos soient plus grandes que tel que tu les vois mais je n’arrive pas!
    Comment et ou puis-je intervenir?
    Si tu peux jeter un oeil sur mon css…
    HEEELP
    Mille merci
    Seba

  24. Hélas, chez Blogger, on a peu de prise sur la taille des photos, et celles-ci doivent être au format « grandes ». J’avais essayé avec le photoblog de l’été d’agrandir le format en modifiant le code, mais on obtenait souvent une forte pixelisation de l’image (car c’était la vignette « grande » qui était agrandie dans la page, et pas l’image qui était chargée au bon format.

    Dans le code de la page, on trouve :
    .post img { (image dans l’article)
    padding:30px; (espace autour : 30 pixels)
    border:0px solid #ddd; (filet gris de 0 pixel = pas de filet!)
    }

    il faut ajouter
    width:500px; (largeur = 500px)
    par exemple

    post img {
    padding:30px;
    border:0px solid #ddd;
    width:500px;
    }

    j’ai essayé, c’est pas génial mais ça passe. Un conseil pour limiter les dégats : partir d’une image le moins compressée possible (celle qu’on envoie à blogger) pour ne pas multiplier les stades de pixelisation.

  25. je débute sur blogger et je ne sais pas comment faire pour changer le fond (pas l’arrière plan) peux-tu m’aider ?
    modèle : sribe

  26. Ca se passe dans la rubrique Layout, le fond style vieux papier est divisé en 3 parties : top, bottom, et main qui est répété sur la heuteur de la partie principale de la page.

    3 images sont appelées (bg_paper…), et c’est ce qu’il faut changer, sans oublier de stocker ces images quelque part car celles-ci sont stockées chez Blogger.

    #main-top {
    width:700px;
    height:49px;
    background:#FFF3DB url(« http://www.blogblog.com/scribe/bg_paper_top.jpg ») no-repeat top left;
    margin:0;padding:0;
    display:block;
    }
    #main-bot {
    width:700px;
    height:81px;
    background:#FFF3DB url(« http://www.blogblog.com/scribe/bg_paper_bot.jpg ») no-repeat top left;
    margin:0;
    padding:0;
    display:block;
    }
    #main-content {
    width:700px;
    background:#FFF3DB url(« http://www.blogblog.com/scribe/bg_paper_mid.jpg ») repeat-y;
    margin:0;
    text-align:left;
    display:block;
    }

  27. Je débute dans blogger moi aussi, et j’ai un petit problème: j’ai mis une bannière à la place du titre, mais ce dernier apparaît par dessus. Comment faire pour arragner ça?
    Merci d’avance^^

  28. Dans le code de la page, il faut supprimer les lignes après
    div id= »header »

    #h1 id= »blog-title »#
    #ItemPage##a href= »#$BlogURL$# »##/ItemPage#
    #$BlogTitle$#
    #ItemPage##/a##/ItemPage#
    #/h1#
    #p id= »description »##$BlogDescription$##/p#

    et laisser
    #/div#

    Elles appellent le titre du blog et son sous-titre. Mais ça peut dépendre du modèle utilisé.
    (j’ai remplacé les > par # pour un pb d’affichage dans ce commentaire)

  29. Un petit bonjour en passant pour te remercier pour ta réponse (concernant les derniers commentaires … je cherche toujours !) …
    J’en profite pour indiquer que je suis passé en version beta de blogger … et que c’est beaucoup plus simple pour changer le modele et agencer ses pages.
    Le gros plus : le rajout de labels, qui permet de classer automatiquement ses articles 🙂
    A bientôt
    Terry

  30. Philippe,
    je reviens sur ce que vous avez écrit plus haut, amis sans donner plus de détails : « Un plus de Blogger : vous pouvez le paramétrer pour que la publication se fasse sur votre propre nom de domaine, et que tout soit sur votre serveur, sans avoir à installer de base de données. » Je ne comprends pas bien cette phrase : cela signifie-t-il que l’on peut intégrer blogger dans son site, tout comme cela a été fait (indirectement) avec pixelpost, ou alors que seul le nom du domaine est conservé (sans « xxxx.blogspot.com »).

    j’ai commencé à créer « pour voir » un blog sur blogger et c’est vrai que quand on commence, cette solution est hyper simple.
    merci de vos réponses

  31. On peut « déporter » Blogger sur son propre espace web et nom de domaine. Par exemple, le photoblog « un été 06 » était réalisé avec Blogger, on se connectait à Blogger pour le mettre à jour, mais les pages étaient envoyées sur le serveur de photofloue.net/ete06, et les fichiers conservés sur le serveur de photofloue. C’est une solution intéressante quand on veut gérer son nom de domaine propre et ne pas avoir une adresse xxx.blogspot.com. Par contre, la nouvelle version de Blogger apporte un certain nombre de fonctionnalités qui ne seront pas disponibles pour les sites déportés, comme la gestion de tags/mots-clefs. Blogger est il est vrai la solution la plus simple, mais il faut savoir rester simple — on a testé en grandeur réelle les limites avec « un été 06 » : c’est très difficile de circuler dans l’historique des posts / articles, et la gestion des photos ne permet pas de publier directement des photos de taille supérieure à 400 pixels. Donc si vous avez un blog pas extrèmement visuel, et sur lequel les articles sont périssables, c’est très bien. Si ce n’est pas le cas, voyez du côté de WordPress.com qui offre également une solution gratuite et hébergée.

  32. Une question surement idiote : quand je télécharge des photos, comment faire pour qu’elle apparaissent les unes en dessous des autres ? En effet, à chaque ajout de photo, celle-ci vient se mettre bêtement au dessus des autres…

    Merci.

  33. C’est le principe fondateur du blog : l’article le plus récent apparaît en premier.

  34. Bonjour! et merci pour tous ces trucs!
    moi aussi je debute et jai limpression qu’avec un mac, on n’a pas les memes fonctionnalites…les images ne s’afichent pas dans le « brouillon » du post, seulement leur code…et il n’y a pas d’editeur de texte pour les posts.
    Mais la vraie question est: je voudrais mettre une photo sous mon titre…on fait comment?
    mille mercis!

  35. Axelle,
    En effet, il y a des trucs qui s’affichent pas avec Safari. Il est préférable d’utiliser Firefox.

    Pour mettre une image sous le titre du photoblog, il faut aller dans l’onglet Modèle et insérer du code html avec un lien vers l’image :

    Faire défiler jusqu’à la balise
    * Header
    ———–

    En dessous, on lit quelque chose comme ça (ça dépend du modèle de base) :

    @media all {
      #header {
        width:660px;
        margin:0 auto 10px;
        border:1px solid #333;
        }

    Il faut ajouter une ligne précisant l’image à mettre en arrière-plan, avec la ligne qui commence par background et qui finit par ;

    @media all {
      #header {
        width:660px;
        margin:0 auto 10px;
        border:1px solid #333;
    background: url(http://photos1.blogger.com/blogger/164/2362/1600/foretfloue.jpg) repeat;
        }

    dans la parenthèse après url, il y a le lien vers l’endroit du web où est stocké la photo. Ici, pour faire simple, j’ai choisi une photo publiée dans le blog, cliqué dessus pour qu’elle s’affiche toute seule dans le navigateur, copié l’adresse qui s’affiche dans la barre de navigation, et collé dans la parenthèse après url.

    Le résultat est là : clic !

    Il est possible qu’il faille modifier les couleurs du titre. Ca se fait un peu plus bas dans #blog-title, ligne color. Remplacer #ccc par une couleur sous forme de référence #000000 (voir ici les références)

  36. je voudrai supprimer mon blog ,COMMENT JE FAIT ??????

  37. Il suffit d’aller dans l’interface d’administration, il y a une option pour supprimer le blog.

  38. Bonjour Philippe , je souhaiterais élargir la colonne centrale de notre blog , mais je ne trouve pas dans le code html , ce qu il faut que je change , pourriez vous m’aider s’il vous plait ? je vous remercie
    Martine
    les4rouesdeletangcarret.blogspot.com

  39. Martine,
    Le modèle choisi est compliqué pour ce genre de chose : il y a plusieurs éléments graphiques (haut, milieu et bas du papier « vieilli », filets de séparation…) qu’il faudrait reprendre dans Photoshop pour les adapter à une nouvelle largeur.

    Il serait préférable de faire des essais avec un autre modèle plus simple — d’autant plus que celui-ci a l’air de buguer.

    Ensuite, il faut repérer les lignes à changer (cf. 6ème commentaire sur cette page). Gardez à chaque fois une copie du code de la page à chaque stade de modification pour pouvoir revenir en arrière (copier coller dans un traitement de texte simple comme Notepad — pas word).

  40. Merci , Philippe pour votre réponse , elle m’évitera de faire de nouvelles bêtises . En effet , nous avions initialement choisit le modèle Dots mais je n ai pas modifié ce qu il fallait et c’est la bagaille sur le blog maintenant si je reviens a ce modele !
    Voila , nous ne manquons pas d’idées mais je n ai pas hélas la maitrise de la technique .
    Merci encore de votre disponibilité
    Martine

  41. bonjour,

    peut on limiter l’acces au blog par un identifiant et un mot de passe?

    sinon pouvez vous me conseiller un photoblog permettant fonction

    merci

    @ bientot

  42. Bonjour unregistred 😉

    si on a contrôle du serveur surlequel se trouve le blog, il faut créer un fichier .htaccess qui déclenche une demande de mot de passe (faire recherche web sur ce terme, les instructions sont faciles à trouver).

    Si c’est sur Blogger, on peut limiter l’accès, mais il faut inviter individuellement les visiteurs, qui devront se créer un compte Blogger à leur tour pour accéder au blog.

    Pour un blog WordPress, le plugin wp-password fait tout le boulot.

  43. bonjour philippe,
    je souhaiterais élargir la colonne centrale de mon blog egalement, mais je m’y retrouve pas dans le code html, j’ai choisi le model le plus simple noir comme ton blog exemple, photofloue. j’aimerai en arriver la déja,
    pourriez vous m’aider s’il vous plait ?
    quelles lignes sont a remplacer?
    voici un modèle trouvé dont ( j’espère ) pouvoir reussir à me rapprocher le plus, http://kunstformen.blogspot.com/
    c’est assez réussi pour la grande place visuelle
    je vous remercie d’avance
    basile

  44. Bonjour,
    J’ai un petit problème que vous pourriez peut-être m’expliquer.
    Pourquoi un clic sur la photo n’agrandit pas systématiquement cette dernière. Ca fonctionne quelques fois, mais pas toujours.

    J’ai essayé des photos réduite à 1OOO en largeur. ça ne marche pas.
    J’ai fait un essai à 1250 : hier ça fonctionnait, aujourd’hui non !
    Faut-il que je garde la taille originale ?
    Merci de votre aide.
    Christineeeee

  45. Vu sur votre blog, en effet, c’est curieux, certaines photos dans un même article s’ouvrent en plus grand, d’autres non. Je ne vois pas pourquoi… De toutes façons, il est préférable de ne pas envoyer les images en taille originale, elles seraient inaffichables lors de l’agrandissement (éventuel).

  46. basile,
    le modèle du site en question est bien le même (Minima). Pour récupérer les modifs du modèle, il faut faire « afficher le code source » dans votre navigateur. On lit dans le code deux éléments : les lignes de code CSS qui stylent la page, mais ce n’est pas suffisant car le modèle html a également été modifié : il a par exemple ajouté des div comme « outer-wrapper », « main-wrapper », etc. qu’on retouve dans le code html.

    Ce n’est pas très compliqué à reconstituer, mais il ne faut pas avoir peur de plonger dans le code.

    En faisant plus simple, repérez dans les CSS :
    ____
    /* Content
    ———————————————– */
    @media all {
    #content {
    width:660px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
    #main {
    width:410px;
    float:left;
    }
    #sidebar {
    width:220px;
    float:right;
    }
    ______
    il faut changer les largeurs (width)
    essayez par exemple :
    @media all {
    #content {
    width:960px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
    #main {
    width:700px;
    float:left;
    }
    #sidebar {
    width:220px;
    float:right;
    }
    }
    ________
    Pour avoir 700 pix en largeur pour la photo, sur une page de 960 pix de large.
    Pour la cohérence, changez aussi la largeur de l’entête (header) à 960 pix, quelques lignes au-dessus.

  47. Bonjour. J’ai un soucis. J’aimerai mettre un arrière plan avec mon blogspot mais j’ai suivis beaucoup de conseil et ca ne marche toujours pas. J’ai mis l’url de mon image dans le code html ( a l’endroit ou l’on m’a indiquer ) mais l’image s’affiche juste sur le coté. J’ai le modèle minima. Voilà j’espère que vous pourrez m’aider. 🙂

    Merci d’avance.
    http://27th-july.blogspot.com/

    Lisa.R

  48. Bonjour Lisa,

    Il suffit de remplacer :
    background-repeat:repeat-y;
    par
    background-repeat:repeat;

    et hop.

    (le repeat-y indique qu’il faut reproduire l’image verticalement, repeat-x ce serait horizontalement, repeat tout court fait les deux)

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*