Widget Recherche personnalisée avec Google pour Blogger

Dans cet article nous allons voir comment ajouter un champ de recherche personnalisée Google en utilisant le widget Champ de recherche créer par Blogger.

Étape 1 : Ajouter le widget

C'est très simple, connectez vous à Blogger, allez dans Présentation -> Élément de la page puis cliquez sur Ajouter un gadget et dans la liste il faut choisir le widget "Champ de recherche".
C'est tout, visualisez votre blog et testez le nouveau champ de recherche.

Étape 2 : Personnaliser l'affichage avec du CSS

 Vous trouvez que le champ de recherche est moche ??? Voici un petit code CSS pour arranger cela :
/* ---- Recherche Google ---- */
input.gsc-search-button {
    background:url("http://2.bp.blogspot.com/_xDpoN6UfFFY/TNJ0OtFl8cI/AAAAAAAADEM/twPzJLJGF6Y/s1600/bg2.png") repeat scroll 0 0 transparent;
    border:1px solid #DFDFDF;
    padding:5px 1px;
    color:#999;
    cursor:pointer;
    text-align:center;
    text-decoration:none
}
.gsc-search-button input:hover {
    background:#FFF;
}
input.gsc-input {
    border:1px solid #DFDFDF !important;
    padding:6px !important;
}
.gsc-branding-text, .gsc-branding-img-noclear, .gsc-branding-img, #searchform label.screen-reader-text {
    display:none
}
il faut ajouter ces lignes dans le code HTML de votre blog juste avant ]]></b:skin>

La vidéo

Comme d'habitude voici une vidéo pour vous simplifier la vie encore plus.

Libellés : Publié le jeudi, novembre 04, 2010
17 Commentaires
  1. merci.
    bon j'ai un souci car il est impossible d'accéder au champ de saisie je ne peux rien entrer.
    Bizarre
    merci

    RépondreSupprimer
  2. Même sans ajouter le CSS ???
    C'est quoi ton Blog ?

    RépondreSupprimer
  3. http://perdre-la-raison.blogspot.com/
    j'ai mis le champ tout en bas.

    RépondreSupprimer
  4. oui même sans le CSS ça ne fonctionne pas non plus.

    RépondreSupprimer
  5. Je ne sais pas pourquoi ça ne marche pas ^__^
    Mais en faisant un clique droit le champ de recherche s'active !!!

    RépondreSupprimer
  6. c'est étrange ce truc. merci d'avoir trouvé le clic droit et du coup j'ai ajouté un petit mot en titre.

    RépondreSupprimer
  7. Essai peut être de l'ajouter dans la sidebar et non pas dans le footer

    RépondreSupprimer
  8. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  9. mercii super cool http://youtous.blogspot.com/

    RépondreSupprimer
  10. merci leblogger sa marche bien mes comment ajeté dans l'en téte a droite: enlignetout.blogspot.com/

    RépondreSupprimer
  11. Sofiane j'ai trouvé pourquoi ça ne fonctionnait pas.
    J'ai un script anti-copie qui visiblement bloque le champ recherche

    C'est ce script qui est là que j'avais mis : http://mariebosolutions.blogspot.com/2010/01/comment-empecher-le-vol-de-contenu-sur.html

    du coup je l'ai enlevé

    RépondreSupprimer
  12. Bonjour,
    Merci c'est super l'astuce mais sur mon blog, ça prend toute la largeur, c'est un peu bizarre mais ça donne tout de même un style hihi

    RépondreSupprimer
  13. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  14. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  15. Bonjour,
    mon widget est installé depuis longtemps déjà mais depuis quelques temps il ne fonctionne plus, il ne trouve rien ?????
    une idée?

    http://www.golf-reve-realite.fr/

    Merci beaucoup :)

    RépondreSupprimer
  16. mon gadget rechercher dans ce blog ne fonctionne plus également et ceci sans raisons apparentes ... pourquoi offrir de tels gadgets s'ils ne fonctionnent pas

    RépondreSupprimer
  17. galaxy note 3 je trouve ce blog hyper constructif, je vais inviter mes amis à venir consulter vos pages :)

    RépondreSupprimer

Copyright 2015 Soufiane.fr