Pubblicato il 10/03/11 - aggiornato il  | 15 commenti :

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
casella di ricerca
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.
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 -


15 commenti :

  1. ecco il mio problema era che mi allinea la casella alla base delle icone... invece io vorrei posizionarla al centro della riga... come posso fare?

    RispondiElimina
  2. vabbè nn scervellarti, ho deciso che lo metto in alto a destra... non ci sta male. Grazie per l'articolo :*

    RispondiElimina
  3. Volevo segnalare qualora anche tu fossi stato contattato che mi è giunta mail di modifica termini e condizioni adsens e se conosci l'argomento o il motivo darci istruzioni circa il da farsi
    tieni presente che io sono publisher ma più per agevolare chi mi ospita
    gratuitamente che altro .. le mie "entrate" sono .. atomiche o sub-atomiche
    ;-)

    RispondiElimina
  4. no perchè c'è allegato un contratto che mette paura solo ad aprirlo
    ehehehe

    RispondiElimina
  5. @Tex Willer
    Quella email è arrivata a tutti e non mi sembra che il nuovo contratto sia in qualche modo diverso dal precedente. Sarà stata variata solo qualche postilla e per questioni burocratiche hanno dovuto informare tutti i publisher. Loro ovviamente si lavano le mani se qualcuno non capisce i concetti espressi in legalese stretto.

    RispondiElimina
  6. allora mi rincuori ..
    ma c'è da accettare e spuntare qlcs sui link forniti che tu sappia??

    RispondiElimina
  7. @Tex Willer
    A me è arrivata la stessa email che è arrivata a te e che è arrivata a tutti gli altri, con il link al nuovo contratto in cui non ho trovato nulla di sostanzialmente diverso dal precedente. Non ci sono link o altro all'infuori di quello. Magari il 22 Marzo si può dare un'altra occhiata per vedere se è cambiato qualcosa.

    RispondiElimina
  8. ciao, mi sono accorto che la casella di ricerca nel mio blog non funziona...mi spiego meglio, qualsiasi parola si cerchi rimanda sempre alla home page.
    Hai qualche suggerimento?
    Grazie

    RispondiElimina
  9. @bizzo
    Era successo anche a me. Prova a riacquisire il codice e a reinstallarla

    RispondiElimina
  10. e se la voglio posizionare accanto al header?

    RispondiElimina
  11. @Manager
    Devi dividere l'header in due parti quindi inserire la casella di ricerca come widget
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-l-di-blogger-in-due-parti.html

    RispondiElimina
  12. Perché tu non usi la casella di ricerca di Blogger? Io mi sono accorto che anche discussioni vecchie e molto posizionate su google non riesce a trovarle questa casella di ricerca. per questo motivo hai scelto quella di Google?

    RispondiElimina
    Risposte
    1. @# I risultati di ricerca dovrebbero essere gli stessi a prescindere dalla casella di ricerca perché il motore è sempre lo stesso (Google). Con questa casella i risultati si aprono in un'altra scheda e lo trovo più pratica di quella di Blogger che invece li mostra nello stesso layout.

      Elimina
  13. Come inserire dentro di casella di ricerca in parte destra pulsante cancela (reset) pero una immagine (x) ???

    RispondiElimina
    Risposte
    1. @# Vorresti inserire una immagine in un elemento del menù? Dipende dal menù. Puoi provare a inserire il codice di una immagine al posto di una voce del menù. Il codice è questo
      <img src='URL IMMAGINE'/>

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy