Modifier la couleur ou l'image de fond des posts blogger

Voici un ou deux "tutos" (suite à quelques demandes en comments).

Modifier le fond des messages (tuto réalisé avec le modèle: minima dark, pour nini ;-))

La modification n'est pas difficile du tout mais je vais vous donner une astuce supplémentaire pour que ce soit plus présentable.

D'abord changer le fond.

• Aller à l'onglet "Modèle"
• Puis "Modifier le code html"
• Trouver la ligne: #main-wrapper

Vous aurez normalement ceci:
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-
...

Modifier en rajoutant la propriété: background: rgb(255,255,255); ce qui donne au final:
#main-wrapper {background: rgb(255,255,255);
width: 410px;
float: left;
word-wrap: break-
...

Si vous voulez insérer une image utilisez: background-image: url(http://adresse_de_votre_image);

Astuce.
Avec cette modification, le texte de vos messages est collés aux bords de la colonne main-wrapper. Ce n'est pas très propre aussi on va ajouter une propriété padding: 15px; à main-wrapper. Ce qui donne:
#main-wrapper {background: rgb(255,255,255);
padding: 15px;
width: 410px;
float: left;
word-wrap: break-
...
Evidemment vous donnez à padding la valeur que vous souhaitez (vérifier bien l'apparence de votre blog sous Internet explorer après cette modification ;-).

- - - - - - - - - - -

Centrer les images (tuto réalisé avec harbor, pour éric day ;-))

C'est un principe général en html quand on veut centrer un élément, il faut deux choses:

• Un bloc de largeur fixe par exemple img{width: 70px;}
• Et des marges de automatiques img{width: 70px; margin: auto;}

Avec le tuto harbor il faudra rajouter (dans "modifier le code html"),
Astuce. pour vous y retrouver ajouter à la suite de la section:
#sidebar-wrapper {
width:32%;
float:left;
...
Ajouter donc cette partie de code:
#sidebar-wrapper img {margin: auto;}
Vous n'avez pas besoin de spécifier de largeur fixe car blogger le fait automatiquement quand vous ajoutez une image.

Pour le footer ce sera la même chose, il vous faudra trouver les sections:
#footer-wrapper et rajouter #footer-wrapper img {...}
Ou la section .post-footer et rajouter .post-footer img {...}

là je vous laisse essayer (laisser la bonne formule en commentaire à la limite ;-)
J'espère que ça répond bien aux questions de nini et éric :-/

Bon Réveillon de fin d'année et bon début 2007 à toutes et à tous.

++

   

Interface de connexion google dans blogger - le box de connection google

Connectez vous à Google

En me connectant aujourd'hui à blogger j'ai eu la surprise (peut être vous aussi ?) de boir le box habituel de google comme interface (voir screen ci dessous).


C'est surement plus simple pour eux de gérer de cette manière, mais l'intégration est pas très jolie du coup.

Cela augure peut être d'une refonte de l'interface blogger (?). Ca serait pas un mal pour moi, je trouve les couleurs plutôt: bof!! :-(

++

   

Modifier l'image de fond du header - Arriere plan du titre du blog

Modifier l'apparence de la bannière du blog blogger

Ce tuto est réalisé sur la base du modèle: rounders2

Introduction (à lire attentivement)
Comme vous pouvez le voir sur l'image ci dessous, les coins des cadres qui organisent ce modèle de blog sont arrondis.


Pour obtenir cet effet de style, on joue en css (par défaut dans le code html sur les blogs blogger) avec des images dont les bords sont arrondis. Le bandeau couleur bordeau ci dessus (appelé header) est contenu en html dans une balise [div] (je vous rappelle que je rempalce les signes < ... > par des crochets [ ... ] ) . Par défaut en html une balise div a des coins en angle droit. L'astuce consiste a placer une images aux coins arrondis en fond de balise div, dans le cas du modèle rounders il y a 2 images, une en haut de la div principale et une placé dans une autre div en bas.
Si je n'ai pas été assez clair n'hésitez pas à demander des précisions en commentaires ;-)


Remplacer le fond du header
Pour modifier l'image de fond ce n'est pas bien difficile: D'abord travailler votre image et ajustez ces dimensions à la taille de votre header (par défaut la largeur est défini dans la section outer-wrapper à 740px, je vous conseille de travailler une image de 740px mais laissez des bordures "neutres" de 10 px de chaque côté. Elles risquent d'être invisibles sur certains navigateurs. il vous faudra certainement agrandir ou réduire ensuite pour obtenir un bon résultat).
Quand votre image est prête, il vous faut la charger dans blogger. Pour cela je vous conseille d'ouvrir un post nommé "images" et enregistrez y votre bandeau.
Astuce: Quand vous publiez un message, vous avez en bas à gauche de l'éditeur un petit lien "options" cliquez dessus vous verrez à droite des options des champs dates et heures. Vous pouvez modifier la date et mettre une date ancienne, cela ne fera pas apparaitre votre message en page d'accueil, mais vous aurez créer un fichier de stockage (des images dans ce cas) ;-).
Voici le lien vers mon post (publiez il y a un mois environ et que j'ai anti-daté en aout images gpooo )
Une fois placez votre bandeau, allez à :

• Onglet modifier le code html
• et trouvez la section [img src=
• le code a trouver ressemble à peu de chose près à cela:
• -http://2.bp.blogspot.com/_cKfN28W6lv8/RYT2Uew... 8w/s320/le_nom_de_votre_image.png

copiez la partie qui va de http://.....à .png (ou .jpg ou .gif)
Enregistrez votre message.

Toujours sur la page de gestion de votre blog. Allez à:

• Onglet Modèle
• Modifier le code html
• Trouvez la section:

/ * Blog Header
----------------------------------------------- * /
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Dans cette partie il va falloir modifier la ligne:

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat

comme suit:

#header-wrapper {
background:$titleBgColor url("ICI_Collez_l'adresse_de_votre_image") repeat-y;

Je vous rappelle que l'on avait copier l'adresse de l'image, lors de la création du post spécifique intitulé: "images".

Il nous reste une opération a effectuer toujours dans le code html. Il faut éliminer l'image basse du header
Pour cela modifier dans le code html, la section:

#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

modifier le code comme suit:

#header {
background: none;
padding:0 15px 8px;
}

Enregistrez vos modifications et visualisez, ça devrait marcher ;-).

