Come creare casella di ricerca con riconoscimento vocale su Blogger

Tutto ha avuto inizio con la ricerca vocale presente nei dispositivi Android e iPhone, poi con l'introduzione anche nel motore di ricerca Google Chrome eseguire delle ricerca attraverso il riconoscimento vocale è diventato oltre ad una operazione divertente anche utile in quanto si possono dire parole come quelle inglesi in base alla pronuncia e sperare che la casella di ricerca ottimizza la parola in modo corretto. Ricordo che non è l'unico metodo per inserire un motore di ricerca su Blogger attraverso un semplice codice.

Per renderla disponibile sul vostro blog dovete incollare il codice seguente su un'area HTML, per esempio incollandola nella parte HTML del post l'ho potuta rendere funzionante persino dentro il post. Per funzionare dovete cliccare sul simbolo del microfono e non appena si aprirà la piccola finestrella con scritto Parla adesso dovete pronunciare la parola da cercare all'interno del blog e una volta che sarà apparsa premete il tasto Enter (Invio per intenderci) per avviare la ricerca. Questo motore di ricerca interno del blog può essere utilizzato anche con la sua funzione standard, ovvero la parola potete anche scriverla manualmente e premere sempre il tasto Invio per la ricerca.

Per installarla Blogger dovete andare su Layout > Aggiungi un gadget > Base > HTML/Javascript ed incollare il codice qui sotto, apportando le opportune modifiche:

<style>

#Cerca input[type="text"] {  

    background: #efefef;

    border: 1px solid #000;

    font: bold 12px Georgia;

    color: #000;

    outline:0px;

    width: 200px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;  

    }

</style>

<form id="Cerca" action="http://www.scuolissima.com/search/" id="searchform" method="get"> <input id="s" name="q" placeholder="Cerca..." type="text" value x-webkit-speech="true" /> </form>

Sostituite il nome del blog scuolissima con quello di vostra proprietà. Per quanto riguarda la grafica prenderà la stessa forma di quella del vostro blog, per esempio io uso un tema classico e di conseguenza anche la casella di ricerca avrà una forma classica, non delle migliori per eleganza.

Potete però personalizzare la casella di ricerca agendo sul codice:

background: per variare il colore di sfondo
border: colore e stile del bordo
font: dimensione e tipologia di scrittura
color: colore del testo
width: per variare la larghezza della casella di ricerca
10px; per l'arrotondamento
www.scuolissima.com è il dominio su cui effettuare le ricerche (Importante)
Cerca… è il testo dentro la casella di ricerca prima della parola da cercare