• Astuces Eklablog

    Eklablog est très facile à utiliser avec plein de fonctions qui permettent de personnaliser et modeler son blog à sa convenance. Avant de vous précipiter sur mes astuces, je vous rappelle qu'il y a un manuel d'utilisation  assorti d'un forum sur lequel les Gentils Administrateurs d'Eklablog interviennent quotidiennement avec beaucoup de patience.

    Voici une série d'astuces pour faciliter la navigation sur son blog que j'utilise régulièrement.

    effacer la mise en forme d'un article dans Eklablog ;
    - insérer un tweet dans un article Eklablog ;
    Utiliser une police Google ;
    lire la suite ;
    - décoller le texte des images épisode 2 ;
    - lien qui s'ouvre dans une nouvelle fenêtre (2) ;
    - rendre l'en-tête (la bannière) cliquable et le titre invisible ;
    - décoller le texte de l'image ;
    - mettre un article ancien en premier ;
    - Trouver la bonne largeur de page ;
    - Insérer du code HTML ;
    - Adapter la hauteur du titre de l'article ;
    - Activer les boutons des réseaux sociaux à la fin d'un article ;
    Trouver le dernier article, le formulaire de contact et le moteur de recherche ;
    - Modifier la feuille de style CSS ;
    - Arrondir les angles ;
    - Modifier l'apparence du module Derniers visiteurs ;


    En projet :
    - personnaliser le module derniers visiteurs ;
    - vignette de doc ;
    - créer un tableau ; 
    - arrondir les angles.

     

    J'ai parfois trouvé les manips toute seule mais je dois beaucoup à mes copains profs blogueurs et au forum d'Eklablog.

  • Eklablog commence à mettre à œuvre de nouvelles fonctionnalités, après le relooking du profil, la mise sous forme de discussion des commentaires, c'est au tour du celui du gestionnaire de fichiers de connaître une rénovation

    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.

    Une nouvelle médiathèque Pour gérer ses fichiers sur son Eklablog

    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,

    Pin It

    3 commentaires
  • Une petite manip très simple que j'oublie tout le temps : revenir à la mise en forme par défaut d'un texte.

    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.

    Effacer la mise en forme d'un texte

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

    Effacer la mise en forme d'un texte

    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

     

     

     

    Pin It

    2 commentaires
  • 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

    Insérer un Tweet dans un article Eklablog

    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.

    Insérer un Tweet dans un article Eklablog

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

    Insérer un Tweet dans un article Eklablog (2)

    Et colle le code :

    Insérer un Tweet dans un article Eklablog (2)

    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. 

    Pin It

    8 commentaires
  • Si les polices installées par défaut sur Eklablog ne vous conviennent pas vous pouvez utiliser celles de Google.

    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.

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

    Utiliser une police Google sur Eklablog

     Utiliser une police Google sur EklablogRécupérer le code. 

    Utiliser une police Google sur Eklablog

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

    Utiliser une police Google sur Eklablog

     

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

    Utiliser une police Google sur EklablogEnfin, 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.

    Pin It

    5 commentaires
  • Vous vous êtes sans doute déjà retrouvé avec un article dont on ne voit que les premières lignes, un petit lien "lire la suite..." permet d'accéder à la totalité de l'article.

    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ô Lire la suite... 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  Lire la suite... pour saisir la suite.

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

     

    Pin It

    1 commentaire
  • Avec le changement d'interface d'Eklablog, mon article est devenu obsolète. Voici la procédure pour pour ouvrir un lien dans une nouvelle fenêtre.

    Clic sur Lien qui s'ouvre dans une nouvelle fenêtre dans le menu de la fenêtre d'édition.

     

    Lien qui s'ouvre dans une nouvelle fenêtre

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

    Pin It

    16 commentaires
  • Suite aux changements de la fenêtre d'édition d'Eklablog, mon ancien article est obsolète. Avec la nouvelle interface, le texte est automatiquement décollé de l'image si vous choisissez le bon alignement.

    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 

    "décoller" le texte des images : épisode 2

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

    "décoller" le texte des images : épisode 2

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

    "décoller" le texte des images : épisode 2

     

    "décoller" le texte des images : épisode 2Et 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.

     

    "décoller" le texte des images : épisode 2

    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>

     

     

     

    Pin It

    3 commentaires
  • L'objet de cet article est de modifier une image sans utiliser de logiciel de retouche d'image (GIMP, Photofiltre 7, Photoshop etc.) mais uniquement le code sur le blog.

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

    Arrondir une image dans Eklablog

     

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

    Voici une image :

    Avatar Pépin

     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.

     

     

     

     

    Pin It

    2 commentaires
  • Modifier l'apparence du module Derniers visisteurs

    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.

    Modifier l'apparence du module Derniers visisteurs

     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 60pxborder-radius30px}

    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:60pxborder-radius:30px;}
    .module_menu_type_lastvisitors img:hover {opacity:0.5;}

     

     

    Pin It

    14 commentaires
  • Arrondir les angles dans EklablogIl y a plein d'angles dans Eklablog, c'est super, ça fait plein de choses à arrondir : les titres des menus, les titres des articles, les contours etc.

    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.

     

     

     

    Pin It

    9 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique