Pubblicato il 13/04/16 - aggiornato il  | 8 commenti :

Come separare i widget di Blogger con righe o immagini.

Come aggiungere righe o immagini di separazione a tutti i widget della sidebar o solo ad alcuni.
Nel precedente post abbiamo visto come si possano dividere tra loro i post di Blogger con l'aggiunta di righe o di immagini e come promesso vediamo come personalizzare nello stresso modo anche i widget di una sidebar. Analogamente a quanto fatto per i post si possono aggiungere righe con il tag border oppure immagini con il tag background dopo averle postate su Picasa Web Album.  

I widget possono essere posizionati in una sidebar alla sinistra o in una alla destra della main area ovvero l'area del post.  Prima di procedere bisognerebbe trovare il selettore univoco della sidebar in oggetto utilizzando gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Nei modelli ufficiali di Blogger questi selettori sono .column-right-outer per quella destra e .column-left-outer  per quella sinistra.

COME AGGIUNGERE UN BORDO DI SEPARAZIONE TRA I WIDGET


Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta a sinistra della sezione <b:skin> che si trova intorno alla 10-20-esima riga. Si visualizzerà tutto il codice della sezione. Aiutandoci con Ctrl+F  si cerca la riga ]]></b:skin> e, subito sopra, si incolla un codice come il seguente

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

in cui sono stati inseriti i selettori di entrambe le sidebar separati da una virgola. Sono ovviamente personalizzabili i codici dei colori e lo stile del bordo che è stato inserito solo nella parte bassa con il tag border-bottom. Si può anche settare la distanza del bordo dal resto del layout con il tag padding-bottom. Dopo aver salvato il modello la sidebar muterà aspetto in questo modo

linee-separazione-widget

Si potrebbe inserire una riga di divisione in un solo widget invece che in tutti i widget della sidebar. In questo caso si deve trovare l'ID del widget cliccando sulla icona del cacciavite e della chiave per modificarlo. Nella finestra che si apre si scorre l'URL fino alla fine per trovare tale ID

 id-widget-blogger

Nel test che ho fatto il widget ha ID CustomSearch1 ma potrebbe essere HTML12 o Label1, ecc. L'ID è la parte finale dell'URL dopo la stringa widgetid=. Per inserire delle righe di separazione in alto e in basso sempre sopra alla riga ]]></b:skin> si incolla questo codice

#CustomSearch1 {
border-top:4px double #940F04;
border-bottom:4px double #940F04;
padding-top:20px;
padding-bottom:20px;
}

dove l'ID è colorato di viola ed è funzione dell'ID del widget. Le righe evidenziate di giallo servono per inserire una riga di divisione in alto mentre le righe evidenziate di verde per inserirla in basso.

separare-righe-widget


COME AGGIUNGERE UNA IMMAGINE DI DIVISIONE TRA WIDGET


Al posto di un bordo si può inserire una immagine di divisione come le seguenti

riga-divisione-widget

barra-divisione-widget

linea-separeazione-widget

Si usa lo stesso meccanismo e lo stesso codice già visto per le righe. Va sostituita soltanto la riga con il tag border-bottom. Per esempio il primo codice diventa

.column-right-outer .widget, .column-left-outer .widget {
background: url(https://lh3.googleusercontent.com/-oc1TIduyvF4/Vw5WHH2bjoI/AAAAAAAA1K0/e_62npO_mOQb8WLCVewhJKYZWeMbFD__gCCo/s575-Ic42/bar48.gif)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

con l'URL della immagine da personalizzare a piacere. Il risultato è il seguente

immagini-widget-blogger

Si può anche personalizzare con le immagini di divisione un singolo widget dopo averne trovato l'ID. In questo caso il secondo codice diventa simile a questo

#BlogList1 {
background: url(https://lh3.googleusercontent.com/-xxzZ3sh6PcI/Vw5WEzh67eI/AAAAAAAA1K0/G6_mQHNd-3Y6H3Qlz5ZuNrt5jaKTz5BYgCCo/s580-Ic42/bar47.gif)no-repeat 50% 100%;
background-position: top center; 
padding-top:20px; 
}

con l'ID colorato di viola e l'URL della immagine colorato di rosso da personalizzare.

immagine-sepazione-widget

Se si desidera aggiungere l'immagine nella parte bassa del widget si sostituisce nelle due righe top con bottom. Si può anche settare la distanza dall'alto e/o dal basso. Se si vogliono aggiungere immagini di separazione in alto e in basso è meglio aggiungere due blocchi.


8 commenti :


  1. non ho capito una cosa, ''subito supra'' come devo fare

    html html html html
    qua incollare?
    html b:sin html html
    html html html html
    html html html html

    RispondiElimina
    Risposte
    1. Non sai incollare un codice in un modello? Bisogna cliccare per inserire il cursore nel punto in cui incollare il codice quindi andare su Invio per creare una riga vuota quindi incollare il codice che si è selezionato e copiato. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guarda anche il video. SE non basta per farti capire leggi anche quest'altro
      @#

      Elimina
    2. http://www.ideepercomputeredinternet.com/2013/04/new-blogger-template-editor.html

      Elimina
  2. In pixel, quanto dovrebbe essere grande l'immagine? (larghezza e altezza)

    RispondiElimina
    Risposte
    1. Dipende dalla larghezza della tua sidebar
      http://www.ideepercomputeredinternet.com/2016/07/blogger-layout-larghezza-sidebar.html
      Per l'altezza bastano 4-6 pixel
      @#

      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