Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer une barre de recherche personnalisée

La barre de recherche par défaut de Blogger n'est vraiment pas très belle. Aujourd'hui nous allons voir comment créer une barre de recherche personnalisée !

C'est parti pour les explications

Sommaire

  1. Ajouter la barre de recherche
  2. Modifier l'apparence de la barre de recherche
    1. Modifier le fond du gadget
    2. Modifier le champ de saisie
    3. Modifier le bouton valider
    4. Modifier le bouton valider au survol de la souris

Ajouter la barre de recherche

Dans ce tutoriel nous n'allons pas toucher au code HTML de notre blog. Nous allons tout inclure dans un gadget.

Commencez par aller dans Mise en Page à partir du tableau de bord Blogger, puis cliquez sur Ajouter un gadget :

Créer une barre de recherche personnalisée

Sélectionnez le gadget HTML/JavaScript :

Créer une barre de recherche personnalisée

Entrez le titre de votre choix, puis collez le code suivant dans Contenu :
<div class="recherche_p">

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

</div>
Ceci est le code HTML de notre barre de recherche.

Visuellement on obtient :

Créer une barre de recherche personnalisée

Vous pouvez modifier le mot du bouton en remplaçant Rechercher par le mot de votre choix.
Vous pouvez remplacer le mot du champ de saisie en remplaçant Rechercher par le mot de votre choix.

Pour l'instant notre barre de recherche ne ressemble pas à grand chose. Mais nous allons changer cela en ajoutant du code CSS !

Modifier l'apparence de la barre de recherche

Dans votre gadget HTML/JavaScript, collez le code suivant à la suite du code HTML de votre barre de recherche :
<style type='text/css'>

</style>
C'est entre ces 2 lignes de code que nous allons ajouter notre code CSS.

Modifier le fond du gadget

Pour modifier le fond du gadget nous allons utiliser le code CSS suivant :
/* Fond du gadget de la barre de recherche */
.recherche_p {
}
Pour modifier la couleur du fond du gadget on ajoute la ligne suivante :
background-color: #eeeeee;   /* Couleur de fond */
Pour ajouter une bordure au gadget on utilise les codes suivants :
border-style: solid;   /* Style de la bordure  */
border-width: 1px;   /* Epaisseur de la bordure  */
border-color: #dddddd;   /* Couleur de la bordure  */
Pour ajouter un espace entre le contenu et le bord du gadget on ajoute la ligne suivante :
padding: 10px 10px 10px 10px;   /* Espace entre les bords et le contenu : haut droite bas gauche  */
Cette ligne comprend 4 valeurs qui représentent dans l'ordre :
  • l'espace au-dessus du contenu
  • l'espace à droite du contenu
  • l'espace en-dessous du contenu
  • l'espace à gauche du contenu

Ajoutez tous ces codes avant le signe } du code CSS du fond du gadget, comme ceci :
/* 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  */
}
Visuellement on obtient :

Créer une barre de recherche personnalisée

Modifier le champ de saisie

Pour modifier l'apparence du champ de saisie on utilise le code CSS suivant :
/* Champ de saisie */
#searchthis #search {
}
Comme pour le fond du gadget, on peut changer la couleur de fond du champ de saisie et sa bordure avec les codes suivants:
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  */
Remarque : si vous ne voulez pas de bordure remplacez :
border-style: solid;   /* Style de la bordure  */
border-width: 1px;   /* Epaisseur de la bordure  */
border-color: #dddddd;   /* Couleur de la bordure  */
Par la ligne suivante :
border: none;   /* Pas de bordure */
On peut également ajouter un espace entre le texte du champ de saisie et la bordure avec le code suivant :
padding: 5px 10px 5px 10px;   /* Espace entre les bords et le contenu : haut droite bas gauche  */
Pour ajuster la largeur du champ de saisie à 100% du gadget on ajoute les codes suivants :
width: 98.5%;   /* Permet d'ajuster la largeur du champ de saisie à 100% */
box-sizing: border-box;   /* Important */
Il est également possible de modifier la police du champ de saisie avec les codes suivants :
font-family: Lato;   /* Police du texte */
font-size: 12px;   /* Taille de la police du texte */
font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
letter-spacing: 1px;   /* Espacement des caractères */
Le code CSS final pour le champ de saisie est :
/* 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: Lato;   /* Police du texte */
  font-size: 12px;   /* Taille de la police du texte */
  font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
  letter-spacing: 1px;   /* Espacement des caractères */
}
Ce qui donne visuellement :

Créer une barre de recherche personnalisée

Modifier le bouton valider

Pour modifier l'apparence du bouton valider nous allons utiliser le code suivant :
/* Bouton valider */
#searchthis #search-btn {
}
De la même manière que pour les éléments précédents, nous pouvons modifier la couleur de fond, la bordure, la police, l'espace entre le texte et la bordure du bouton, et ajuster la largeur du bouton à 100% du gadget, avec les codes suivants :
background-color: #E8B960;   /* Couleur de fond */
border-style: solid;   /* Style de la bordure  */
border-width: 1px;   /* Epaisseur de la bordure  */
border-color: #E8B960;   /* 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 bouton à 100% */
box-sizing: border-box;   /* Important */
font-family: PT sans;   /* Police du texte */
font-size: 13px;   /* Taille de la police du texte */
font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
letter-spacing: 2px;   /* Espacement des caractères */
Pour ajouter un espace entre le champ de saisie et le bouton valider, nous allons ajouter le code suivant :
margin: 10px 0 0 0;   /* Espace autour du bouton : haut droite bas gauche  */
Les valeurs fonctionnent comme pour padding, et représentent dans l'ordre :
  • l'espace au-dessus du bouton
  • l'espace à droite du bouton
  • l'espace en-dessous du bouton
  • l'espace à gauche du bouton

Pour modifier un peu plus la police de ce bouton, on peut, par exemple, mettre le texte en majuscules avec la ligne de code suivante :
text-transform: uppercase;   /* Transforme le texte en majuscules */
Et changer la couleur du texte avec le code suivant :
color: #ffffff;   /* Couleur du texte */
Le code final donne :
/* Bouton valider */
#searchthis #search-btn {
  background-color: #E8B960;   /* Couleur de fond */
  border-style: solid;   /* Style de la bordure  */
  border-width: 1px;   /* Epaisseur de la bordure  */
  border-color: #E8B960;   /* 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 bouton à 100% */
  box-sizing: border-box;   /* Important */
  font-family: PT sans;   /* Police du texte */
  font-size: 13px;   /* Taille de la police du texte */
  font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
  letter-spacing: 2px;   /* 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 */
}
Et visuellement on obtient :

Créer une barre de recherche personnalisée

Modifier le bouton valider au survol de la souris

Pour modifier l'apparence du bouton valider au survol de la souris, nous allons utiliser le code suivant :
/* Bouton valider quand survolé par la souris */
#searchthis #search-btn:hover {
}
Ici, nous n'allons définir que les changement que nous voulons apporter au bouton quand il est survolé par la souris.

Par exemple, un changement de couleur du fond et/ou du texte.
On écrit simplement les lignes de codes correspondant à ces changements :
background-color: #ffffff;   /* Couleur de fond */
color: #E8B960;   /* Couleur du texte */
Il faut également ajouter une petite ligne supplémentaire pour changer l'apparence du curseur comme pour un lien :
cursor: pointer;   /* Apparence du curseur comme pour un lien */
Notre code complet est donc :
/* Bouton valider quand survolé par la souris */
#searchthis #search-btn:hover {
  background-color: #ffffff;   /* Couleur de fond */
  color: #E8B960;   /* Couleur du texte */
  cursor: pointer;   /* Apparence du curseur comme pour un lien */
}
Ce qui donne visuellement :

Créer une barre de recherche personnalisée

Le code final dans votre gadget devrait ressembler à ceci (avec le code CSS de votre choix) :
<div class="recherche_p">

