Ajouter Un Champ De Recherche Interne Personnalisé Dans Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRHeJ_eChqX9L3FqcD6I0FcDGc9_2ThNAvCWn534gugONGelrhv6xwq3Gf2X7dnSUEOtTMsKfCZ913uGfb7JMJll_ArMz-Od_NyxDqfAmm2QGcsFesDUyLwnWZPkXA2hOz96tbCklw5k/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 2 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffdNHezv_fRvQQDw0noRI2TKzKtfr8uJjkLa3BglIKHooBE4UnIhNJ3Dlbqsi0X90rJrZ6VQe0-JkIKZ7pRPFPs0VBuTJDHOgVLz3HCMuWvXRKem7b-7ynLqRA4zI3ot5e_KwRV7WibQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 3 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQFXrzKhNDO_1c2O8B4L0HzOZXrhiVHMKuLoaLOWuMibSOwIgn-o3cQ6nrxKseSjJmLAA-ZfuC9xkMEjeA0osx99kQDdFn-2ywqbUQ930sFj1-OzcuyR8FjPFwrIbgY_vuufPxGygwDg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 4 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPC0SfaH5hZh6OTDJC8Vgz_uHDC6s-QyBftdvGyjpNhHmBznX7NOrSwOk0V6YzJ4yXmXc1HF0bFjFN4y7GsgtukS3guCP-2KfcZ0m00n3P7KQy55v63XuXmuprPjj4fz-dZEBO9WkHKZI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 5 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEAnKGaNjSNGwpn5Vt2HMlPv_jg7loZ0XvV860jXJUbm0TmF_V8i1Qslt2rAYsLxfj0tm65_g1lWlGBnOsnljdH7yovkM25ldBVC8c8APB6lJDe40qvEs58LtAcj_XH-ALxqnNWBrIYU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 6 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdqNW9KPWY3gLz8gN8PrJTzFy1wL415BMNxIpLf4dKUNpg2hLiyAdbhmk7b0Y79MTZFyy8ojG7_UtSS5JLCW5oEmTVUqbfA3Zx8lchh0izpqrM8llaHWRUBJVLjll-Yjv3IdmdrWAzLY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>