Je n'ai pas parler de la hauteur de l'image à sa création et vous aurez peut être remarquez qu'on la fait se répéter en y (repeat-y) dans le code.
En fait la hauteur du bloc header n'est pas défini dans le modèle. Si votre titre de blog est très long les retours à la ligne automatique vont étirer le bloc en hauteur.
Je ne peux vous donner de meilleur conseil que d'essayer (la bidouille quoi) ou bien de définir une hauteur dans la section:

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
height: 80px;
}

Evidemment j'ai mis 80px au hasard vous attribuez la hauteur que vous souhaitez.

Sur le thème Rounders je vous conseille de faire des coins arrondis à votre images pour que l'ensemble reste cohérent. Par contre si l'image doit se répéter (titre de blog long) le rendu ne sera pas terrible, il faudra surement agrandir votre image en hauteur dans ce cas.

Voilà la manoeuvre n'étant pas très simple, n'hésitez pas à demander des préscisions en comments
++ ;-)

Tuto réalisé avec le modèle de blog: Rounders2

   

Aide blogger - Inserer une video dans ses messages

Poster une vidéo sur son blog

Bon ça n'a pas été très simple à mettre en place, mais on dirait que ça marche, en tous cas ça devrait marcher si tous se passe bien chez Youtube.

Le meilleur sytème d'insertion de vidéo dans un blog blogger semble bien être celui ci. En effet, avec le rachat de youtube par google il y a fort à parier que les comptes google et Youtube seront bientôt joints. Cela facilitera la gestion de l'ensemble.

Bien, vous avez ouvert votre compte Youtube, connectez vous et uploader votre video. A la fin du téléchargement vous aurez en bas de page un bout de code tout prêt à copier et coller dans le code html de votre message:

• Onglet "modifier le code html"
• coller le code copier chez youtube

A NOTER
Il faut un temps entre l'upload chez youtube et la mise à disposition de la video. Du coup au moment de la rédaction la mienne n'était pas active. Je remet le code ci dessous et quand la video sera dispo vous devriez la page d'accueil de gpooo, défiler devant vos yeux ébahis :-D

@ bientôt, j'espère que ça va marcher ;-)



