[Topic unique] Entraide technique forum et blogs #2

 
  • LCB

    Amant des romans

    Hors ligne

    #21 14 Mai 2017 14:21:34

    Coucou tout le monde,
    je voulais faire part de quelques-uns de mes widgets que j'ai mis sur mon blog :
    (Les codes suivants sont à mettre (copier-coller) sur un gadget HTML/Javascript)

    L'article au hasard :

    Code:

    <a href="#random" onclick="feelingLucky()" 
    title="Billet au hasard!">Cliquez ici pour en découvrir un !</a>

    Ce widget permet de faire découvrir un article ou post au hasard à vos visiteurs. Vous pouvez modifier le texte du lien : << >Cliquez ici pour en découvrir un !<



    La recherche personnalisée :

    Code:

    <div class="recherche_p"><form action="/search" id="searchthis" 
    method="get"><input id="search" 
    name="q" 
    placeholder="Rechercher" 
    type="text" /><br /><input id="search-btn" type="submit" 
    value="Ok" /><br /></form><br /><br /></div>

    Vous connaissez le widget Recherche, mais avec celui-là, vous pouvez modifier <<placeholder="Rechercher">> et <<value="Ok">> qui sont respectivement : le texte affiché dans la case de la recherche, et le texte du bouton.



    La barre de progression :

    Code:

    <br /><img src="http://img.livraddict.com/_thumbs/covers/216/216995/200_0/couv63205610.jpg" 
    / /><br /><progress id="progressBar" 
    max="100" style="font-weight: normal;" 
    value="65"></progress><br /><b>65% </b><br />

    Ce widget, je l'ai trouvé grâce à Livraddict, mais ce n'est pas le même code. Il est plus simple, mais moins personnalisable. Il vous servira pour montrer à vos visiteurs la progression de vos lectures !
    Pour le modifier :
    Pour changer d'image, vous devez changer l'URL écrite ici : <<  img src="http://img.livraddict.com/_thumbs/covers/216/216995/200_0/couv63205610.jpg" >>
    Pour changer le pourcentage de la barre, vous devez changer <<  value="65" >>  par le pourcentage de votre choix.
    Pour changer le pourcentage écrit en dessous de la barre, vous devez changer <<   <b>65% </b>  >> par le pourcentage de votre choix.




    (Tous ces widgets fonctionnent sur Blogger (Voir mon blog), je ne sais pas pour les autres)

    J'espère que ça vous aura aidé ! Dites-moi si vous avez des remarques ou des questions !

    Dernière modification par LCB (14 Mai 2017 14:33:40)

  • Parthenia

    Serial lecteur

    Hors ligne

    #22 14 Mai 2017 20:10:00

    Merci beaucoup pour ces codes, LCB !! :pouceleve:
  • LCB

    Amant des romans

    Hors ligne

    #23 16 Mai 2017 18:01:48

    Parthenia a écrit

    Merci beaucoup pour ces codes, LCB !! :pouceleve:


    Mais de rien ! Ca me fait plaisir :)

  • LCB

    Amant des romans

    Hors ligne

    #24 21 Mai 2017 11:37:41

    J'avais écrit ça la dernière fois :

    LCB a écrit

    La recherche personnalisée :

    Code:

    <div class="recherche_p"><form action="/search" id="searchthis" 
    method="get"><input id="search"  name="q" 
    placeholder="Rechercher" 
    type="text" /><br /><input id="search-btn" type="submit" 
    value="Ok" /><br /></form><br /><br /></div>

    Vous connaissez le widget Recherche, mais avec celui-là, vous pouvez modifier <<placeholder="Rechercher">> et <<value="Ok">> qui sont respectivement : le texte affiché dans la case de la recherche, et le texte du bouton.


    Mais le résultat donnait ça :
    <image>




    Mais maintenant, j'ai une barre de recherche qui ressemble à ça :

    <image>









    Donc, je me suis dit que vous aimeriez peut-être savoir le code que j'ai utilisé :

    Code:

    <div class="recherche_p"><form action="/search" id="searchthis" 
    method="get"><input id="search"  name="q" 
    placeholder="Titre ou auteur" /> <input id="search-btn" type="submit" v
    alue="Rechercher" /> </form> </div>
     <style type='text/css'> 
    /* Fond du gadget de la barre de recherche */
     .recherche_p { 
    background-color: #eeeeee; /* Couleur de fond */ 
    border-style: solid; /* Style de la bordure */ 
    border-width: 1px; /* Epaisseur de la bordure */ 
    border-color: #dddddd; /* Couleur de la bordure */ 
    padding: 10px 10px 10px 10px; /* Espace entre les bords et le contenu : haut droite bas gauche */ }
     /* Champ de saisie */ 
    #searchthis #search { background-color: #ffffff; /* Couleur de fond */
     border-style: solid; /* Style de la bordure */ 
    border-width: 1px; /* Epaisseur de la bordure */
     border-color: #dddddd; /* Couleur de la bordure */ 
    padding: 5px 10px 5px 10px; /* Espace entre les bords et le contenu : haut droite bas gauche */ 
    width: 98.5%; /* Permet d'ajuster la largeur du champ de saisie à 100% */ 
    box-sizing: border-box; /* Important */ 
    font-family: 'Patrick Hand SC', cursive; /* Police du texte */ 
    font-size: 16px; /* Taille de la police du texte */ 
    font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */ 
    letter-spacing: 1px; /* Espacement des caractères */ }
     /* Bouton valider */ 
    #searchthis #search-btn { 
    background-color: #000000; /* Couleur de fond */ 
    border-style: solid; /* Style de la bordure */ 
    border-width: 1px; /* Epaisseur de la bordure */ 
    border-color: #000000; /* Couleur de la bordure */ 
    padding: 5px 10px 5px 10px; /* Espace entre les bords et le contenu : haut droite bas gauche */ 
    width: 98.5%; /* Permet d'ajuster la largeur du champ de saisie à 100% */ 
    box-sizing: border-box; /* Important */ 
    font-family: 'Patrick Hand SC', cursive; /* Police du texte */ 
    font-size: 16px; /* Taille de la police du texte */ 
    font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères */ 
    margin: 10px 0 0 0; /* Espace autour du bouton : haut droite bas gauche */ 
    text-transform: uppercase; /* Transforme le texte en majuscules */ 
    color: #ffffff; /* Couleur du texte */ } 
    /* Bouton valider quand survolé par la souris */ 
    #searchthis #search-btn:hover { 
    background-color: #ffffff; /* Couleur de fond */ 
    color: #000000; /* Couleur du texte */ 
    cursor: pointer; /* Apparence du curseur comme pour un lien */ } </style>

    Ce qui est entre /* et */ sont des commentaires qui vous aideront dans la personnalisation de votre barre.

    Ah oui, une dernière chose : sur ce type de ligne :

    font-family: 'Patrick Hand SC', cursive; /* Police du texte */


    vous ne pouvez pas mettre cette police sur votre blog, ne l'ayant pas installée. Donc, la police qui sera affichée sera celle par défaut sur votre blog.

    Si vous voulez des explications sur ce code, ou le personnaliser à votre goût, c'est sur ce blog (il y a plein de tutos intéressants dessus) : Lady Bird Red (Si vous voulez installer la police que j'ai utilisée sur votre blog, suivez un des tutos que propose ce blog en tapant : "Google Fonts" dans la recherche du blog)

    Dernière modification par LCB (21 Mai 2017 14:37:53)

  • Thrr-Gilag

    Lecteur invétéré

    Hors ligne

    #25 08 Juin 2017 10:20:29

    Asahi a écrit

    Bonjour,

    J'aurais besoin d'un peu d'aide au sujet de mon blog Blogger.

    J'aimerais changer totalement ma manière d'écrire et plus travailler l'esthétique même. J'aimerais en fait, mettre l'image à gauche, et du texte à droite, mais sur la même ligne. Je le vois sur plusieurs blogs, je trouve cela vraiment sympa, seul hic: je suis une quiche en HTML... kiss

    J'ai cherché sur internet, épluché plusieurs blogs d'aide (notamment celui de Lady Bird Red que je recommande), mais impossible d'avoir ma réponse. J'ai cherché s'il y avait un topic concernant les aides blogger sur ce site mais visiblement non...

    Donc je créer un nouveau sujet, et m'adresse directement à vous. Y a-t-il un moyen de mettre l'image à gauche et le texte à droite? Si vous ne voyez pas, regardez le blog de Marinette.

    Merci pour votre aide !


    En html directement, tu pourras avoir cet effet en mettant l'image (balise img) dans une section div ayant au minimum l'option

    Code:

    style="float:left;"

    Ainsi par exemple sur mon blog, la première image qui apparait en début d'article est encodé (de manière simplifiée) comme suit :

    Code:

    <div style="clear: left; float: left;">
      <img alt="Titre alternatif" src="https://adresse.de.mon.image.jpg" width=largeur height=hauteur />
    </div>
    Texte qui sera à côté de ton image.

    l'option de style clear:left; permet de commencer à positionner l'image à gauche après être sûr qu'on n'est pas à côté d'une autre image
    l'option de style float:left; est celle qui t'intéresse puisqu'elle fait flotter à gauche la section div, section qui contient ton image.

    Cela étant, sous blogger, tu peux arriver à un résultat similaire avec l'éditeur d'article. Une fois que tu as inséré une image, tu peux spécifier la taille de cette dernière mais surtout si tu veux qu'elle soit à gauche ou à droite ou au centre, ce qui correspond à l'option float.

    En espérant t'avoir un peu aidé.

  • HarperValley

    Apprenti Lecteur

    Hors ligne

    #26 08 Juin 2017 13:27:52

    Mais j'avais pas vu tout ça! Merci pour ce partage! C'est super interessant! Merci de penser à tous ceux qui sont des quiches en informatique!
  • LCB

    Amant des romans

    Hors ligne

    #27 08 Juin 2017 13:29:00

    De rien ! ;)
  • gaufreausucre

    Néophyte de la lecture

    Hors ligne

    #28 15 Juin 2017 03:55:43

    Bonjour,
    Je souhaite démarrer mon blog et j'hésite encore sur la plateforme. J'ai regardé vos blogs blogger et la diversité de design est assez impressionnante! Du coup je songe à me lancer sur blogger, des avis?
  • Hidès

    Tourneur de pages compulsif

    Hors ligne

    #29 15 Juin 2017 09:33:20

    Personnellement j'aime beaucoup blogger. D'autres vont te conseiller wordpress. Je te conseille de tester les deux plateformes et voir ce que tu préfère ;)
  • Aryia

    Correctrice

    Hors ligne

    #30 15 Juin 2017 09:36:44

    gaufreausucre a écrit

    Bonjour,
    Je souhaite démarrer mon blog et j'hésite encore sur la plateforme. J'ai regardé vos blogs blogger et la diversité de design est assez impressionnante! Du coup je songe à me lancer sur blogger, des avis?


    Alors personnellement, je suis sur Blogger et j'en suis très satisfaite : la prise en main est assez instinctive, et tu peux vraiment faire de jolies choses sans avoir de grandes connaissances en codage, par exemple. Après, je sais que beaucoup trouvent que WordPress permet plus de personnalisation, justement, donc à toi de voir ce que tu préfère ^^