Le visiteur ne le voit pas mais, les fichiers du blog, ceux qu'on met à disposition en téléchargement par exemple, sont rangés dans un gestionnaire comme celui qu'on trouve sur les ordinateurs. Jusqu'à présent, on ne voyait que le nom du fichier, maintenant on a un aperçu pour les images, on voit l'adresse du fichier, le nom du fichier et du dossier dans lequel il est rangé. C'est vraiment super.

Les toutes les news sont consultables à cette adresse :

http://www.eklablog.com/news-c1

Si vous voulez être au courant des nouveautés d'Eklablog,

J'ai passé du temps pour installer des jolies polices Google sur le blog et parfois, en copiant/collant du texte à partir d'un logiciel, mon texte ne prend pas la jolie police que j'ai mis un temps fou à trouver. Pour enlever la mise en forme, il faut d'abord passer en mode expert.

Sélectionnez le texte à modifier et clic sur le bouton Effacer la mise en forme.

Et c'est fait, votre texte prend la mise en forme par défaut que vous avez adoptée sur le blog.

Pour savoir comment installer une police Google, c'est ici : Utiliser une police Google

Mathoeufs découpés à la machine http://t.co/Y1TYrTenBi pic.twitter.com/1069W3hswU

Suite à un commentaire d'un gentil internaute, j'ai cherché comment insérer un tweet dans un article. Pour que ça marche, il faut que le javascript soit activé sur votre blog. Je vous rappelle, que cela est à manier avec précaution et que vous le faites à vos risques et périls.

Il faut commencer par aller sur Tweeter et récupérer le code du tweet.

Clic sur les 3 petits points ... au-dessous deu tweet > Insérer le Tweet

Une nouvelle fenêtre apparaît, il faut copier le code qui est déjà sélectionné en bleu. En décochant la case Inclure le média, on peut enlever la photo et ne garder que le texte du tweet.

Ensuite, on ouvre son article, on va dans l'éditeur de code source, au passage tout beau avec les couleurs depuis quelques jours !!!

Et colle le code :

Clic sur Ok pour valider > Publier

Et c'est finit, il  faut parfois quelques secondes pour que le tweet s'affiche correctement dans l'article. 

Cette manipulation suppose d'avoir fait activer le javascript sur votre blog. Sachez que le javascript est à manier avec beaucoup de précaution, son utilisation est à vos risques et périls.

 Se rendre sur le site https://www.google.com/fonts et faire son marché    , c'est à dire sélectionner quelques polices, 3 ou 4, c'est suffisant.

 Récupérer le code. 

Faire défiler la page jusqu'à la fenêtre avec le code, sélectionner l'onglet javascript et copier le code.

 Insérer le code dans votre blog. Pour cela, utiliser un module simple, éditez-le et clic sur l'icône code source , collez votre code dans la fenêtre. 

Enfin, il faut utiliser votre code pour qu'il modifie la police.

menu apparence > modifier le thème > ajouter du CSS

Voici ce que j'ai ajouté sur mon blog : 

/* Modif police titre */
H1
{font-family: 'Oregano', cursive;
font-size:24px;} 

/* Ombre du titre */
#module_titre_contenu, .module_titre_contenu a {text-shadow: 0px 2px 2px white;
}

/* modif police de tous les contenus */
.module_contenu_block {font-family: 'Handlee', latin; font-size:16px;}

.module_menu_contenu_block {font-family: 'Handlee', latin;
font-size:14px;} 

/* modif police titre du menu */
.module_menu_titre {font-family: 'Patrick Hand SC', latin; font-size:16px;}

Comme ça, maintenant vous connaissez les polices que j'utilise.

Merci à Paspasti sans qui je n'aurais jamais pu faire cet article. Si vous ne le connaissez pas, je vous recommande vivement son site : Le blog facile.

Pour faire la même chose sur Eklablog, il faut écrire le début de l'article dans le Chapô.

Ouvrez la fenêtre d'édition d'un article, clic sur l'onglet Chapô  et commencez à écrire le début de votre article, ou comme le suggère Eklablog un court résumé, puis revenez sur l'onglet article   pour saisir la suite.

Le fonctionnement de l'onglet Chapô est identique à celui de l'onglet Article, on peut y insérer du texte, des images, des liens etc.

Clic sur  dans le menu de la fenêtre d'édition.

 Le titre est facultatif, mais il est parfois utile de le compléter pour donner une information supplémentaire sur la destination du lien.

J'utilise la même image que pour l'article précédent, toujours disponible sur open clipart.

Pour insérer une image : > menu Ajouter une image 

> url de l'image (parce que ici mon image est sur internet)

Choisir un alignement : Gauche ou Droite. Par défaut cet alignement est flottant.

Et là, tadaaaaaaaaaaam, le texte est à 5 pixels de l'image.

Par contre, si vous cochez Aucun ou Centre, le texte est collé à l'image. Et pour le décoller, c'est compliqué.

En effet, pour modifier une image déjà présente dans l'article, il faut sélectionner l'image par un simple clic (gauche), puis menu Insérer / éditer une image.

Et là... mauvaise surprise, les possibilités de modifications sont limitées. En gros, on peut changer le nom ou la taille.

Si vous changer l'alignement, pour qu'il deviennent flottant à gauche ou à droite, la solution la plus simple est de cliquer sur Ajouter une image dans le menu, puis de recommencer le processus utilisé au début de l'article.

Autre solution passer par le code HTML. Voici notre image sans alignement avec la ligne de code correspondante : 

texte à côté de l'image

<p><img src="http://openclipart.org/image/800px/svg_to_png/17626/Peileppe_Castle.png" alt="" width="150" />texte &agrave; c&ocirc;t&eacute; de l'image</p>

  Voici maintenant l'image avec un alignement flottant à gauche et un décalage du texte à 5 pixels : 

texte à côté de l'image

<p><img style="float: left; padding-right: 5px;" src="http://openclipart.org/image/800px/svg_to_png/17626/Peileppe_Castle.png" alt="" width="150" />texte &agrave; c&ocirc;t&eacute; de l'image</p>

Pour modifier le code, il faut être en mode expert, bouton <>.

Pour une image, on peut agir directement sur le code dans la fenêtre d'édition.

Voici une image :

 La ligne de code correspondant à cet image est : 

<p><img src="http://ekladata.com/iKYXcYYh-TUdypS8hptcdhNFNlg.jpg" alt="Avatar P&eacute;pin" /></p>

 On va appliquer à l'image "border-radius" de 25

<p style="text-align: center;"><img style="border-radius: 25px;" src="http://ekladata.com/iKYXcYYh-TUdypS8hptcdhNFNlg.jpg" alt="" /></p>

L'image est dans un paragraphe centré, mais vous pouvez changer cet alignement avec les fonctions du menu d'édition.

Comme toujours, je ne sais pas si mon code est propre, il y a peut-être plus simple, mais ça marche.

Prochain article, enfin si j'y arrive : arrondir plusieurs images avec le même formatage.

Le module derniers visiteurs permet de voir la tête, enfin l'avatar, des membres d'Eklablog qui sont passés sur notre site.

Pour l'activer : menu Apparence > Nouveau module > Derniers visiteurs

Pour modifier son emplacement : menu Apparence > Gérer les menus

Pour modifier son apparence : clic sur le crayon dans la barre de titre du module.

 Bon alors, la seule chose qu'on peut faire c'est changer le nombre d'avatars qui s'affichent ?  

C'est une peu limité me direz-vous, mais avec la fenêtre d'édition, c'est effectivement tout ce qu'on peut faire. Mais comme on est jamais à court de ressources, on peut encore faire des modifications, en passant par la feuille de style et tripatouiller le code CSS. On peut alors agir sur la taille des avatars, arrondir les angles, l'apparence des images etc.

Personnellement, j'ai réduit la taille des images et j'ai arrondi les angles. Voici le code utilisé :

/* modification du module derniers visiteurs */
.module_menu_type_lastvisitors img {max-width : 60px; border-radius: 30px}​

Vous pouvez choisir une autre taille que 60px et modifier chacun des angles à votre convenance (voir : Arrondir les angles dans Eklablog). Vous pouvez aussi modifier l'opacité quand la souris passe sur l'image. Pour cela j'ai ajouté une ligne de code, je ne suis pas sure que cela soit une façon très propre de le faire, mais ça marche : 

/* modification du module dernier visiteur */
.module_menu_type_lastvisitors img{max-width:60px; border-radius:30px;}
.module_menu_type_lastvisitors img:hover {opacity:0.5;}

Agir sur la feuille de style CSS, c'est toujours un peu délicat car il faut coder. Heureusement, pour ceux qui n'y comprennent pas grand chose comme moi, il y a le générateur de code de Papasti. Il suffit de sélectionner l'élément qu'on veut modifier et de choisir les réglages qu'on désire.

Par exemple, pour arrondir les titres des menus, il faut sélectionner l'élément titre des menus, puis cocher arrondir et saisir la taille de l'arrondi. Chaque angle peut avoir une valeur différente. Ce générateur permet aussi de modifier l'apparence du texte et le fond.

.module_menu_titre
{
border-radius: 10px 10px 10px 10px ;
}

Au passage, vous pouvez modifier l'épaisseur de la bordure, changer la couleur etc. Cela vous donnera un code plus long.

Le générateur de code est formidable mais il n'y a pas tous les éléments qu'on peut trouver sur Eklablog, par exemple, il n'y a pas ceux des modules. Vous en trouverez plus dans le Wiki non officiel, de Papasti, bien sur !

Pour modifier la feuille de style CSS, c'est par ici.