Pubblicato il 25/01/11 - aggiornato il  | 16 commenti :

Come inserire uno sfondo o una immagine di background in un widget.

I gadget o widget che dir si voglia sono univocamente determinati dal loro nome o comunque da un numero, se non abbiamo inserito alcun titolo. Ciascuno di essi inizierà con il codice

<b:widget id=...

e terminerà con la riga

</b:widget>

Per modificare lo sfondo di un widget dobbiamo innanzitutto scoprirne l'ID. Andiamo quindi in Design > Modifica HTML e espandiamo i modelli widget. Per rendere le cose più chiare vediamo come inserire uno sfondo al widget degli Ultimi Commenti. Cliccando su F3 o su Ctrl+F e digitando il nome del widget si trova subito la riga corrispondente. In questo caso

<b:widget id='HTML6' locked='false' title='ultimi commenti' type='HTML'>

Adesso dopo che abbiamo visto che il gadget è id="HTML6" dobbiamo cercare la riga

]]></b:skin>

e immediatamente sopra incollare quest'altra riga

#HTML6{
background: #EEDDCC;
}

dove il codice del colore può essere scelto a piacere. Salvare il modello. Ecco come può variare l'aspetto

sfondo background widget gadget

Nel caso vogliate visualizzare una immagine di sfondo, allora il codice da inserire sarebbe quest'altro

#HTML6{
background:url(URL DELLA IMMAGINE DI SFONDO);
}

L'immagine di background dovrà prima essere precedentemente caricata su un hosting come Picasa o SkyDrive. La terza parte dello screenshot precedente mostra appunto cosa si può ottenere se si usa una immagine come sottofondo. Se non si mettono condizioni, l'immagine si ripeterà in senso orizzontale e verticale. Si può quindi inserire anche una foto di piccolissime dimensioni.



16 commenti :

  1. come mai a me non funziona? Ho un modello nuovo di blogger...

    RispondiElimina
  2. @SE-Gen
    In questo caso puoi utilizzare il Design Modelli in modo molto più proficuo

    RispondiElimina
  3. Ma col design modelli andrei a modificarli tutti allo stesso modo, giusto? E poi come dovrei fare per inserire un'immagine anziché un colore?

    RispondiElimina
  4. @SE-Gen
    Sì verrebbero modificati tutti i widget allo stesso modo.

    RispondiElimina
  5. Ciao sono disperato non so come cambiare lo sfondo al mio blog mi puoi dare una mano?
    url blog: http://metinhack3d.blogspot.com/

    quando ci provo lo sfondo cambia solo sopara header.

    RispondiElimina
  6. @Manager
    Lo sfondo del tuo blog sono determinati da delle immagini verticali:
    http://i267.photobucket.com/albums/ii292/underground_blog/bg.gif
    questa è per il body mentre
    questa è per la citazione
    http://i267.photobucket.com/albums/ii292/underground_blog/quote.gif
    questa è per l'header
    http://i267.photobucket.com/albums/ii292/underground_blog/headerbg.gif
    questa è per il footer
    http://i267.photobucket.com/albums/ii292/underground_blog/footerbg.gif
    questa è la sidebar
    http://i267.photobucket.com/albums/ii292/underground_blog/bullet.gif
    Se vuoi cambiare gli sfondi devi cambiare queste immagini di backgroud. Lo sfondo dei post è invece dato da questa riga
    background-color: #CC0000;
    Ti consiglio quando decidi di scaricare un modello da internet di prenderlo così com'è. Sono già molto personalizzati e eventuali modifiche sono piuttosto complesse.
    Se vuoi sbizzarrirti prendine uno ufficiale di Blogger.

    RispondiElimina
  7. Ernesto, come faccio ad inserire un'immagine di sfondo dei post? Ho trovato come fare per una diversa per ogni post, io invece vorrei caricare una stessa immagine (che poi è una texture).
    Grazie!

    RispondiElimina
  8. @Occhioalleespressioni
    Non so se funzionerà ma cerca nel tuo modello questo codice

    .post-body {
    font-size: 105%;
    line-height: 1.5;
    position: relative;
    }

    e inserisci una riga con l'immagine della texture, vale a dire in questo modo

    .post-body {
    background-image:url(URL dell’immagine);
    font-size: 105%;
    line-height: 1.5;
    position: relative;
    }

    oppure
    .post-body {
    background:url(URL dell’immagine);
    font-size: 105%;
    line-height: 1.5;
    position: relative;
    }

    dove al posto di URL della immagine ci metti quello ricavato da Picasa dopo che ce l'avrai caricata.

    RispondiElimina
  9. Ma "body" non è l'immagine grande dietro? Io intendo nei riquadri dei post (se butti un occhio sul mio blog intendi quali), ho letto altrove che è possibile ma gli esempi erano quelli di altri template.
    Comunque dovrebbe essere come consigli tu, solo che devo individuare la stringa giusta!

    RispondiElimina
    Risposte
    1. A, no, scusa, giustamente dici "post body". OK, ho individuato la stringa, faccio delle prove!

      Elimina
    2. Allora, ci siamo quasi! L'immagine la carica, però non compre nell'interezza del riquadro. Ho trovato anche la stringa del titolo e del footer ed utilizzato il tuo metodo e riuscendo, ma rimane sempre il contorno. Insomma, fa pezzo per pezzo.

      Elimina
    3. @Occhioalleespressioni
      Compare nell'area del post. Se vuoi inserire lo stesso background anche in altre parti del blog devi trovare il CSS corrispondente e mettere la stessa riga che ti ho indicato.

      Elimina
    4. Infatti è così, però non riesco a trovare la stringa dell'area di contorno. Ho trovato il footer e il titolo, come dicevo, ma c'è sempre una cornice del vecchio colore.

      Elimina
    5. Stasera farò altre prove per cercare di inserire anche la cornice (forse l'ho individuata, ma al posto di inserire la texture diventa trasparente), nel frattempo ritorno all'originale.
      Comunque mediterò il cambio, ho capito che verrebbe effetto "spezzettato", essendo varie parti, e forse non è così gradevole esteticamente.
      Intanto ti ringrazio come al solito, sempre preciso e disponibile!
      Aggiungerò altri post se trovo l'ennesima soluzione.

      Elimina
  10. Ciao...mi sto perdendo nel sito, troppe cose interessanti :D Una domanda: e se invece io volessi sostituire la scritta del widjet con un'immagine (caricata altrove,ovviamente) ? Cioe' per dire invece che la scritta "cerca nel blog" il cui identificativo è CustomSearch1 io vorrei avere una piccola immagine che ho creato....come faccio ? Grazie!!!
    Linda

    RispondiElimina
    Risposte
    1. l widget della ricerca usa le API di Google e si possono fare solo delle personalizzazioni codificate secondo i Termini di servizio. Sono comunque parecchie e si possono usare anche immagini esterne. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/10/motore-ricerca-personalizzato-google.html
      Se invece vuoi sostituire il Titolo del Widget con una immagine leggi quest'altro post
      http://www.ideepercomputeredinternet.com/2011/03/come-sostituire-in-blogger-il-titolo.html
      @#

      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