Pubblicato il 28/01/12e aggiornato il

Come inserire una casella di ricerca personalizzata in Blogger.

Ho già avuto modo di presentare diversi metodi per installare una casella di ricerca per il nostro sito. Il sistema più usato è forse quello di utilizzare il servizio di Adsense ma si può inserire un modulo di ricerca anche in un menù orizzontale, crearsi un modulo di ricerca personalizzato, inserire la ricerca nell'header o anche creare un motore di ricerca esterno al blog che poi è quello che uso materialmente per fare le ricerche sul mio sito in modo da avere statistiche di ricerca fatte dai dei lettori che siano affidabili.

Voglio adesso illustrare un'altra procedura foriera di ulteriori sviluppi che magari affronterò in un prossimo articolo. Questo modulo potrebbe essere per esempio inserito in modo flottante nel template e si presta molto meglio di altri a essere incorporato in un menù o all'interno di qualche altro gadget. Si può anche personalizzare l'aspetto della casella di ricerca scegliendo i font, lo stile e l'immagine di sfondo.

Dopo aver salvato il template per un eventuale backup di ripristino, i va su Design > Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> e, immediatamente sopra, si incolla il seguente foglio di stile

#moduloricerca {
background:transparent url(https://lh5.googleusercontent.com/-rr91nJALwfg/TyO_UGsR7XI/AAAAAAAAWU4/p-Sq5gQJzUY/s230/sfondo-ricerca.png) no-repeat scroll 0 0;border:medium none;
color:#eee;
font-family:Trebuchet MS;
font-size:17px;
font-style:italic;
padding:5px;
width:230px;
}

dove i dati in rosso possono essere personalizzati. Si tratta di

  1. L'immagine di sfondo della casella di ricerca che può essere caricata su Picasa
  2. Il colore del testo che viene digitato nella casella (#eee; vedi i codici dei colori)
  3. La famiglia di caratteri del testo
  4. La dimensione dei font (17 px)
  5. Il corsivo (italic): Se non interessa eliminare tutta la riga
  6. La distanza interna tra il testo e i bordi del modulo (padding di 5px)
  7. La larghezza della casella di ricerca

Si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'altro codice

<form action="http://search.blogger.com/" target="_blank"
name="b-search"><input class="moduloricerca" value="parsifal32-font.blogspot.com/" name="bl_url" type="hidden"/>
<input id="moduloricerca" onfocus="if (this.value == &quot;Cerca...&quot;) this.value = &quot;&quot;;" value="Cerca..." name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Cerca...&quot;;" type="text"/>
</form>

dove al posto di parsifal32-font.blogspot.com/ si mette l'URL del nostro blog senza la parte iniziale http://. L'espressione Cerca… è quella che vedranno di default i visitatori quando visiteranno il nostro sito e può essere modificata a piacere. Si salva e si posiziona con il drag & drop del mouse.

modulo-di-ricerca

Nel momento in cui si clicca sul modulo, l'espressione Cerca.. sparirà e si potrà digitare la keyword. Essendo presente il tag target="_blank", la pagina con i risultati verrà aperta in un'altra scheda. Si tratta di una normalissima pagina di Google che ha un URL con questa struttura

http://www.google.com/search?q=blogurl:URL_DEL_BLOG/&as_q=KEYWORD&tbm=blg 

La parte finale dell'URL della ricerca tbm=blg mostra i risultati relativi ai blog di default. Per iniziare una ricerca occorre cliccare su Invio





16 commenti :

  1. passa da me ho voluto premiarti per le idee che mi dai

    RispondiElimina
  2. ciao ernesto, ho inserito la barra di ricerca personalizzata google come quella che hai tu in questo blog per intenderci...xkè in alcuni risultati appaiono le immagini e altre no...da cosa dipende? grazie

    RispondiElimina
    Risposte
    1. @MarcoParrilla
      Onestamente non lo so dipenderà certamente dall'algoritmo di Google, che è comunque segretissimo :), e dalla presenza o meno di foto ben indicizzate.

      Elimina
    2. ho notato che anche da te è cosi, voglio dire ho fatto una ricerca e in alcuni post appaiono le immagini e in altre no...ok grazie buona giornata

      Elimina
  3. Ciao Ernesto, ho inserito la barra di ricerca personalizzata, adesso mi piacerebbe inserire accanto alla barra stessa, il tasto "Cerca", sai se è possibile aggiungerlo e come aggiungerlo? Grazie in anticipo per la risposta

    RispondiElimina
    Risposte
    1. Il pulsante presuppone un evento con il mouse che ci clicca sopra quindi non può essere inserito con queste modalità.
      @#

      Elimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. Purtroppo a me non funziona...ogni volta che provo a cercare mi rimanda alla pagina google che non trova l'url ... mi date una mano?

    RispondiElimina
    Risposte
    1. Prova con queste due opzioni
      http://www.ideepercomputeredinternet.com/2013/12/motore-ricerca-blogger.html
      http://www.ideepercomputeredinternet.com/2014/01/casella-ricerca-blogger.html
      @#

      Elimina
  6. Gentile Ernesto,approfittando della tua pazienza mi consigli come spostare a sinistra la casella di ricerca che vedi in alto nel sito http://infoutili.blogspot.it/
    Compare sia nel desktop che nel mobile ma mi occorre spostarla solo nella versione pc . Hai dritte? Grazie mille e buon weekend

    RispondiElimina
    Risposte
    1. Per diversificare la casella di ricerca del mobile e del desktop occorre inserire due codici con i rispettivi tag condizionali come mostrato in questo post
      http://www.ideepercomputeredinternet.com/2015/06/motore-ricerca-adsense-blogger-desktop-mobile.html
      Per centrarla, spostarla a destra o a sinistra si sceglie center, right o left nel div iniziale
      @#

      Elimina
  7. grazie per la risposta.Come mai secondo te compare sia nel desktopo che mobile ?Ho inserito un solo codice parsato. E' dannoso secondo te avere solo un codice?
    Non capisco poi div iniziale puoi farmi un esempio.Grazie ancora

    RispondiElimina
    Risposte
    1. <div align='center'>per centrare
      <div align='left'> per mettere sulla sinistra
      <div align='right'> per posizionarla a destra
      @#
      Non ne ho idea perché compaia in entrambe le versioni, forse non hai inserito bene i tag condizionali

      Elimina
    2. sempre gentile grazie,solo che c'è già il tag per posizionarla a destra solo che non è proprio sopra la foto. Magari si deve modificare larghezza pagina. Esistono dei tag per spostarla un po'?
      E riguardo invece al solo codice per entrambe le versioni credi sia dannoso. ?

      Grazie ancora tante

      Elimina
    3. Dannoso? e perché mai? Se non rispondo ti prego di non insistere con la stessa domanda, significa che non meritava risposta :)
      @# Prova con
      <div align='right'>
      <div style='margin-right:40px;'>
      CODICE PARSATO
      </div>
      </div>

      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.