Pubblicato il 13/06/11 - aggiornato il  | 6 commenti :

Come inserire linee o immagini di separazione tra i widget della sidebar.

Mi sono già occupato di come inserire delle immagini di separazione tra articolo e articolo da visualizzare nella homepage, nelle pagine di archivio e in quelle delle etichette. Adesso applichiamo lo stesso concetto ai widget presenti in una sidebar. L'obiettivo è quello di inserire una linea o anche una immagine che divida i singoli widget. Dobbiamo semplicemente agire aggiungendo opportuni CSS nel modello.

Nuovi template del Designer Modelli 

Se si ha un modello del nuovo tipo, bisogna andare su Design > Modifica HTML e cercare la riga

]]></b:skin>

Immediatamente sopra si incolla questo codice

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px double #940F04;
padding-bottom:20px;
}

per inserire una linea orizzontale di separazione. Si salva il modello e si vedranno i gadget separati da una linea orizzontale

separazione tra widget

Si potrà personalizzare la linea in funzione di altri stili dei bordi che possono essere inseriti al posto dei parametri in rosso della seconda riga. il valore di 20 pixel determina la distanza tra la linea e il gadget. Se al posto di una riga si vuole inserire una immagine, occorre innanzitutto caricarla su Picasa e acquisirne il link diretto. Il codice da incollare, nella stessa posizione del modello diventa

.column-right-outer .widget, .column-left-outer .widget {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWluV_1A65LCOp_SuXHZvFXDHqKeV7V4kA4UHunCJqrBnBfghypWw8DmMGl8G7hD-KJStcGPl-HJaLM6R_yXoH-YVzPeR6saKz-zfQvo1gc4XBlytz6Iy3s3WzeasjukbtSG_7m45axoo/)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

dove al posto dell'URL colorato di rosso, si deve inserite l'hotlink dell'immagine. Dopo aver salvato il modello, si vedrà una cosa simile a questa

separatori di widget in blogger

  Se si vuole personalizzare la colonna di sinistra, si sostituisce nei codici precedenti right con left. Si può anche andare su Design > Designer Modelli > Avanzato e incollare il codice del CSS nel campo sulla destra quindi andare in alto e cliccare su Applica a blog.

Vecchi modelli di Blogger

Se si hanno dei template vecchi, il procedimento per inserire la linea o l'immagine di separazione è lo stesso, variano solo i codici che sono

.sidebar .widget {
border-bottom:4px double #940F04;
padding-bottom:20px;
}

nel caso si voglia inserire una semplice linea di separazione. Se invece si opta per una immagine, il codice diventerà

.sidebar .widget {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWluV_1A65LCOp_SuXHZvFXDHqKeV7V4kA4UHunCJqrBnBfghypWw8DmMGl8G7hD-KJStcGPl-HJaLM6R_yXoH-YVzPeR6saKz-zfQvo1gc4XBlytz6Iy3s3WzeasjukbtSG_7m45axoo/)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

con i parametri da personalizzare come nei nuovi template.



6 commenti :

  1. interessante e molto carina l'idea che proponi....sei un grande...grazie!!!

    RispondiElimina
  2. Come sempre proponi dei post molto interesanti,...mi piacciono!!!
    Vorrei provare a sostituire la linea fatta con l'attributo hr inserita sotto a content-wrapper e nel footer con due linee molto vicine tra di loro.
    Esiste un codice per realizzare queste due linee?
    Ciao
    CSJ

    RispondiElimina
  3. @csj
    Prova questa soluzione
    <hr size="3" color="#003366">
    <hr size="3" color="#940F04">
    o quest'altra
    <hr size="6" style="border: double #003366;">

    RispondiElimina
  4. Grazie della gentilezza!!!
    La prima soluzione è quella che mi soddisfa di più, ...le linee sono separate, l'unico inconveniente è che in IE le linee hanno un margine maggiore rispetto FF.
    Probabilmente l'unica soluzione è quella di inserire una immagine.
    Ciao
    CSJ

    RispondiElimina
  5. Ogni volta che mi serve qualcosa la trovo da te. Sei indispensabile :) Felicissimo anno nuovo Ernesto. Kiss

    RispondiElimina

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