•  
    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire apparaître sur 3 colonnes.

     

    Pour en arriver à ce résultat il vous suffit de mettre le code CSS suivant (Dans Apparence -> Modifier le thème ->Ajouter du CSS)

     

    .newspaper
    {
    /* Vous pouvez spécifier le nombre de colonnes voulues (ici 3)*/
    /* Ce code peut ne pas fonctionner avec internet explorer*/
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari et Chrome */
    column-count:3;
    }

     

    Et mettre tout simplement votre texte dans votre article comme ci-dessous (Edition d'un article/ Icone HTML)

    <div class="newspaper">Votre texte ici....</div>


    7 commentaires
  • Rien de tel qu'un exemple pour illustrer le sujet.

    Vous pouvez voir ci-dessous un div de couleur cyan et à bords arrondis qui a été tourné de 20°

     

    Voici un exemple de div avec une rotation de 20 °

     

    Pour réaliser ceci, il faut placer ce code dans la partie Ajouter du CSS (Menu Apparence -> Modifier le thème)

    #monelem
    {
    border-radius: 5px 5px 5px 5px;/* on fait un arrondi sur les angles */
    position:relative; /* on positionne le div à 150 px du bord gauche */
    left: 250px;
    font-size:18px; /* Taille des caractères */
    width:150px; /* Largeur du div */
    height:80px; /* Hauteur du div */
    background-color:cyan; /* Couleur du div */
    /* Rotation du div */
    transform:rotate(20deg);
    -ms-transform:rotate(20deg); /* Internet Explorer */
    -moz-transform:rotate(20deg); /* Firefox */
    -webkit-transform:rotate(20deg); /* Safari et Chrome */
    -o-transform:rotate(20deg); /* Opera */
    }

     

    Il ne reste plus qu'à placer votre balise div (que j'ai appelée monelem dans cet exemple) dans la partie HTML de votre article

    <div id="monelem">Voici un exemple de div avec une rotation de 20 &deg;</div>

     

    Rotation d'un Div en CSS

    Vous pouvez bien entendu placer
    une image dans votre <div>

     

     

    Voici un exemple de div avec une rotation selon deux plans

     

    Dans l'exemple ci-dessus, la méthode Rotate a été remplacée par la méthode Skew.
    Voyez sur le site de W3School pour plus d'informations.


    1 commentaire
  • Il peut être interessant de placer au sein d'un article une liste déroulante dont chaque ligne aura une action spécifique comme l'exemple ci-dessous :

    Vous pouvez aussi placer ce type de liste dans un module pour faire un accès rapide vers différentes pages de votre blog.

    Remarque: Il faut que le javascript soit activé sur votre blog pour que cela fonctionne

    Pour arriver à ce résultat, rien de plus simple:
    1 - Copier le code ci-dessous
    2- Editer votre article ou votre module simple
    3- Cliquez sur Editer le code source HTML (en mode normal ou expert)
    4- Collez le code
    5- Modifiez le contenu de la liste et les liens

    CODE

    <p><select name="menu_destination" onchange="window.open(this.value)">

           <optgroup label="Le Karat&eacute; Club Nieppois" >
                      <option value="http://kcn.eklablog.com/baby-karate-p144525">Baby Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/body-karate-p144557">Body Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/les-horaires-p144443">Horaires</option>
                      <option value="http://kcn.eklablog.com/les-tarifs-p144445">Tarifs</option>
           </optgroup>
           <optgroup label="Galleries">
                      <option value="http://papasti.info/gallery3/">Les Photos</option>
                      <option value="http://kcn.eklablog.com/videos-p165503">Vid&eacute;os du Club</option>
                      <option value="http://kcn.eklablog.com/telechargements-p157868">T&eacute;l&eacute;chargements</option>
            </optgroup> &lt;
    </select></p>

     

    Fonctionnement

    La balise HTML Select définit votre liste déroulante.
    La balise optgroup vous permet de regrouper les éléments et la balise option définit vos différentes lignes.

    Lorsque l'on choisit un élément de la liste, la fonction javascript window.open est appelée et reçoit comme argument la valeur contenue dans value (ici des liens).

    Adaptations

    Vous pouvez bien entendu modifier les attributs de style de la balise <select> comme ci dessous

    <p><select style="color: black; background-color: wheat; width: 100%; border-color: lightgray; border-style: ridge; border-width: 8px;" name="menu_destination" size="5" onchange="test(this.value)">

     

     

    Il est également possible d'utiliser cette balise pour d'autres choses comme ci-dessous.
    (vous pouvez retrouver les noms et codes couleurs sur:

    http://www.w3schools.com/html/html_colornames.asp

     


    60 commentaires
  • Référencer son Blog sur Google est relativement simple dans la mesure où vous respectez quelques règles.

    La première d'entre elle est le bon sens ! Si vous vous posez la question suivante : Pourquoi Google me placerait en bonne position dans les résultats de recherche ?
    La réponse à cette question induit un certain nombre de réponses:

    - parceque le thème du site suscite l'intérêt du lecteur
    - parcequ'il dispose d'un contenu important
    - parceque les mots employés par le site sont les mêmes que ceux employés pour faire une recherche
    -etc...

    De la même manière, Google souhaite que les résultats la recherche correspondent à ce que l'internaute souhaite trouver. Il faut donc essayer que le site (ou le blog) soit le plus qualitatif possible en évitant les textes incompréhensibles, les fautes d'orthographe et le langage sms.

    Par ailleurs, il est tentant d'ajouter sur son site des scripts, du flash et autres gif animés qui n'ont pas d'intérêt pour le référencement et qui au contraire pourraient vous faire reculer dans le classement.

    Par contre,  essayer de mettre des liens qui pointent sur votre blog (par exemple dans vos signatures sur de bons forums) augmentera vos chance de référencement.

    A titre d'exemple, j'ai vu fleurir sur Eklablog des blogs traitant des Mangas. Des sites de ce type qui se contentent de mettre des images auront du mal à être bien référencés sauf s'il s'agit de sites exceptionnels qui seront connus grâce au bouche à oreille et dont les liens seront  largement diffusés.
    Personnellement, si je souhaitais réaliser ce type de site, j'y mettrai des articles en plus des photos comme l'origine des mangas, les différents styles de mangas, le graphisme etc...

    Je vais donc vous exposer ici la méthode que j'utilise pour mes référencements (ce n'est peut-être pas la meilleure mais cela fonctionne)

    En premier lieu, consulter les informations fournies par Eklablog. D'ailleurs avec le fichier Sitemap généré automatiquement par Eklablog, la tâche va être simplifiée pour les robots d'exploration.

    Je vais donc vous montrer ici la procédure que j'utilise pour le référencement de mes blogs.

    Il vous faut pour cela disposer d'un compte google que vous pouvez créer ici.

    Une fois le compte crée, il vous suffit de vous rendre sur la page Google Webmasters tools

    Vous obtenez une image comme ci-dessous et vous cliquez sur Ajouter un site

     

    Référencer efficacement son blog Eklablog sur Google

    Sur la page suivante, cliquez sur Autre Méthode (méthode qui me paraît la plus rapide)

    Référencer efficacement son blog Eklablog sur Google

    Ici vous cochez le premier bouton radio et vous copiez la ligne que j'ai surligné en bleu (la balise méta).

    Référencer efficacement son blog Eklablog sur Google

    Vous ouvrez une nouvelle fenêtre dans votre navigateur et vous vous connectez à votre blog.
    Vous cliquez sur Configuration/ Configuration Générale puis sur l'onglet Méta Tags afin d'obtenir la fenêtre ci-dessous.

    Vous collez dans la zone Balises Méta Additionnelles la balise copiée juste avant et vous enregistrez.

    Référencer efficacement son blog Eklablog sur Google

     Vous retournez sur la page Google Webmaster Tools et cliquez sur continuer.

    Référencer efficacement son blog Eklablog sur Google

    Vous arrivez sur le tableau de bord sur lequel vous cliquez sur Envoyer un Sitemap et dans le champ qui vous demande le nom du fichier sitemap, vous tapez simplement sitemap.xml

    Référencer efficacement son blog Eklablog sur Google

    Référencer efficacement son blog Eklablog sur Google

    Voilà, la procédure de lancement est lancée et il faut à partir de ce moment patienter quelques jours (voire quelques semaines) pour que les robots de Google explorent votre site.

    N'hésitez pas à renvoyer le Sitemap à Google dès que vous avez mis du nouveau contenu pour forcer les robots à venir vous rendre visite régulièrement.


    Pour l'autre méthode (celle recommandée par Google), il suffit de télécharger le fichier (étape 1) en cliquant sur le lien fourni puis de le copier sur le blog en cliquant sur Contenu / Gérer les Fichiers (étape 2).
    Il reste à valider le site en cliquant sur le lien fourni (étape 3).

    J'ai rédigé ce mini-tuto très rapidement alors n'hésitez pas à me faire part de vos commentaires s'il manque des choses ou si vous pensez que ce que j'ai écrit est inexact.

     

     

     

     

     


    63 commentaires