Pubblicato il 25/03/17 - aggiornato il  | 20 commenti :

Come modificare la larghezza della sidebar dei Nuovi Temi di Blogger.

Come modificare la larghezza della sidebar dei nuovi Temi di Blogger per adattarla a quella dei widget.
Come certo saprete da qualche giorno sono disponibili i Nuovi Temi di Blogger che sono sicuramente un grande sviluppo rispetto i vecchi Temi o meglio i vecchi Modelli come si chiamavano fino a qualche giorno fa.

Abbiamo già visto che i nuovi Temi hanno una velocità di caricamento sensibilmente maggiore e soprattutto sono Responsive cioè si adattano alla risoluzione del dispositivo con cui vengono aperti. Quando i nuovi Temi si aprono da mobile con una risoluzione inferiore a 1440 pixel sparisce la sidebar che contiene widget di default e quelli che eventualmente avessimo aggiunto.

La personalizzazione di questi Temi sarà un lavoro lungo e proseguirà a piccoli passi quindi vi prego di non chiedermi subito delle modifiche troppo complicate visto che devo ancora capire il codice di questi nuovi Temi che è diverso in moltissimi punti rispetto a quello da anni che avevamo imparato a maneggiare.






Una delle tematiche più di base è quello delle dimensioni della larghezza dell'area del post e della sidebar. La natura Responsive di questi Temi fa sì che queste larghezze rimangano sostanzialmente fisse mentre varia la parte vuota del layout quando si aumenta o si diminuisce la risoluzione del dispositivo.






Come prima modifica vediamo come modificare la larghezza della sidebar. Prenderò in esame un Tema Contempo ma ritengo che la modifica sia applicabile a tutti gli altri 20 Temi. Si va su Tema -> Backup/Ripristino -> Scarica Tema per salvare il file XML da usare per un eventuale ripristino.
Si va poi si Modello -> Modifica HTML e si cerca questa stringa con Ctrl+F

name="sidebar.width"

quindi si va su Invio. Si troverà un blocco di codice simile a questo

<Variable name="sidebar.width" description="Width"
      type="length"
      min="250px"
      max="420px"
      default="284px"
      hideEditor="true"  value="284px"/>

che ci fornisce molte informazioni. Innanzitutto che la sidebar di default è larga 284 pixel che in effetti sono un po' pochini visto che molti widget sono larghi 300 pixel. Siamo informati anche delle dimensioni che sono supportate e che vanno da un minimo di 25o pixel a un massimo di 420 pixel.






Per modificare la larghezza della sidebar dovremo modificare solo il dato che si trova su value. Per esempio sostituendo value="284px" con value="320px" per poi salvare il Tema modificherà la larghezza della sidebar che naturalmente smetterà di visualizzarsi quando la risoluzione è inferiore a 1440 pixel.

sidebar-nuovi-temi-blogger

Come vedete dallo screenshot precedente la maggiore larghezza della sidebar non andrà a discapito della larghezza dell'area del post ma occuperà una parte del layout che prima era vuoto. Al posto di 320 pixel si può inserire un valore compreso tra quello minimo (250px) e massimo (420px). Nei prossimi post mi occuperò anche della larghezza dell'area del post e di come modificarla. Almeno spero di riuscire a trovare il modo per farlo 🙂.

Aggiornamento: Contrariamente a quanto pensavo la sidebar del modello Emporio non è modificabile nella larghezza con questo codice. Le larghezza della sidebar del Tema è fissata da un codice come questo

.sidebar-container {
  background-color: #f7f7f7;
  max-width: 280px;
  overflow-y: auto;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
          transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
  width: 280px;
  z-index: 101;
  -webkit-overflow-scrolling: touch;
}

dove è indicata la massima larghezza in 280 pixel. Ho provato a aumentare entrambe le occorrenze ma la sidebar scompare. Non escludo si possa aumentare la larghezza della sidebar a scapito di quella del resto del layout ma per poterlo fare occorreranno delle modifiche più approfondite. Il Tema Emporio è significativamente diverso rispetto agli altri visto che si presenta con tre colonne centrali. 




20 commenti :

  1. Ciao! Per il modello che attualmente sto usando "Emporio" non è applicabile questa modifica... la stringa di codice deve essere diversa. Uff uff uff :D aspetto e ti seguo.

    RispondiElimina
    Risposte
    1. ciao! grazie! In questo tema, la sidebar è divisa in due, una principale (visibile nella home e nelle label) ed una secondaria (visibile nei singoli post o nelle pagine).

      Apportando la modifica come suggerito da te nell'aggiornamento, NON scompare, ma si posiziona sotto, in coda ai post. :)

      Personalmente non mi interessa allargare questa sidebar, ma vorrei che fosse come quella del tema "rilevanti" in cui, a differenza di tutti gli altri nuovi temi, l'icona hamburger della sidebar è SEMPRE presente (l'ideale per chi, come me, vuole sfruttare la sidebar laterale per metterci il menù)! Non sto usando il tema "rilevanti" perché presenta alcuni errori nella personalizzazione (es dimensione font, in realtà aumenta l'interlinea)... :D Grazie intanto.

      Elimina
  2. Su Emporio pare che nella sidebar vengono accettati e visualizzati i widget anche da 300px senza apportare modifiche al codice e senza che la sidebar spezzi o sposti il contenuto dei widget (però il widget HTML/Javasript va spostato, in Layout, sotto il corpo del post proprio all'interno dell'area Annunci). Sto facendo qualche prova. Nel caso poi aggiorno.

    Fra le altre modifiche in Emporio ci sarebbe da fissare la dimensione del titolo/logo, che in Home Page è enorme, a una dimensione più contenuta. Il resto, per adesso pare che possa andare.

    RispondiElimina
  3. Ciao Vinnie, scusa se mi intrometto, ma la dimensione del titolo nel template Emporio in home page non si fissa nelle impostazioni avanzate con il "title font" nelle che ha in basso la dimensione del font? Mentre il titolo compresso che sta a lato determina il font per la versione mobile?

    RispondiElimina
    Risposte
    1. Non ho avuto modo di provare. Se si può intervenire così ottimo. Io uso da anni template non ufficiali, dunque certe impostazioni devo ancora testarle.

      Ernesto, nel caso se trovi qualcosa per visualizzare a centro post un banner adsense piuttoto che in alto a inizio post, almeno nella versione mobile, sarebbe perfetto in questi temi Blogger. ;)

      Elimina
    2. Con questi temi non c'è differenza tra versione desktop e mobile
      @#

      Elimina
    3. Ho provato diversi script e l'unico funzionante visualizzava il banner solo nella versione desktop (tema Emporio). Devo provare con qualche altra variante.

      Elimina
  4. Sapete che dimensione deve avere l'immagine header del tema contempo?
    Grazie

    RispondiElimina
  5. Il problema di questi template è adsense

    RispondiElimina
  6. Ho provato Emporio, ma quando pubblico, invece di vere 3 colonne centrali, ne ho solo 2.
    Qualcun altro ha avuto lo stesso problema?

    RispondiElimina
  7. Ciao, io non sono riuscito esattamente a trovare quello che hai descritto.
    Solo qualcosa di simile:



    E' la stessa cosa?

    RispondiElimina
  8. variable name="body.background.height" description="background height"

    RispondiElimina
    Risposte
    1. No. Ci devono essere i numeri delle misure della sidebar. Forse hai il tema Emporio che non si può personalizzare nella larghezza della sidebar
      @#

      Elimina
    2. Ciao Ernesto, hai trovato qualcosa per modificare la larghezza della sidebar e magari del contenuto centrale del tema Emporio?
      Mi piacerebbe utilizzarlo ma è troppo largo e nella sidebar quando metto le pubblicità adsense fa difetto...

      Elimina
    3. No, non ho più provato a farlo
      @#

      Elimina
    4. Sapresti invece allargare il contenuto del post del tema Rilevanti?
      c'è molto spazio tra testo del post e la sidebar. se vai su
      trading15678. blogspot . it e clicchi su un post te ne accorgi

      Elimina
    5. Non posso prendere in considerazione tutti i template, non ho tutto questo tempo a disposizione. Prova con il sistema del Tema Contempo che ho illustrato qui
      @#

      Elimina
  9. Ho cambiato il mio blog con il tema emporio ma quando clicco sulle Entrate ossia sui post che ho pubblicato o sulle pagine l'immagine che si apre e' sgranatissima ed enorme ....c'e' un modo per far si che questo non accada? Grazie

    RispondiElimina
    Risposte
    1. Il Tema Emporio è il più difficile da modificare. Non sono riuscito neppure a modificare la larghezza della sidebar :(
      Non escludo si possa fare quello che chiedi ma visti il precedente non mi ci provo neppure :)
      @#

      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.