• Tutorie vidéo: Publier un article avec 1 image dans le "Chapô"

    Destiné aux débutants sur Eklablog et mêmes à d'autres moins débutants...

     

     Mettez-vous en plein écran pour plus de confort.

     

    Vous avez pu voir, ou pas... L'article "Le Chardonneret affamé" sur mon blog ici: "Micromick"

    J'explique, pas-à-pas, dans cette vidéo comment j'ai procédé pour obtenir ce résultat.

     

    Tutorie vidéo: Publier un article avec 1 image dans le "Chapô"

     

    Pour une image de présentation de votre article, utilisez le "Chapô"

     

    A l'ouverture de l'article, vous verrez une petite invite sous l'image:

    "Lire la suite"

    Puis en dessous "Commentaires"

    Comme le fait remarquer Pascale, beaucoup de visiteurs cliquent directement sur "Commentaires" sans lire la suite.

     

    Pour cacher ce bouton "commentaires" ,  vous pouvez insérer ce code dans votre éditeur CSS:

     

    Ce qui se trouve entre /*xxxxxxxxxx*/ est un commentaire destiné à vous y retrouver. Ces lignes n'ont aucune influence sur le code CSS. Comme la première ligne ci-dessous:

     

     

     

    /* masquer lien commentaire dans chapô seulement */
    p.article_readmore {
    width: 1100px; /* largeur article */
    height: 14px;
    background-color: #000; /* rempl par #111 pour tester position */
    padding: 24px; /* espace autour du lien Lire la suite */
    position: absolute;
    margin-top: 15px; /* reglage vertical ± */
    line-height: 1em;

    font-size: 22px; /* taille police */
    }
    .article_readmore a:before {
    content: "☞ " /* facultatif, pour un ajout éventuel avant Lire la suite */


    /* centrer le slogan */
    #slogan_header{left:50%;margin-left:-600px;}

    <td style="filter:alpha(opacity=20)">

    }

     

    Copiez/collez et adaptez ce code dans votre éditeur CSS 

     

    Adaptez la couleur au fond de votre page:    background-color: #000;  /* Adaptez couleur suivant votre fond */

    Réglez la positon verticale:    margin-top: 15px;   /* reglage vertical ± */

    Réglez la largeur selon votre blog: width: 1100px; /* largeur article */

     

     

    Ce code n'a aucune incidence sur les articles sans "Chapô", le bouton "Commentaires" s'affichera normalement.

     

    Un grand merci pour ce code CSS à: 

     stormalo 

     

     

     

    « Eklablog : CSS , Sélecteurs ...Vive le carnaval ... »

  • Commentaires

    1
    Lundi 8 Février 2016 à 14:13

    Bravo pour cette vidéo

    Tu sais y faire cool

    2
    Lundi 8 Février 2016 à 15:41
    Merci pour cet article très intéressant ...
    3
    Lundi 8 Février 2016 à 16:28

    Un gros merci pour cette vidéo,je te souhaite une belle semaine amitié Nick

    4
    Lundi 8 Février 2016 à 16:39

    Vidéo très intéressante, merci !

    Bonne semaine, à bientôt.

    5
    Lundi 8 Février 2016 à 18:34

    Bonsoir  Michel 

    Très intéressant ce tuto pour les débutants en effet .

    J'ai bien progressé depuis quelques temps , je suis contente de moi he

    Douce soirée 

    Bise

    6
    Lundi 8 Février 2016 à 20:06

    J'ai appris plein de choses ! notamment pour les images que l'on peut faire apparaître dans une nouvelle fenêtre ! je le savais mais j'avais oublié 

    Bravo à toi pour ce très beau tutoriel, très clair, pratique et complet

    Bise

    Am

    7
    Mardi 9 Février 2016 à 06:19

    Bonjour Michel

    C'est vraiment sympa de ta part de nous expliquer ainsi la marche à suivre

    pour élaborer de jolis blogs !

    Merci beaucoup pour ce beau tutoriel ! auquel je vais me référer souvent je crois .....

    bises

    Paula

     

    8
    Mercredi 10 Février 2016 à 04:31

    Très "clair" ton article cher Michel, Merci .....

    Et si l'on désire partir d'une petite photo dans l'article et pouvoir l'agrandir pour ne pas prendre trop de place  surtout lorsqu'il y a plusieurs clichés est-ce la procédure inverse ?... "un peu bouché à l'émeri les novices" mon cher Michel ..... les tableaux m'intéressent aussi beaucoup ....

    Je sais que tu es très partisant des vidéos mais tu sais, beaucoup ne les regarde pas !!!! 

    ils préfèrent voir passer les images ... comme les enfants LOL LOL

    Merci pour tes tutoriels très instructifs mon ami.

    Une excellente référence pour essayer de voler de ses propres ailes ...... 

    Bonne journée Michel,

    Bises amicales

    Christiane

     

    9
    Mercredi 10 Février 2016 à 18:09

    Bonsoir Michel,

    C'est très bien expliqué et c'est justement ce genre de manipulations qui m'ont ( encore) beaucoup donné

    du fil à retordre. Il ne me reste plus qu'à faire des travaux pratiques  sans publier bien entendu.

    Bonne soirée.

    10
    Lundi 18 Avril 2016 à 12:20

    C'est juste génial !!! je ne me suis jamais servi du chapô !!! bravo tu es très clair dans tes explications !!!

    merci beaucoup !!! bonne journée !!! bise !!!

    11
    Lundi 7 Novembre 2016 à 22:59

    Allo Michel. Ça fait 15 fois que je recommence avec d'autres consignes, car pas expliqué clairement, mais là avec tes consignes je suis certaine de réussir. Merci, je me mets à l'ouvrage.

    12
    Jeudi 8 Décembre 2016 à 18:47

    Merci 

    Béatrice

    13
    Mercredi 14 Décembre 2016 à 16:14

    merci j'ai corrigé le mot nœuds

    bonne soirée

    Béatrice

    14
    Mercredi 25 Janvier à 17:29

    Super vidéo et très bien expliquée

    Je suis ravie d'avoir enfin pu trouver l'aide dont j'avais besoin

    Merci à vous 

    Cordialement

    MilenaElleria

    15
    Jeudi 11 Mai à 09:14
    Hey there would you mind stating which blog platform you're working
    with? I'm going to start my own blog in the near future but
    I'm having a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different
    then most blogs and I'm looking for something unique.
    P.S My apologies for being off-topic but I had to ask!
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :