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/AVvXsEg-ju6qgxNWz-1soec5v8M7-fCWo-pUDSHbIAxSQ_N8n2nLGEr6fnlC6Xy_TEs6Op9RL9ByKVI3NTSUpyxZoV2paD4YfwjanHh3COj4lyQ-B1kVBBkTQaUFWV64Ua3Zk9zcuPL9M9DGAb8/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/AVvXsEgNBRUqxKo2GRepaDcV_1cD4yAa5y1ET48M97ZeOGRBAZl2WLRvRRGb2qHawbk1AaVJHZ8eVKU5HjTnHp0IqGwIKiHjPPzv0OUpcDoZR9-427x_tprOtCjIRn7XwjuVR7tZsSUViop_oBo/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 2 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUsbFXyQ3t1PGPQ6xpDtT0OfyKk1Jt-mYdxzOfMXkKwyiwRNXwjitdOpLbXfji3DkuKYnYOyy0-PVMXOCFL6qU818lv0HyA7i_URpXy-umjn_KCdLykp-CXFhB798gZG3fg7n3fo90k0/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/AVvXsEgNBRUqxKo2GRepaDcV_1cD4yAa5y1ET48M97ZeOGRBAZl2WLRvRRGb2qHawbk1AaVJHZ8eVKU5HjTnHp0IqGwIKiHjPPzv0OUpcDoZR9-427x_tprOtCjIRn7XwjuVR7tZsSUViop_oBo/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 3 :

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

Style 4 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Y01LBF74ERSudI0jKeBtp8rzAUwr-oCmxXUglXoT-VhHDzBH-nClHnVHfkYvDosDpY2vwEeNR8W2ApcfKucUppZZS6NnhNFcgWV8n3UtRUdF4EgGaYwk0d8WK6EOhhze03tApgJAa44/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/AVvXsEgNBRUqxKo2GRepaDcV_1cD4yAa5y1ET48M97ZeOGRBAZl2WLRvRRGb2qHawbk1AaVJHZ8eVKU5HjTnHp0IqGwIKiHjPPzv0OUpcDoZR9-427x_tprOtCjIRn7XwjuVR7tZsSUViop_oBo/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 5 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkeLWpfQ1z3P6GEc6zeykoeKW-WBjQ1VOylowKAhJlcWrO7HTXq4qxEP1PMZuQPLBUmBStKU1rJz6u8hJlomhiDfa_fWqurwGBUbdxNrlQhFCksQ2-JKq5n39zOCJKfPsWbg1FzatZhJo/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/AVvXsEgNBRUqxKo2GRepaDcV_1cD4yAa5y1ET48M97ZeOGRBAZl2WLRvRRGb2qHawbk1AaVJHZ8eVKU5HjTnHp0IqGwIKiHjPPzv0OUpcDoZR9-427x_tprOtCjIRn7XwjuVR7tZsSUViop_oBo/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 6 :

<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolo6g2gLSJITKHzfrOy5pE0k_VzIW53EQpQo1gvpUh6a1hs-gYdInrDaWl4yKHLuvs7X8LbmqdjKR3ZCtDdFSoDXLjiC45Te3WhQ8DEo06fo5Q64NTs8Mqc-xZDJg-p7xKyEwppDJPgc/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/AVvXsEgNBRUqxKo2GRepaDcV_1cD4yAa5y1ET48M97ZeOGRBAZl2WLRvRRGb2qHawbk1AaVJHZ8eVKU5HjTnHp0IqGwIKiHjPPzv0OUpcDoZR9-427x_tprOtCjIRn7XwjuVR7tZsSUViop_oBo/s1600/blank.gif" id="sbutton" />
</form>
</div>

Label: Widget