Pubblicato il 30/10/12e aggiornato il

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

casella-di-ricerca

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.




15 commenti :

  1. Ciao Ernesto, la casella di ricerca che proponi è interessante. Consentimi di segnalarti che è poco pratica perchè quando scrivi devi preventivamente cancellare o selezionare, per scriverci sopra, la scritta "Cerca..." altrimenti anche la parola "Cerca..." entra a far parte dei criteri di ricerca. Almeno, dalle prove, è quello che ho notato io. Grazie! Ciao

    RispondiElimina
  2. E' una modifica molto interessante da inserire nel blog - ho fatto delle prove e sembra funzionare meglio del widget ufficiale di Blogger - ma ho notato anch'io l'inconveniente segnalato da Ciclocolor.

    Tks

    RispondiElimina
  3. @ Ciclocolor
    @Bastet
    E' vero. Si può ovviare lasciando il campo in bianco e mettendo il titolo al widget

    RispondiElimina
    Risposte
    1. Grazie Ernesto. Sempre disponibile e tempestivo. Ciao

      Elimina
  4. Risposte
    1. Sembra funzionare anche inserendo "placeholder" al posto di "value".

      Elimina
    2. E' vero! Con placeholder funziona. Grazie! Ciao

      Elimina
  5. Ciao Ernesto, io utilizzo il sistema di ricerca di Google con un unico campo di ricerca come il tuo. Mi chiedevo se fosse possibile personalizzare il sistema prevedento tre campi di ricerca in modo da ottenere una ricerca aggregata. Per spiegarmi meglio ipotizziamo che voglia cercare i post che contengono tutte e tre le seguenti parole: giallo, verde e rosso. Vorrei che si potesse inserire ogni singola parola in un campo e cliccando su cerca ottenere i post che le contengono tutte e tre.

    RispondiElimina
  6. @ Bastet, la dea gatta
    Grazie dell'idea. Ho cambiato il codice :D

    @La cucina imperfetta di Giuliana
    Troppo complicato per le mie conoscenze :)

    RispondiElimina
    Risposte
    1. NB: chi usa IE non vedrà il testo suggerito dall'attributo "placeholder".

      Io ho fatto una prova con IE9, non so se poi con il 10 le cose migliorano.

      Elimina
  7. Ciao Ernesto, sai se si può fare un motore di ricerca con i seguenti campi: "cerca attività" e "Dove" oppure "Cosa" e "Dove"?
    Ti ringrazio in anticipo
    Piergiorgio

    RispondiElimina
    Risposte
    1. R @ Piergiorgio Carlini
      Come è scritto alla fine di questo post, il sistema non funziona più.

      Elimina
    2. Un ultima domanda Ernesto, poi non ti rompo più, e tu lo puoi fare? Sarebbe una cosa stupenda :))

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.