E-Commerce pour les Nuls

Plusieurs sites proposent des modèles de blog déjà tout faits. Certains sont gratuits, d'autres payants, mais le plus gros inconvénient c'est qu'ils sont habituellement difficilement personnalisables et qu'ils comportent des droits d'auteur, ce qui en restreint l'utilisation lorsqu'il s'agit d'un commerce électronique.

Voici comment personnaliser les modèles existants sur Blogger:

1. Débuter
2. Variable definitions (modifier les couleurs et les polices d'écriture)
3. Navbar (cacher/afficher la barre de navigation)
4. Définition des paramètres
5. Structure
   

Débuter

1. Choisir un modèle de base. J'ai choisi le modèle Rounders. Enregistrer le modèle.
   (Mise en page > Sélectionner un nouveau modèle > Choisir le troisième, Rounders)
2. Aller dans l'onglet Modifier le code HTML
   (Mise en page > Modifier le code HTML)
3. Le code HTML se trouvant dans la section Modifier le modèle contient deux sections; la section où les styles CSS sont présentés (l'apparence de la page, un peu comme) et celle du body (la structure, la partie visible par les utilisateurs)
4. Astuce: Pour retrouver facilement des bouts de code dans l'ensemble du code, appuyer sur CTRL-F et recherchez le bout de code désiré.

Variable definitions

Cette section défini les variables qui pourront être modifiées plus tard dans la section Polices et Couleurs. On peut ajouter des variables si nécessaire. Je suggère d'ajouter la variable suivante :

<Variable name="bgcolor" description="Background Color" type="color" default="#aba" value="#aba">

Navbar

Pour faire disparaitre la barre de navigation en haut de la page, trouvez le bout de code :

body {

et collez le bout de code :

#navbar-iframe {
   display: none !important;
}

Définition des paramètres 

• Polices et couleurs : Quand vous voyez un $ devant une variable, il s'agit d'une des variables qui a été définie plus haut dans Variable definitions. Il est donc possible de modifier le paramètre dans l'onglet Police et couleurs.

• body : L'apparence générale de la page


• Afin de suivre la logique des variables et de les rendre plus facilement modifiables par la suite, je recommande de remplacer


• la valeur du paramètre background pour la variable créée plus tôt:
  

    background:$bgcolor;

• tous les paramètres font (3) du body pour le paramètre:
  
  

  font:$bodyfont;



•  Les marges extérieures de la pages sont réglées par défaut à 0 pixels. Pour avoir une marge uniforme de 20 pixels par exemple, modifier le paramètre margin pour 20px.
  

  margin: 20px;

  Pour avoir une marge de 20 pixels en haut, 0 à droite, 5 en bas et 10 à gauche, on doit écrire:
  
  

  margin: 20px 0px 5px 10px;

• Le paramètre body devrait donc avoir l'air de:
  
  

  body {
    background:$bgcolor;
    margin:0px 7px 0px 7px;
    text-align:center;
    line-height: 1.5em;
    font:$bodyfont;
    color:$mainTextColor;
    }



•  Largeur de la page


• Les modèles de blog proposés par Blogger sont assez anciens et ont optimisés pour des ordinateurs dont la résolution était plus basse (800x600) que ceux d'aujourd'hui (1024x768 et plus). La largeur par défaut des modèles proposés est donc en conséquence d'un écran de 800 pixels de largeur au lieu de 1024 comme dans la plupart des cas aujourd'hui. Je recommande donc d'élargir votre page jusqu'à 970px.


• Trouvez les bouts de code #outer-wrapper et body#layout #outer-wrapper, et modifiez la largeur (width) pour 970px et 960px respectivement
  
  

  #outer-wrapper {
    width:970px;

• Il faut aussi modifier la largeur des autres boîtes. Ajustez comme bon vous semble la largeur des paramètres #main-wrap1, #main, #sidebar-wrap, .main .widget et .main .Blog. Personnellement, je recommande de régler #sidebar-wrap à 330px pour qu'une bannière publicitaire de 300px de large entre parfaitement dans la barre verticale de droite (300px plus des marges à gauche et à droite de 15px). Considérant l'espace entre les deux blocs, #main-wrap1 et #main doivent être de 625px, .main .widget de 608px et .main .Blog de 624px.


• Les coins ronds: Le modèle de départ avait des belles boîtes avec les coins ronds. Malheureusement, il n'existe pas de code qui appliquerait directement des coins arrondis aux boîtes, il faut le faire avec des images. Trois choix s'offrent alors à vous:


• Manière simple: Vous abandonnez les boîtes rondes


• Recherchez tous les fichiers GIF (recherchez .gif) et effacez les (17 au total).
  
  

  background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif")
  
  devient
  
  background:$mainBgColor url()



•  Plus complexe, plus longue mais relativement facile: 


• Recherchez tous les fichiers GIF, copiez l'adresse de l'image, 
• Enregistrez l'image sur votre ordinateur,
• Modifiez l'image pour qu'elle soit de la bonne grandeur/couleur
• Téléchargez les images sur un serveur, idéalement un service gratuit de photos en ligne (ex: Picasa)
• Remplacez l'adresse initiale de l'image par la nouvelle adresse


• Plus rapide mais pour utilisateurs un peu plus avancés:


• Personnellement, j'ai essayé la méthode proposée sur ce site (anglais) et ça a fonctionné très bien.


• Autres paramètres : L'essentiel des paramètres concernant la structure, les couleurs et les polices ont été personnalisés plus haut. Il ne reste qu'à modifier les autres éléments comme les marges (margin), le padding et les borders pour avoir un site complètement personnalisé.

Structure

Les paramètres CSS définis plus tôt servent à indiquer l'apparence des éléments dans la page. Maintenant, il faut définir où les éléments seront placés.

Pour ajouter des colonnes ou modifier considérablement à l'horizontale la structure du modèle de base, on doit avoir des notions un peu plus avancées de programmation. Nous devons nous en tenir à une structure plus ou moins comme celle du départ, c'est à dire en-tête, deux colonnes et pied de page.

Par contre, voici un petit truc bien simple pour contourner la structure un peu rigide du modèle de départ qui permettra d'ajouter des boîtes et des éléments à la verticale :

1. Se rendre dans la section
2. Chercher tous les bouts de code où il est écrit locked='true'
   
   

   <b:widget id="HTML1" locked="true" title="" type="HTML">

   et changer 'true' pour 'false'
   
   

   <b:widget id="HTML1" locked="false" title="" type="HTML">

3. Chercher tous les bouts de code où il est écrit maxwidgets=
   
   

   <b:section class="header" id="header" maxwidgets="1">

   si la valeur est basse (ex: 1), la modifier pour un nombre plus élevé
   
   

   <b:section class="header" id="header" maxwidgets="10">

4.  Chercher tous les bouts de code où il est écrit showaddelement='no'
   
   

   <b:section class="main" id="main" showaddelement="no">

   et changer 'no' pour 'yes'
   
   

   <b:section class='main' id='main' showaddelement='yes'>

Ces petites modifications bien simples vous permettront d'ajouter autant d'élément que vous désirez et de vous débarasser de sections que vous ne désirez pas.