A NOTER Bis
Il a fallu que je réduise la taille de [embed width="600"... de 600 à 400, dans le code fourni par youtube, pour que ça rentre dans ma colonne de texte. Il y a peut être un paramétrage de la dimension possible chez youtube (à regarder je découvre leurs services.

++

   

Structure d'une page pour bien referencer son blog sur google

Optimiser la structure de ses pages Web

Dans la série être premier sur google voici un petit billet de conseils pour optimiser la structure d'une page web en vue d'un bon positionnement sur les moteurs de recherche.
Voir aussi Référencer son blog .



Construire une page Web Solide

Si vous utilisez un blog de plateforme (comme blogger), vous n'aurez pas trop le loisir de bidouiller la partie de votre code située entre les balises [html] et [/html] (ce point fera l'objet d'un prochain article pour les bloggers)
rappel: je remplace les signes <> par des crochets [ ... ] sinon blogger les considère comme des balises html

Si vous éditez vous même votre site web par contre, vous devez prendre soin de bien renseigner cette partie. Nous verrons plus tard comment optimiser pour ses mots clés. Par contre attardons nous sur les balises importantes à insérer pour que les navigateurs et les robots lisent bien votre page:

La première le doctype:
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"] elle permet aux navigateurs d'aller chercher un document où sont stockés les informations relatives au codage de votre page. Lire doctype

• D'abord les en têtes classique [html] [head]


• [meta http-equiv="Content-Language" content="text/html; charset=utf-8" /] Vous pouvez bien sûr spécifier un autre charset, mais il est assez important de placer ce balisage immédiatement après [head]. Cela permet au navigateur de comprendre quels caractères il va rencontrer dans votre code et de les interprèter (surtout important pour les lettres accentués é, è ê, à,...


• Viennent ensuite les balises [title]... [/title] [meta name="description".../] et [meta name="keywords".../]


• Puis [meta http-equiv="Content-Language" content"fr" /] Qui compte pour bien signifier, surtout aux moteurs, à quel public s'adresse votre page (ici francophone)


• Une optionnel [meta name="msnbot" content="noodp" /] Qui peut servir à ne pas voir afficher la description donné par l'annuaire DMOZ (annuaire de référence, pour les moteurs du moins ;-)


• Placez ensuite (si besoin) vos balise de style et fremez [/head]

Voilà, nos fondations sont à présent solides, attaquons les murs


La partie [body] corps de la page

Le plat préféré des moteurs à l'heure actuelle se trouve juste là. Au tout début de [body]. C'est une partie de votre code à travailler tout particulièrement si vous souhaitez que vos pages aient du poids dans les recherches.
Pour bien travailler (au corps :-D ) cette partie il faut la structurer et comme cette page aura des voisines proches, il faut réfléchir à une structure qui permettent de différencier chaque fichier de votre site.

Une structure pas optimisé par ex. ce pourrait être:
[body] lien vers - Menu1, lien vers - Menu2, lien vers - Menu3,...
Evidemment quand il rencontre toujours le même code inlassablement le moteur va se dire tient j'ai déjà vu ça cette page existe déjà... Si votre contenu textuel est pauvre (peu de mots) il y a risque de duplicate content .

Le début de [body] est en plus une partie jugé "importante" par les moteurs (à la date de rédaction), par opposition au "footer" (bas de page) où les webmasters ont pris l'habitude de mettre les liens partenaires. Cette partie de code (cf.la fin) est très déprécié, vos mots clés auront certainement plus d'importance si vous les insérez en "haut" dans le code source.

Structurer sa page c'est aussi utiliser les bonnes balise html. Par exemple en début de page on s'attend à trouver (comme dans la presse écrite) le titre. La balise html pour signifier un titre de page est: [h1]Mon Titre de Page avec des mots clés[/h1], par extension les sous titre son notés: [h2]...[/h2], [hn,...[/hn],..., [h6]...[/h6]
Un paragraphe c'est [p]...[/p] etc....
Je vous conseille de rechercher sur le net ou dans la littérature (html4 pour les nuls par ex.) pour comprendre le bon usage de chaque balise.

Un autre paramètre est important les liens sortants. Lorsque vous rédigez une page web, documentez vous sur les sitez intéressants qui parlent du même thème. Et n'hésitez pas à leur "offrir" un lien de qualité dans votre page. Ce type de lien bénéficiera à la page qui est pointé par le lien, mais aussi à la votre (qui émet le lien). les moteurs parcourent le web grâce aux liens hypertexte qui leurs permettent de passer d'une page à l'autre. Eux comme vos visiteurs seront ravis d'avoir ,en un clic, accès à une page intéressante et complémentaire à la votre. Si vous craignez de perdre votre visiteur, vous pouvez toujours taguer le lien avec l'attribut target="_blank" , ce n'est pas terrible au niveau accessibilité mais votre visiteur peut revenir sans difficulté consulter votre article.
Ces liens peuvent aussi "dopper" une de vos pages qui parle du mêmes sujet, par ex: différentes formes de lien ;-)


Voilà quelques points à méditer quand vous concevez ou rédigez vos pages. Vous pouvez fermer [/body]
et [/html] (si si on l'a ouverte en haut ;-)

   

Un correcteur d'ortographe sur le Wysiwig de chez blogger

Corrigé l'orthographe de ses posts

L'éditeur wysiwyg de blogger vient de se doter d'un correcteur d'ortoggraphe


HUM!! je recommence...
L'éditeur wysiwyg de blogger vient de se doter d'un correcteur d'orthographe et apparemment il marche assez bien (c'est la moindre des choses vu la fote :-). tiens par contre pour "fote il ne me propose que:
Fonte - Forte - Dote-...

C'est moins bon là :-p. il ne tient visiblement pas compte du contexte. par contre je vais essayer un peu de SMS pour voir:
kr j croi c la il y a du boulo
Pas mal il me corrige "crois" et "boulot".

Pour activer le correcteur:

• Cliquez sur l'icône "ABC" en haut à côté de l'icône "ajouter une image"
• Le correcteur surligne en jaune les mots "louches"
• Cliquez une fois sur le mot, les propositions de correction apparaissent
• Cliquez sur la proposition que vous souhaitez utiliser.
  

C'est pas bien difficile, cette évolution (il ne me semble pas l'avoir vu auparavant) est bien agréable en tous cas.

Encore du bon pour blogger. ;-)

   

Aide Blogger - Aligner plus de deux images sur un post

Comment aligner plusieurs images sur blogger

Nous avions vu dans un post précédent, comment aligner les images sur votre blog avec l'attribut display: inline; dans le style css de votre page.
Cette technique marche aussi en ajoutant le même code dans le "code html" de votre message.


Sur le blog de démo de cette rubrique d'aide, vous pouvez voir ICI l'alignement de plusieurs images. Il n' y a que trois par ligne, car elles sont trop large. Le retour à la ligne se fait automatiquement, mais en les réduisant à l'extrème on pourrait toutes les afficher sur un même niveau.

Sur ce post donc je n'ai pas modifier le code CSS du Blog, je suis intervenu directement dans la définition du style de l'image.

• Faites (message modifier ou nouveau) et insérez une image
• Aller à "modifier le code html"
• Trouver la ligne: [img style="cursor: pointer; width: 115px; height: 123px; display: block;" src="http://photos1.blogger.com/x/blogger2/1...
• Et modifier là comme suit: [img style="cursor: pointer; width: 115px; height: 123px; display: inline;" src="http://photos1.blogger.com/x/blogger2/1...
• ! Attention ! Les signes <>
  

Tuto réalisé avec le modèle de blog: Son Moto

Créer une vignette sur blogger
Modifier la taille d'une image directement sur le panel d'édition du message


Sur le screen d'écran ci dessus vous verrez en agrandissant, que l'image qui a été inséré dans le post , possède des pognées de dimensionnement.
A l'aide de ces poignées vous pouvez agrandir ou réduire la taille de l'aperçu que vous insérez dans votre message.

• Pour activer ces poignées cliquez simplement sur l'image
• Pour réduire en hauteur prenez la poignée du centre en haut
• En largeur poignée du centre sur les côtés
• Pour réduire l'ensemble de l'image utilisé une des poignées des angles
  

En réduisant excessivement votre image vous obtenez une petite vignette discrète.

   

Aide blogger - Modifier la largeur des messages

Modifier la largeur des posts et de la barre latérale

Nous allons voir comment modifier les dimension d'une colonne texte ou barre de côté sur un blog bloger.
Dans la photo ci dessous, le fond de la page n'a pas été modifié volontairement, pour que vous visualisiez bien le résultat.



Comment procéder

Dans l'admistration de votre blog:

• Onglet: Modèle
• Rubrique: modifier le code html
• descendre dans le code html, jusqu'à voir:
• .../* Wrapper */
  
  #outer-wrapper {
  margin: 0 auto;
  border: 0;
  width: 752px;
  text-align: left;...}

Avec cette ligne (width: 752px;) vous pouvez jouer sur la largeur de votre colonne de texte, celle où son publié les posts blogger.
Attention à ne pas donner une largeur trop importante. Cela rendrait votre blog illisible (sans scroll) pour des visiteurs équipé en 800x600 (résolution écran).
ICI la référence est le pixel (px), mais vous pouvez aussi exprimer les dimensions en millimètre (mm) et quelques autres unités...

Pour modifier la largeur de la colonne latérale, toujours dans l'onglet modèle, modifier code html... Allez jusqu'à:

• #sidebar {
  width: 256px;
  float: right;
  color: $sidebarTextColor;
  word-wrap: break-word;...}

Ici aussi pensez à essayer votre mise en page avec une résolution d'écran 800x600. Vous aurez quelques surprises si vous mettez des valeurs trop importantes.

Tuto réalisé avec le modèle de blog: Son Moto