Come inserire una casella di ricerca personalizzata in un blog su Blogger.

Google offre diverse possibilità di implementazione nel blog di caselle di ricerca. Questo post vuole essere un aiuto per coloro che non sono soddisfatti da nessuna di queste perché la vogliono inserire in una posizione particolare o per altre ragioni. Se si è iscritti a Adsense, l'opzione migliore è quella di creare una casella di ricerca per il nostro blog che sfrutti la potenza di Google unita agli annunci pubblicitari di Adsense. Un'altra opzione validissima è quella di andare su Design > Aggiungi un gadget > Casella di ricerca per poi inserirla nella sidebar

La casella di ricerca di Adsense, oltre a essere inserita come un qualsiasi altro widget, può anche essere collocata proprio sotto il titolo del blog o sotto la sua descrizione. Bisogna andare su Design > Modifica HTML e cercare questo blocco di codice

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>

dopo aver messo la flag su espandi modelli widget e aver salvato il modello. Se si incollerà il codice ottenuto da Adsense subito sotto queste due linee, la casella di ricerca si visualizzerà sotto Titolo del blog e la sua Descrizione. Se invece sarà inserito tra la riga rossa e la riga blu, la sua posizione sarà sotto il titolo e prima della descrizione. Essendo un inserimento all'interno del modello, potrebbe rendersi necessario convertire il codice in linguaggio XML con Blogcrowds. Vediamo invece come inserire nella stessa posizione un codice di ricerca personalizzata che potrebbe essere questo

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="40" type="text" value="Digita parola chiave"  style="background: #ffffff; padding:4px; border: 1px solid #003366;height:20px;"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipONzWmIYumyWk6-Pcn7e3SHxaw8Bc-KGiCldP69mzNClTER5XF26M-NKnp_KOvgjprp1EWgoBPftGDKvFFJ-HiH-ExumMEFmuzprmSwyshKOJPjRtYoSa1Y7K2GcZC1k0fBKUIcPvPTMF/" style="margin-left: 5px; margin: 0px 5 0 0px;"/></form>

Anche in questo caso si può inserire il codice dopo entrambe le righe o solo dopo la prima, se si preferisce la posizione tra Nome del blog e la sua descrizione. Le personalizzazioni riguardano

1. La lunghezza del form che dipende dal numero dei caratteri da inserire size="40"
2. Lo sfondo della casella: background: #ffffff;
3. La distanza tra il testo e i bordi: padding:4px;
4. Lo stile dei bordi: border: 1px solid #003366;
5. L'espressione che il navigatore legge nel modulo value="Digita parola chiave"
6. L'altezza della casella: height:20px;
7. Il colore dello sfondo della casella: background: #ffffff;
8. L'icona che si visualizza sulla destra della casella (URL in rosso di 24 pixel in PNG)
9. La distanza tra casella e icona: margin-left: 5px

Le due righe di codice indicate sono presenti sia nei vecchi template che in quelli più recenti ottenuti con il Designer Modelli.

• Demo della casella di ricerca inserita tra Nome Blog e Descrizione -

Se si vuole inserire una casella di ricerca accanto a un menù, occorre semplicemente aggiungere all'HTML del menù questo codice

<span><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="40" type="text" value="Digita parola chiave"  style="background: #ffffff; padding:4px; border: 1px solid #003366;height:20px;"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipONzWmIYumyWk6-Pcn7e3SHxaw8Bc-KGiCldP69mzNClTER5XF26M-NKnp_KOvgjprp1EWgoBPftGDKvFFJ-HiH-ExumMEFmuzprmSwyshKOJPjRtYoSa1Y7K2GcZC1k0fBKUIcPvPTMF/" style="margin-left: 5px; margin: 0px 5 0 0px;"/></form></span>

con le stesse personalizzazioni per quanto riguarda l'aspetto. Vedi la Demo del Dock Menù.
Fonte| Anshuldudeja -