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
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.
come mai a me non funziona? Ho un modello nuovo di blogger...
RispondiElimina@SE-Gen
RispondiEliminaIn questo caso puoi utilizzare il Design Modelli in modo molto più proficuo
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@SE-Gen
RispondiEliminaSì verrebbero modificati tutti i widget allo stesso modo.
Ciao sono disperato non so come cambiare lo sfondo al mio blog mi puoi dare una mano?
RispondiEliminaurl blog: http://metinhack3d.blogspot.com/
quando ci provo lo sfondo cambia solo sopara header.
@Manager
RispondiEliminaLo 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.
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).
RispondiEliminaGrazie!
@Occhioalleespressioni
RispondiEliminaNon 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.
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.
RispondiEliminaComunque dovrebbe essere come consigli tu, solo che devo individuare la stringa giusta!
A, no, scusa, giustamente dici "post body". OK, ho individuato la stringa, faccio delle prove!
EliminaAllora, 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@Occhioalleespressioni
EliminaCompare 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.
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.
EliminaStasera 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.
EliminaComunque 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.
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!!!
RispondiEliminaLinda
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
Eliminahttp://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
@#