2 janv. 2013

Ajouter Un Champ De Recherche Interne Personnalisé Dans Blogger

Champ De Recherche Interne
Ajouter un champ de recherche interne personnalisé dans votre blog Blogger afin de permettre à vos visiteurs de retrouver directement ce qu'ils cherchent sans passer par la liste des libellés ou des archives.
Vous pouvez placer ce champ de recherche au début ou à la fin de chaque article, dans le corps du message, dans le header ou dans la barre latérale.






Insérer Un Champ De Recherche Interne Personnalisé Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ copier/coller le code de la zone de recherche puis cliquez sur "Enregistrer"

Style 1 :
<style type="text/css">
#tb-searchbox{background:url(http://2.bp.blogspot.com/-JQK5rekxCfI/UONxRNUBSdI/AAAAAAAABnw/UVNAczBDv0o/s1600/champ-recherche1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 2 :
<style type="text/css">
#tb-searchbox{background:url(http://3.bp.blogspot.com/-AI1uTSogPKE/UONxpCYygtI/AAAAAAAABn4/D5NnS5fyFgc/s1600/champ-recherche2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 3 :
<style type="text/css">
#tb-searchbox{background:url(http://1.bp.blogspot.com/-L1x50iYUhcc/UONx8NbANhI/AAAAAAAABoA/k6jMg6J6kQU/s1600/champ-recherche3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 4 :
<style type="text/css">
#tb-searchbox{background:url(http://4.bp.blogspot.com/-IMj5WTIUZqM/UON1nNQvaqI/AAAAAAAABo8/ZJ_r_Qr3BF0/s1600/champ-recherche4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche"/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 5 :
<style type="text/css">
#tb-searchbox{background:url(http://4.bp.blogspot.com/-UOB9i1Cx3KE/UON2cEBOJmI/AAAAAAAABpE/fvjo3ZXWkzM/s1600/champ-recherche5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..."/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 6 :
<style type="text/css">
#tb-searchbox{background:url(http://2.bp.blogspot.com/-d0swyx3A604/UON2-kU3-QI/AAAAAAAABpM/IdmTGaBaipo/s1600/champ-recherche6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..."/>
    <input type="image" src="http://4.bp.blogspot.com/-94jOHYIDCmo/UON0BpnonlI/AAAAAAAABog/3MWuxfrpHwk/s1600/blank.gif" id="sbutton" />
</form>
</div>

7 commentaires:

  1. Bonjour,

    comment on fait pour reduire la largeur de la barre de recharche.

    PS: ton blog est magnefique franchement.

    a bientot

    RépondreSupprimer
  2. Bonjour et merci, vos champ de recherches sont plutôt sympa.

    Existe t il un champ de recherche qui s'applique aux libellés (blogger)?

    Le recherche interne ne s'applique qu'aux mots présent dans le contenu du message, pas les libellés qui lui sont attachés… sur le web je ne trouve rien à ce sujet :/

    Merci pr la lecture

    RépondreSupprimer
  3. bonjour merci pour ce tuto, mais moi aussi j'ai ce problème de largueur, s'il vous plaît comment la réduire?

    merci

    RépondreSupprimer
  4. bonjour,
    j'aimerais aussi reduire la taille de la barre de recherche, comment faire ?
    merci

    RépondreSupprimer
  5. Pour réduire la taille de la barre de recherche, il faut faire sa propre image de background et la réduire en taille (par exemple, sur mon blog, j'ai réduit l'image à 295px en largeur) et bien sûr, l'héberger, et insérer le lien de votre image dans : {background:url(http://URL-DE-VOTRE-IMAGE.png)
    J'ai personnalisé la mienne, ce qui donne cela : http://www.lescheveuxdemini.com/ (voire dans la barre sur le côté) ça a vraiment plus de cachet que le champ de recherche basique de blogger.
    Merci pour le tuto !

    RépondreSupprimer
  6. Bonjour,
    Comment puis-je faire pour changer la police du mot "recherche..."?
    Merci

    RépondreSupprimer
  7. VRAIMENT VOUS ME RÉGALEZ LA très soutenu très simple bonne continuation ;;;je suis nouveau sur blog je me sens un génie grâce à vous mille merci

    RépondreSupprimer