Pubblicato il 17/05/14e aggiornato il

Inserire bordi o immagini tra i widget nella sidebar di Blogger.

Come mostrare bordi o immagini di divisione tra i vari widget della sidebar o solo in quelli che si desiderano.
In alcuni modelli personalizzati scaricati da internet nella sidebar o nelle sidebar spesso si visualizzano degli elementi di divisione tra i vari gadget. Si può trattare di semplici linee facenti parte di un bordo oppure anche di immagini ovviamente di dimensioni appropriate. Questa personalizzazione diciamo che è una evoluzione dell'altra che prevede la visualizzazione di widget con lo sfondo colorato.

Queste modifiche in realtà sono piuttosto semplici e possono essere utilizzate da tutti coloro cha abbiano un minimo di esperienza nella gestione del modello di Blogger. Prima di procedere con la lettura del post consiglio di consultare l'articolo in cui si tratta dello stile dei bordi visto che utilizzeremo proprio quei codici.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> facendo bene attenzione a che non si sia aggiunta una parentesi graffa sulla sinistra. Subito sopra a questa riga va incollato il codice di una regola CSS

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

Per completezza sono stati messi i codici della sidebar sinistra e di quella destra. Se si ha una sola sidebar si può benissimo lasciare il codice così com'è oppure si può togliere la parte colorata del selettore che non interessa oltre alla virgola che lo divide dall'altro. È stato scelto un bordo tipo double dello spessore di 4 pixel, con il codice del colore #036 e con una distanza di 20 pixel dalla parte bassa. Tutti questi parametri possono essere modificati. Si ottiene questo risultato in tutti i widget della sidebar

linee-tra-widget-blogger

Se al posto di bordi o linee preferiamo inserire un motivo grafico allora questo va caricato su Google+ per ottenerne il link diretto. Il codice che va incollato nella stessa posizione allora diventa

.column-right-outer .widget, .column-left-outer .widget {
background: url(https://lh6.googleusercontent.com/-P0ABy7Ffvz0/TfR5Gvvv9DI/AAAAAAAATeg/mXqVfIeMcn0/bar48.gif) no-repeat 100% 100%;
padding-bottom:30px;
border:0;
}

Dopo aver salvato il template si ottiene questo risultato

linea-divisione-widget-blogger

L'URL della immagine può essere modificato così come la distanza dalla parte bassa proposta a 30 pixel. Se desiderassimo questa personalizzazione solo per un determinato widget allora dovremmo trovare il suo ID andando su Layout > Modifica e guardare la parte finale dell'URL nella finestra che si apre. Il widget dell'archivio che ho preso come test ha ID BlogArchive1.

Andando su Modello > Modifica HTML e incollando subito sopra a ]]></b:skin> questo codice

#BlogArchive1 {
border-top:5px dotted #f95b5b;
border-bottom:5px double #f95b5b;
padding-top:10px;
padding-bottom:10px;
}

dopo aver salvato il modello si produce questo risultato

widget-con-bordi

con il bordo superiore punteggiato (dotted) e quello inferiore doppio (double).




5 commenti :

  1. Ciao Ernesto, vorrei chiederti se è possibile inserire un bordo che faccia da cornice a tutta la sidebar, non trovo niente a proposito di questo, oppure un divisorio continuo verticale tra la sidebar e il blog (la pagina), grazie

    RispondiElimina
    Risposte
    1. Salvo il tuo commento. Seguimi i prossimi giorni e vedrò quello che si può fare (senza impegno)
      @#

      Elimina
  2. Salve! io ho questo problema che persiste da quando ho aperto il blog oramai, ovvero che quando devo cercare un estratto di HTML come in questo caso ]]> non lo trovo, ho provato a cercalo anche ad occhio senza la barra automatica , ma nulla! non c'è... come posso fare? Grazie.

    RispondiElimina
    Risposte
    1. È un problema abbastanza comune tra chi non ha ancora grande esperienza. Nella fattispecie devi cercare la sezione < b:skin > quindi cliccare sulla freccetta nera a sinistra della riga (dovrebbe essere intorno alla 10-esima) per visualizzare tutto il codice all'interno di quella sezione. Solo allora devi cercare il codice con Ctrl+F dopo aver cliccato sull'area del codice.
      Per farti capire meglio guarda un paio di video esplicativi
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.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. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.