Come creare una casella di ricerca originale per Blogger.

Come creare una casella di ricerca personalizzata nei colori e nelle dimensioni per Blogger.

Nei blog su piattaforma Blogger esistono molti modi per mostrare ai lettori una casella di ricerca in modo da accedere in forma più analitica ai contenuti che vi abbiamo pubblicato. In tutti i siti dovrebbe essere presente una simile funzionalità per evitare che i visitatori ci lascino dopo aver letto un articolo vista l'impossibilità di cercare nel blog argomenti di loro interesse.

Si può usare il widget classico di Blogger che tra l'altro è anche molto funzionale. Si va su Layout > Aggiungi un gadget > Casella di ricerca.  Si può limitare la ricerca al nostro sito, estenderla a tutte le pagine che sono state linkate a addirittura a tutto il web.

Un'altra opzione particolarmente interessante è quella di selezionare Aggregatore e inserire nella lista il titolo di un widget Elenco di link per fare delle ricerche nei blog che vi sono elencati. Con questo sistema si può facilmente creare un motore di ricerca per il nostro sito da inserire in un blog di prova in modo da evitare di cercare pagine del blog con il motore del nostro sito per non sballare le statistiche.

Altre possibilità sono date dal motore di ricerca collegato ad Adsense e dal motore di ricerca creato con le API di Google. Quest'ultimo ha modificato qualcosa e in seguito è probabile che gli dedichi un altro post in futuro. Ho anche mostrato come creare un motore con aspetto personalizzato e come inserire una casella di ricerca nella Intestazione di Blogger. Con questo articolo voglio offrire un'altra alternativa

Si tratta di un campo orizzontale arrotondato che si espande prendendo tutta la larghezza della sidebar quando ci si clicca sopra. Dopo aver digitato le parole chiave basta cliccare su Invio

Ovviamente può essere personalizzato il colore di sfondo e il colore del testo. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il seguente codice

<form id="Cerca" action="/search" style="display:inline;" method="get">
<input name="q" type="text" placeholder="Cerca..."/>
</form>
<style>
#Cerca input[type="text"] {
    background: #666666;
    border: 0 none;
    font: bold 12px Trebuchet,Arial,,Helvetica,Sans-serif;
    color: #ffffff;
    outline:0px;
    width: 120px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -webkit-transition: all 0.6s ease 0s;
    -moz-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    }
#Cerca input[type="text"]:focus {
    width: 160px;
    }
</style>

I parametri in rosso possono essere personalizzati e riguardano oltre ai colori anche la larghezza del box e la dimensione dei caratteri. E' inoltre possibile modificare l'arrotondamento (raggio di 10 pixel), la quantità e il tipo di ombreggiatura e la durata della transizione (0.6 secondi). Questa casella di ricerca sarà visualizzata correttamente con Firefox, Chrome e Internet Explorer 9 e IE10.

Aggiornamento: Questo codice non è più funzionante.