Il est évident que réduire le poids d'une image consiste à réduire un peu sa qualité mais parfois, il en est indispensable. Ici, sur Eklablog, les images ne peuvent pas dépasser 400 ko.

Je vais vous montrer comment réduire le poids d'une image avec photofiltre. Ouvrez photofiltre et l'image en question. (J'en ai pris une au pif, bien lourde pour vous montrer)

 

Après avoir ouvert l'image, allez dans fichier et enregistrer sous. Choisissez là où vous voulez l'enregistrer (moi je met toujours tout sur le bureau et après je range, c'est juste pour ne pas la perdre.)

 

Une nouvelle fenêtre apparaît. C'est ici que vous pouvez régler le poids de votre image. Là où j'ai entouré en rouge, montre le poids actuel de l'image. Vous pouvez faire bouger le curseur pour régler le poids. Il faut juste que le chiffre ne dépasse pas 400. Ensuite cliquez sur ok et c'est fini votre image à un poids parfait pour être mis sur Ekla' :)

 

 

 

Par évidence, il existe plusieurs moyens de réduire le poids d'une image et avec d'autres logiciels. J'ai juste pris le plus simple et le plus pratique.

Un code CSS permet aux blogs d'être personnalisés selon vos goûts.

Pour cela, il suffit d'aller dans "Apparence", qui est tout en haut, puis "Modifier le thème" et aller dans "CSS".

Chaque code CSS a une ponctuation importante. Si vous effacez un point ou une virgule, le code ne fonctionne pas ou devient un autre code.

Un code CSS comporte un sélecteur, des propriétés et des valeurs. Je m'explique :

Le sélecteur, c'est l'élément sur lequel vous voulez y mettre des effets, modifier : ça peut être une image, un titre, le texte, des effets etc.

Les propriétés sont les noms des effets appliqués sur le sélecteur. (ce sont les bordures, les ombres, les tailles etc) Ils sont en anglais.

Et pour finir, les valeurs peuvent êtres modifiées selon ce que l'on veux (des chiffres en bref) Par exemple, on peut changer les tailles par des valeurs, en y mettant 70px par exemple, pour les ombres on change les valeurs pour les mettre plus ou moins flou etc.

 

En gros, ça ressemble à ceci :

sélecteur {propriété: valeur;

           propriété: valeur;

             }

Tout est a remplacer dans un code =)

 

Pour avoir des coins arrondis sur votre blog, il suffit de copier/coller ce code dans l'emplacement CSS.

En bleu, il faut remplacer le mot "sélecteur" par un code sélecteur (voir la liste des codes sélecteurs).

En rouge, remplacez les X et mettez des valeurs pour avoir des coins plus ou moins arrondis.

 

 

Sélecteur {border-radius: Xpx;

          -moz-border-radius: Xpx;

          -webkit-border-radius: Xpx}

 Ici, je vous présente la liste des codes sélecteurs. Dans certains tutos pour les codes CSS par exemple, je mettrais le mot "sélecteur" en bleu (pour que vous puissiez le remarquer et le changer avec le code sélecteur que vous voulez).

Ce qui est en rouge est a enlever je précise. Copiez uniquement le début puis collez le dans les autres codes où il y a écrit "sélecteur" en bleu.

 

 Images : 

img {propriété: valeur;}

 

Article :

.module_contenu {propriété: valeur;}

 

Article titre :

.module_titre {propriété: valeur;}

 

Article bas :

#module_bottom {propriété: valeur;}

 

 Dernier Visiteur :

 .module_menu_type_lastvisitors {propriété: valeur;}

 

Commentaire :

 .comment_normal {propriété: valeur;}

 

Commentaire auteur :

 .comment_admin {propriété: valeur;}

 

Commentaire avatar :

 .commentavatar {propriété: valeur;}

 

Barre d'outil :

#menubar {propriété: valeur;}

 

Fond de fenêtre :

 #body {propriété: valeur;}

 

Fenêtre d'information :

.window {propriété: valeur;}

 

Fond de page :

 #background {propriété: valeur;}

 

Header :

 #header {propriété: valeur;}

 

Menu contenu :

 module_menu_contenu_block {propriété: valeur;}

 

Pied de page :

#footer {propriété: valeur;}

 

Menu gauche :

 #menu1 {propriété: valeur;}

 

Menu droit :

 #menu2 {propriété: valeur;}

 

Menu titre :

 .module_menu_titre {propriété: valeur;}

 

Menu de l'en tête :

 #menu {propriété: valeur;}

 

En survolant les images, une luminosité apparaît au niveau des contours, grâce au code ci dessous :

En rouge, c'est la couleur que vous pouvez changer.

En vert, les valeurs pour régler la luminosité, son intensité, sa largeur, son flou etc.

En bleu, il faut remplacer le mot sélecteur par un code sélecteur (voir la liste de tous les codes sélecteurs. N'oubliez pas qu'il faut enlever {propriete : valeur;} )

 

 

sélecteur img:hover{
  opacity: 1;
  -webkit-box-shadow: 0px 0px 15px #fff;
  box-shadow: 0px 0px 50px #fff;
  }​