Pubblicato il 01/09/15e aggiornato il

Come racchiudere in un bordo la sidebar, il footer, l'header o un widget di Blogger.

Come contornare un elemento di Blogger (sidebar, footer, header, widget, ecc) con un bordo personalizzabile nello stile, nel colore e nello spessore.
Nel precedente articolo abbiamo visto quello che è il codice da usare per modificare lo stile dei bordi e in questo vedremo come applicazione di quel codice un metodo per racchiudere o contornare con un bordo un qualsiasi elemento del nostro blog su Blogger.

Andando su Layout possiamo visualizzare le varie sezioni di cui si compone il nostro sito. Ciascuna sezione ha un suo corrispettivo selettore univoco che si trova facendole precedere dal simbolo del cancelletto ( # ). Si può quindi applicare il codice di un bordo a ciascuna sezione o anche a un singolo widget. I nomi delle sezioni sono visibili su Layout (navbar, header, crosscol, ecc)

layout-blogger

Nello screenshot precedente sono stati evidenziati due elementi specifici, la sidebar di destra e il primo footer. La sezione della sidebar è sidebar-right-1 mentre il piè di pagina più in alto ha come sezione footer-1. I corrispondenti selettori univoci sono quindi #sidebar-right-1 e #footer-1.

Per inserire un bordo in tutta la sidebar di destra e nel footer potremo usare questo codice

#sidebar-right-1,#footer-1 {border: dotted  #036; 4px;}

da incollare su Modello > Modifica HTML subito sopra alla riga ]]></b:skin>. Se intendiamo contornare con un bordo solo un elemento lasciamo un solo selettore togliendo anche la virgola. Dopo aver salvato il modello avremo questo risultato

bordo-sidebar-footer

Non fate caso all'aspetto grafico perché si tratta chiaramente di un test. Se si volesse racchiudere l'Intestazione in un bordo il selettore da usare in questo blog di test sarebbe stato #header.

COME CONTORNARE UN WIDGET CON UN BORDO


Invece che operare su una intera sezione lo si può fare su un singolo widget. Si va su Layout e si clicca su Modifica nell'elemento che vogliamo racchiudere in un bordo

widget-layout-blogget

Si scorre l'URL della finestra che si apre fino alla sua parte finale

id-widget-blogger-layout

Dopo Id= si vedrà quello che è il selettore del gadget preso in esame. Nello screenshot è Label1. Si possono quindi contornare di bordi alcuni widget che vogliamo evidenziare. Ecco il codice

#Label1 {border: dashed  #f00 6px;}
#BlogArchive1 {border: groove  #00f 6px;}

per contornare con bordi di diverso colore e stile il widget delle Etichette e di Archivio. Si incolla su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> con questo risultato

racchiudere-widget-bordo

Non valutate l'aspetto estetico che ho volutamente esagerato per rendere il tutto più chiaro. Quando si conosca il selettore univoco di un elemento con questo semplice procedimento possiamo contornarlo di un bordo personalizzato nello stile, nel colore e nello spessore.




8 commenti :

  1. waw... bello, adesso mi leggo tutto! :)

    RispondiElimina
  2. waw... bello, adesso mi leggo tutto! :)

    RispondiElimina
  3. Ciao Ernesto, scusami se lo scrivo qui: come faccio a sapere le dimensioni del mio footer-1? Grazie anticipatamente

    RispondiElimina
    Risposte
    1. La larghezza del footer è identica a quella del blog. Non hai incollato l'URL altrimenti trovavo le dimensioni con Snagit. Vai su Modello > Modifica HTML e cerca intorno alla ottava riga un codice come questo
      < meta content='width=1100' name='viewport'/ >
      Se vedi 1100 significa che è largo 1100 pixel, se vedi 960 invece è 960 pixel ecc.
      @#

      Elimina
    2. Grazie 1000, trovato con le tue indicazioni ;-)

      Elimina
  4. Ciao Ernesto, sempre a proposito del footer, ho altre due domande da porgerti. Visto che vorrei inserirci un banner, mi servirebbe sapere, alla luce di quanto sopra, la dimensione dell'immagine da inserire e l'URL tracciabile. Mi è stato espressamente chiesto e non essendo proprio un esperto, non so come orientarmi. Mi puoi aiutare?

    RispondiElimina
    Risposte
    1. @# Non vedo come posso aiutarti. Ci puoi mettere l'immagine che credi sia piccola sia grande basta che non superi le dimensioni del layout. Non so che intendi per URL tracciabile forse vuoi dire che l'immagine deve avere un link a una pagina web. In questo caso devi incollare su HTML/Javascript questo codice
      <a href="URL_LINK" target="_blank"><img src="URL_IMMAGINE" width="400" alt="NOME_IMMAGINE" /></a>
      dove al posto di 400 puoi mettere la larghezza che vuoi

      Elimina
    2. Grazie Ernesto, sempre molto gentile.

      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.