Pubblicato il 27/10/16e aggiornato il

Come spostare in alto o in basso una sidebar di Blogger.

Come spostare verso l'alto e verso il basso la sidebar di sinistra o di destra di Blogger.
Questo è un instant post che sto scrivendo a seguito di un commento appena ricevuto in cui mi si chiede se esiste la possibilità si spostare in basso la barra laterale. Credo che la lettrice si riferisca allo spostamento della sidebar di Blogger verso il basso.

Per affrontare questi problemi occorre utilizzare gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Solo in questo modo potremo conoscere l'ID o la classe dell'elemento in questione per potergli applicare una regola CSS che gli faccia cambiare di colore, di sfondo o appunto che lo sposti verso il basso come richiesto in questo caso.

Non con una certa difficoltà si riesce a determinare che la classe della colonna di destra è

.column-right-outer

mentre la classe della colonna di sinistra, se esiste, è quest'altra

.column-left-outer

Per spostare in basso, o in alto, soltanto la sidebar di destra si usa questo codice

.column-right-outer {margin-top:50px !important;}






che dovrà essere incollato nella sezione <b:skin> del template. Si va su Modello -> Modifica HTML e si clicca sulla freccetta nera a sinistra di quella sezione che si trova intorno alla decima quindi si cerca la riga ]]></b:skin> con Ctrl+F e vi si incolla il codice precedente subito sopra.

spostare-sidebar-blogger

Dopo aver salvato il modello la sidebar si sarà spostata verso il basso di 50 pixel lasciando inalterato tutto il resto del layout. Ovviamente si può modificare il valore dello spostamento e si può avvicinare la sidebar all'header inserendo dei valori negativi nel margine impostato. Questo può essere fatto anche per la sidebar di sinistra sostituendo .column-right-outer con  .column-left-outer.




5 commenti :

  1. ciao ernesto, purtroppo non funziona (il mio è un modello simple di blogger personalizzato grazie ai tuoi consigli) . la colonna rimane troppo attaccata all'header :-(

    RispondiElimina
    Risposte
    1. @# Il tuo blog è questo?
      http://www.madeinbottega.com/
      Non vedo il codice nel sorgente pagina. Forse lo hai tolto. Con le stesse modalità prova con altri selettori al posto di .column-right-outer
      Prova prima con
      .column-right-outer
      poi con
      div.column-right-outer
      e infine con
      div.column-right-outer > div

      Elimina
    2. si in effetti lo avevo tolto, visto che non funzionava. Ho provato con tutti i codici che mi hai indicato ma nada :-(

      Elimina
    3. @# Me ne stupisco. Non è che hai lasciato una parentesi graffa insieme a ]]></b:skin>
      Si tratta di un errore molto comune.

      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.