Un photoblog chez Blogger

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.

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

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…

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 !

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…

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.

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

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.

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

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)

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.

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

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)

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

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

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.

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

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.