<form action="/search" id="searchthis" method="get">
<input id="search" name="q" type="text" placeholder="Rechercher" />
<input id="search-btn" type="submit" value="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: Lato;   /* Police du texte */
  font-size: 12px;   /* 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: #E8B960;   /* Couleur de fond */
  border-style: solid;   /* Style de la bordure  */
  border-width: 1px;   /* Epaisseur de la bordure  */
  border-color: #E8B960;   /* 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: PT sans;   /* Police du texte */
  font-size: 13px;   /* Taille de la police du texte */
  font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
  letter-spacing: 2px;   /* 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: #E8B960;   /* Couleur du texte */
  cursor: pointer;   /* Apparence du curseur comme pour un lien */
}

</style>
Et voilà ! Vous savez maintenant comment créer votre barre de recherche personnalisée ;)
Dans un prochain tutoriel, je vous expliquerai comment ajouter une barre de recherche à votre menu !

En attendant, bon blogging ! :)

Autres articles

67 commentaires:

  1. Bonjour,
    Merci beaucoup pour ce tutoriel. Maintenant j'ai une barre de recherche canon.
    J'ai un gadget html Newsletter (fourni par Blogger) et je voulais savoir si on pouvait avoir les mêmes modifications possibles pour changer le bouton Valider et tout et tout.
    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      Je vais regarder tout ça et faire un tutoriel ;)

      Supprimer
    2. Bonsoir Catherine,
      Merci beaucoup, j'ai hâte de voir le tutoriel.
      Bises :D

      Supprimer
  2. Ton article tombe vraiment très bien !!! Merci à toi car je galère depuis 3 jours à créer une belle barre de recherche, sans succès. Encore merci ! ^^

    RépondreSupprimer
  3. Le tuto que je cherchais depuis un moment sans succès. Enfin ! ♥ merci !

    www.madeinsheena.fr

    RépondreSupprimer
  4. Chouette ! Merci beaucoup ! C'est nettement plus sympa que la recherche standard de blogger :D

    RépondreSupprimer
  5. Bonjour,

    Merci pour ce tuto, j'en avais clairement marre de ma barre de recherche et je ne trouvais pas d'explications claires sur le net. J'aimerais savoir s'il était possible d'avoir un autre tuto sur comment ajouter un fond blanc aux articles et un fond gris clair un peu comme votre blog sachant que j'ai un modèle simple sur blogger !
    Bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est une idée de tutoriel qui est déjà sur ma liste de tutoriels à faire ;)

      Supprimer
  6. Merci !!! J'essayais de changer cette barre depuis un petit moment !!! Bonne fin de weekend !!

    RépondreSupprimer
  7. Merci pour ce tuto, ton blog est vraiment génial, grâce a toi j'en appred un peu plus chaque jours =)

    RépondreSupprimer
  8. Merci encore et encore! Je souhaitais vraiment faire un blog qui me ressemble, mais je n'y connaissais absolument rien à tout ça. Maintenant et grâce à tous tes conseils et tutoriels, je crois tenir plus ou moins mon propre blog :)))

    RépondreSupprimer
  9. Je vais déménager mon blog sous blogger, et je suis donc en train de créer le nouveau blog. Tes tutoriels sont une vraie mine d'or pour ça!! Merci, merci, merci!!
    Je vais donc pouvoir ajouter un beau bouton de recherche! Mais, comment faire pour avoir le bouton de validation à côté du champ de saisie et non en dessous?

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Il te suffit de diminuer la largeur de ton champ de saisie et de ton bouton pour qu'ils rentrent tous les deux sur une ligne. Change la valeur de width des deux codes correspondants à 49% par exemple ;)

      Supprimer
  10. Bonjour,
    Merci beaucoup pour ton tuto qui est très clair ! d'ailleurs c'est le seul avec lequel j'ai réussi à faire la barre de recherche que je voulais :)

    J'ai cependant un petit bémol, ma barre de recherche est parfaite mais elle s'affiche sous mon menu au lieu de se mettre à côté sur la même ligne, il y a largement la place pourtant de s'y mettre :(

    Je te remercie par avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir le problème ?

      Supprimer
  11. Merci encore pour ce superbe article bien détaillé pour créer sa barre de recherche !
    J'ai de la chance car les couleurs de mon blog correspondent exactement au modèle que tu donnes !

    Je t'avoue j'ai quelques soucis pour la barre de navigation..
    Je voulais savoir, comment as-tu fait ton image tout en haut pour présenter ton blog ?
    Des bisous.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Veux-tu parler du nom du blog ? Je l'ai créé sur Photoshop ;)

      Supprimer
    2. Oui c'est ça ! Merci beaucoup ^^

      Supprimer
  12. Hello ! Je ne comprends pas, je copie et personnalise mon code dans un gadget html mais ça ne marche pas. J'enregistre, je visualise le blog et rien n'a changé. Quand je reviens au gadget, tout le code entre "style type" a disparu... Saurais-tu pourquoi? Merci en tout cas pour tes chouettes tutoriels! Bises

    RépondreSupprimer
    Réponses
    1. C'est très étrange. Essaye de coller le code directement dans le code de ton thème.
      Vas dans Modèle > Modifier le code HTML. Colle le code CSS de ta barre de recherche avant la ligne :

      /* Columns

      Supprimer
  13. Merci beaucoup pour tous les tutoriels de ton blog, c'est vraiment super et bien expliqué et ça m'a permis de faire beaucoup de choses sur mon blog, je suis ravie!!!

    RépondreSupprimer
  14. Super tutoriel !! Merci beaucoup, j'ai appris un peu plus sur le codage. Bravo pour ce blog, il est magnifique et très instructif ! Je débute un nouveau blog et j'adore le personnaliser et tes articles m'aident beaucoup. Bravo !!
    Sonia

    http://lafabrique-bysonia.blogspot.fr/

    RépondreSupprimer
  15. Merci beaucoup pour ce tuto, j'ai finalement réussi à tout bien faire :)
    Dis moi, est ce qu'il y a un petit code aussi pour supprimer cet horrible contour bleu lorsqu'on clique sur le champ de saisie?

    Merci par avance, c'est vraiment super ce que tu fais :)

    http://www.birdymarlowe.com/

    RépondreSupprimer
  16. Super tutoriel,j'ai enfin une barre de recherche qui fait un peu plus envie! Merci à toi : )

    RépondreSupprimer
  17. J'ai voulu mettre en place ton tuto et je me retrouve avec un truc tout moche (snif) ma barre de recherche est bleu e la barre pour lancer la recherche est rose et dès le débur elle ne ressemble pas a la tienne :(

    RépondreSupprimer
    Réponses
    1. Bonjour Luciie,

      Peux-tu me donner le lien vers ton blog pour que je puisse y jeter un coup d’œil ?

      Supprimer
  18. Merci pour ce tuto! Je butais sur ce problème depuis assez longtemps et c'est enfin réglé! Bravo pour ce blog!

    RépondreSupprimer
  19. Coucou oui c'est encore moi!
    Est-ce possible de centrer la barre de recherche dans la barre latérale droite?
    Merci!

    RépondreSupprimer
    Réponses
    1. Peux-tu me donner le lien vers ton blog pour que je puisse voir directement ton gadget ?

      Supprimer
  20. Bonjour,
    Alors avant tout merci pour tout ton blog c'est vraiment très bien fait et bien plus détaillé et clair que tout les autres sites de blogging!
    J'ai bien suivi la plupart des tutos mais il me reste quelques soucis.
    Déjà j'aimerai savoir s'il est possible de changer l'icone de la souris au survol l'image de la barre de recherche?
    Ensuite deux plus gros problèmes qui sont que je ne peux plus acceder à Header et donc je ne peux ajouter d'image/logo à gauche de mon titre de blog et 2em gros problème les commentaires ont disparus du blog (je sais j'ai du faire une fausse manip mais savoir quand aucune idée...)

    Tiens au cas ou le lien pour le blog http://ajourneyagainstobesity.blogspot.fr/

    Merci d'avance tu pourrais me sauver car ça fait bien 5 jours que je suis sur ces 3 choses non stop et ça me bloque vraiment!

    RépondreSupprimer
    Réponses
    1. Bonjour Mathis,
      Pour le curseur au survol de l'image de la barre de recherche, remplace ce code :

      /* Bouton valider au survol de la souris */
      #barre_nav #search-btn:hover {background-color: #e7c049; /* Couleur de fond */
      color: #fff; / * Couleur de la police */
      }

      Par celui-ci :

      /* Bouton valider au survol de la souris */
      #barre_nav #search-btn:hover {background-color: #e7c049; /* Couleur de fond */
      color: #fff; /* Couleur de la police */
      cursor: pointer; /* Apparence du curseur */
      }

      cursor définit l'apparence de la souris. Il y a plusieurs valeurs possibles (j'ai mis pointer par défaut, c'est une petite main comme pour les liens). Tu trouveras une liste des valeurs possibles ici : http://www.w3schools.com/cssref/pr_class_cursor.asp

      Pour les commentaires, ils s'affichent seulement sur les articles où tu as déjà un commentaire :/
      Je crois que le problème vient directement de ton code HTML. Pour y remédier il faudrait regarder directement le code de ton blog et le comparer à un code qui fonctionne.

      Pour le header, cherche ce code :

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>

      Remplace no par yes comme ceci :

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='yes'>

      Tu pourras alors ajouter des gadgets à la partie Header ;)

      Supprimer
  21. Bonjour Catherine, je suis un fan inconditionnel de tes tutoriels Blogger ! J'aimerai beaucoup créer une barre de recherche comme la tienne (certes c'est copié mais j'apprécie beaucoup le style), serais-tu m'expliquer comment faire ? Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Merci ^^
      Vous êtes plusieurs à m'avoir demandé comment faire une barre de recherche comme la mienne. Je vais en faire un tutoriel, je le rajoute sur ma (longue) liste de tutos à faire ;)

      Supprimer
  22. Bonjour ! Merci beaucoup pour ces tutos, mon blog va de mieux en mieux. Mais j'ai un petit problème : je n'ai pas compris comment changer les couleurs de la barre de recherche ? Merci déjà pour votre réponse :)
    si jamais mon blog c'est http://alisslectures.blogspot.ch/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réussi à modifier les couleurs ?

      Supprimer
  23. Bonjour Catherine, déjà merci énormément pour ce tutos ainsi que tous les autres qui m'ont clairement aidé à TOUT faire sur mon blog, c'est vraiment parfait et ton blog est en plus de ça hyper design, j'adore le côté flat que tu lui as donné.
    Bon alors j'ai quand même un petit problème de conception pour ma barre de recherche, je n'arrive pas à aligner le bouton valider sous le champ de recherche côté gauche, le bouton se met automatiquement en dessous certes mais centré par rapport à ma barre de recherche. Je n'arrive pas à copier mon code HTML ici mais tu peux aller voir directement sur mon blog :
    http://cactus-orchidee.blogspot.fr/

    Amicalement, Olivia


    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      Souhaites-tu centrer le boutons sou le champ de recherche ou déplacer le bouton à droite (ou à gauche) du champ de recherche (sur une même ligne) ?

      Supprimer
  24. Pardon pour le retard ! Oui j'ai finalement réussi à changer les couleurs :) Merci beaucoup pour votre aide précieuse !

    RépondreSupprimer
  25. bonsoir j'ai vue se tutoriel mais j'ai essayer mais impossible je comprend pas sur mon ancien blog je mettait le css a part la il faut mettre tout en Html je suis nouvelle ici merci de m'aider si vous le pouvez la j'ai mit comme vous me le dite mais je vois rien de changer bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas ton gadget de recherche sur ton blog, as-tu supprimé le gadget ?

      Supprimer
    2. coucou oui sa faisait moche tous les écries dessus je galère moi qui voulait mettre de beaux boutons en css comme mon autre blog j'arrive même pas a mettre sa je suis bien triste

      Supprimer
  26. Bonjour Catherine, Ton auto est super comme tous tes autos, mais je voudrais savoir comment faire une barre de recherche comme la tienne. Elle est tellement belle !
    Continue ainsi.

    RépondreSupprimer
  27. Bonjour, votre gadget est vraiment joli et le tuto est très clair, mais je voulais savoir comment enlever la barre de recherche d'origine sur blogger. Car j'ai actuellement 2 barres de recherches, l'une jolie, et l'autre étant celle de base.
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il suffit de supprimer le gadget qui ne te plaît pas. Pour cela vas dans Mise en Page. Clique sur Modifier sur le gadget en question. En bas de la fenêtre qui s'ouvre, clique sur le bouton Supprimer et voilà ;)

      Supprimer
  28. Bonjour, ayant perdu mon dernier com je ne sais pas si tu as répondu ou non mais j'ai quelques souçis et j'espère que tu pourras m'aider

    1)J'ai mis ma barre de recherche dans la seconde partie de ma barre de navigation, et elle n'apparait pas en ligne, mais plutot avec le bouton recherche en dessous de l'autre bloc, et de mettre le bouton valider sur sa gauche (que j'ai essayer de remplacer par une image, sans succès.)

    2)J'aimerais utiliser 100% de la place sur mon blog au niveau des articles, mais tu peux voir qu'il y a 5cm de marches à gauche et à droit (je ne parle pas de l'entête et du pied de page, que j'ai pu mettre à 100% grâce à tes précieux conseils). J'ai vu sur certains blogs qu'un article pouvait prendre 100% de la page du blog (sans barre latérale), pourrais tu m'expliquer comment ?

    Je te remercie d',avance pour tes conseils et tes solutions, je te laisse l'adresse de mon blog pour que tu puisses m'aider au mieux: http://wearemultifaced.blogspot.fr/

    Amicalement, Lina

    RépondreSupprimer
    Réponses
    1. Bonjour Lina,
      Je vois que tu as réglé le problème de la barre de recherche ;)
      Pour ce qui est des marges, j'ai répondu à ton précédent commentaire

      Supprimer
  29. Coucou, deja merci beaucoup pour tes tutoriels toujours au top ! Étant débutante dans le domaine je ne galére pas du tout donc mille MERCI !!
    J'ai bien réussie à mettre et à personnaliser ma barre de recherche mais j'aimerais avoir le bouton "valider" (donc "GO !" pour moi) sous forme circulaire comme pour les dates d'articles, je sais pas si tu vois ce que je veux dire ?!

    >> ladouceplume.blogspot.fr

    Merci d'avance, des bisous :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche ton code CSS suivant :

      /* Bouton valider */
      #searchthis #search-btn {
      font-family: PT sans; /* Police du texte */
      font-size: 11px; /* Taille de la police du texte */
      font-weight: bold; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères */
      text-transform: uppercase; /* Transforme le texte en majuscules */
      color: #000000; /* Couleur du texte */
      border: none; /* Pas de bordure */
      background-color: #ffffff; /* Couleur de fond */
      }

      Ajoute les lignes suivantes avant le signe } :

      -webkit-border-radius: 50%; /* Bords arrondis */
      border-radius: 50%; /* Bords arrondis */
      width: 36px; /* Largeur du bouton */
      height: 36px; /* Hauteur du bouton */
      margin-left: 10px; /* Marge à gauche du bouton */

      Pour avoir une forme ronde, le bouton doit être carré, pour cela j'ai précisé une hauteur et une largeur. Tu peux modifier ces valeurs pour rendre le bouton plus grand ou petit, mais change à chaque fois les 2 valeurs (hauteur et largeur).

      Supprimer
    2. Merci beaucoup c'est exactement ce que je voulais, pleins de bisous :)

      Supprimer
  30. Merci beaucoup pour ce petit tuto clair et simple pour les débutant dans mon genre.
    L'intégration fut simple et ca marche comme je le voulais =D

    RépondreSupprimer
  31. Bonjour ! :)
    Merci pour le tutoriel !
    J'ai essayé de remplacer le texte du bouton valider par une icône (d'abord avec Font Awesome puis avec une image) mais je n'ai absolument par réussi.
    Pourrais-tu m'aider s'il te plaît ?
    Es-ce que tu pourrais faire un tutoriel pour réaliser une barre de recherche comme la tienne ?

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux utiliser une image en fond. Utilise ce code CSS :

      input#search-btn2 {
      background-color: transparent !important; /* couleur de fond transparent */
      background-image: url('http://url.com/image.png');
      border: none !important; /* aucune bordure */
      background-size: contain; /* l'image ne dépassera pas la taille du bouton */
      background-repeat: no-repeat; /* l'image ne sera pas répété */
      width: 20px; /* largeur du bouton et donc de l'image */
      height: 20px; /* hauteur du bouton et donc de l'image */
      }

      Supprimer
  32. Bonsoir Catherine,

    Tout d'abord, un grand merci pour tous tes tutos... Ils me sont d'une très grande aide ! Félicitations pour tes explications accessibles à tous :)

    J'ai voulu créer la barre de recherche, mais celle-ci reste attachée à ma barre de navigation. Or, je souhaite qu'elle soit dans la colonne de droite (ou j'ai actuellement un autre widget recherche). Sais-tu comment "bloquée" la barre sur la droite?
    http://mercilacommere.blogspot.fr/

    Je te remercie :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient du fait que le code HTML de ta barre de recherche se trouve dans le gadget HTML qui contenait ton menu. Je suppose que ton menu était fixé en haut du blog. Le code CSS qui fixe le menu en haut du blog, fixe ce gadget HTML et son contenu. Déplace le contenu du gadget dans un nouveau gadget HTML, dans la barre latérale, et voilà ;)

      Supprimer
  33. C'est bon, problème résolu :)
    J'ai modifié la valeur "position: fixed" du menu.
    merci d'avoir pris du temps pour moi en tout cas.
    Vivement les prochain tutos, encore merci pour toutes cette aide.

    Bonne soirée

    RépondreSupprimer
  34. J'ai un probleme ma barre de recherche et mon bouton ainsi que les bordure prenne toute la largeur de l'écran

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog ou me donner plus de détails ?

      Supprimer
  35. Bonjour,
    Merci beaucoup pour ce tuto très bien détaillé.
    Mais comment faire pour changer la couleur et qu'elle ne resta pas orange ?
    Merci d'avance !
    Et, au fait, ton blog est génial !!!

    RépondreSupprimer
  36. Re-bonjour,
    En regardant bien les codes CSS, je viens de trouver la solution à mon problème.
    En te remerciant,
    Karelle

    RépondreSupprimer
  37. Bonjour,
    J'ai bien réussi à faire ma barre de recherche, mais par contre j'ai un problème de recherche.
    C'est à dire que que la recherche ne prend en compte que ce qu'il y a dans les articles et non pas sur les pages.
    Est ce possible d'y remédier ?
    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui effectivement la recherche ne prend en compte que les articles. Je ne suis pas sûre qu'elle peut prendre en compte les pages. Je vais chercher mais pas sûr que ça marche :/

      Supprimer
  38. Juste merci.
    Merci du fond du coeur Catherine.

    RépondreSupprimer
  39. Bonjour,

    J'ai ajouté une barre de recherche en suivant tes tutoriels. Cependant, la recherche ne fonctionne pas. J'ai sans doute raté quelque chose. Peux-tu me dire si ce que j'ai fait est correct ou me donner quelques pistes pour résoudre le problème ? Merci d'avance !
    https://lubiesrousses.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Annelise,
      Le code HTML de ton champ de recherche n'est pas bon. Tu devrais avoir ceci :

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

      Or à la place de form tu as a. Remplace les a par form et cela devrait marcher normalement.

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger