Pubblicato il 25/03/17 - aggiornato il  | 46 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. 


46 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. 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
    4. 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
  10. ciao, scusa, una gentilezza...
    mi piacerebbe usare il modello Soho ma il titolo del blog appare solo in MAIUSCOLO, sai dirmi se è possibile trasformalo in minuscolo??

    RispondiElimina
    Risposte
    1. Non mi risulta affatto che il titolo del blog appaia solo in maiuscolo nei Temi Soho. Andando su Impostazioni -> Di Base -> Titolo si può cambiare il titolo in minuscolo. Apri questa pagina
      https://i.imgur.com/TVpzlQz.jpg
      per controllare
      Se nel tuo modello per qualche ragione si continuasse a vedere solo in maiuscolo anche dopo questa modifica vai su Tema -> Modifica HTML e cerca la riga di CSS che inizia così

      .sticky .Header h1 {

      o che comunque abbia .Header h1

      Sotto questa riga ci dovrebbe essere un blocco di codice tra cui una riga tipo
      text-transform: uppercase;
      che rende sempre tutte le parole maiuscole. Puoi risolvere cancellando quella riga oppure sostituendola con
      text-transform: lowercase;
      per avere tutti i caratteri del titolo del blog in minuscolo
      @#

      Elimina
  11. Grazie proverò con il CSS perché il modello che hai usato tu x il test non è Soho...

    RispondiElimina
    Risposte
    1. È vero, non è Soho. Devi andare su Tema -> Modifica HTML e cercare questo blocco di codice

      .widget.Header h1 {
      font: $(header.title.font.small);
      margin: 0;
      text-transform: uppercase;
      }

      quindi cancellare la riga

      text-transform: uppercase;

      come ti avevo già scritto

      @#

      Elimina
    2. E questo
      https://i.imgur.com/5gTbVbi.jpg
      è il Tema Soho
      @#

      Elimina
  12. E se nel modello Soho volessi invece fare in modo che la barra laterale fosse, diciamo, fissa e che quindi durante lo scorrimento verso il basso accompagnasse il lettore anziché sparire? Non so se mi sono spiegato correttamente.

    RispondiElimina
    Risposte
    1. La barra scompare con risoluzione inferiore a 1440 pixel. Non sono riuscito a trovare il codice che impone questo breakpoint per poterlo eventualmente modificare 😐
      @#

      Elimina
    2. No, no, mi sono proprio espresso male, lo sapevo. Vediamo un po'... ecco, sarebbe come se in questo blog, mentre l'utente scorre verso il basso, l'header restasse in primo piano, capisci che intendo? Quindi, quanto alla mia domanda, sarebbe come se il lettore scorrendo il blog od il post e volesse poi tornare all'archivio (ad esempio), anziché dover tornare verso l'alto con rotella del mouse o tastiera, si dirigesse semplicemente verso l'angolo dello schermo. Quello intendevo con barra laterale fissa (forse avrei dovuto metterlo tra virgolette).

      Spero di essermi spiegato correttamente.

      Elimina
    3. Guarda se ti va bene questa personalizzazione
      http://www.ideepercomputeredinternet.com/2017/08/blogger-intestazione-fluttuante.html
      Se è quella che cerchi dovrebbe funzionare anche nel tema Soho
      @#

      Elimina
  13. Ricordati che il Tema Soho non ha versione mobile
    @#

    RispondiElimina
  14. Allora, la soluzione parrebbe funzionare, tuttavia ci sono dei problemi (o forse il problema è il mio): ho capito che il codice va inserito ogni volta e per ogni voce della barra laterale, dato che non so se c'è un modo, o meglio, un nome per la barra laterale e gli elementi che contiene, quindi ho agito come ho detto sopra. Funziona, perché funziona, solo che ogni elemento poi si accavalla uno all'altro, e scorrendo la pagina, mi ritrovo la voce del profilo, dell'archivio e così via tutte ammucchiate.

    Qualche consiglio?

    RispondiElimina
  15. Finalmente ho capito quello che intendevi cioè rendere flottante l'intera barra laterale. Purtroppo non c'è un ID unico ma mi pare ce ne siano due. Quando vado al PC controllo e eventualmente aggiungo un altro commento
    @#

    RispondiElimina
    Risposte
    1. L'ID della sidebar è #sidebar ma purtroppo non funziona 😐
      @#

      Elimina
    2. Rendere flottante l'intera barra laterale, è così che si diceva. Ma comunque, che peccato, ma grazie lo stesso per il supporto.

      Ad ogni modo, avrei un altro paio di domande, se posso: in questi nuovi temi c'è il gadget sulle informazioni personali che è molto suggestivo, e volevo sapere se era possibile, cliccandoci sopra, venire reindirizzati ad esempio ad una pagina statica che non mostri il profilo Google?

      Inoltre, ho notato che non è possibile personalizzare la larghezza del blog per quel che riguarda i post (o forse non sono stato attento?), ma usando il comando ispeziona, leggo che il tutto dipende da un certo "wrapper". Chiedo questo perché trovo che ci sia un sacco di spazio inutilizzato, e le immagini che si estendono in larghezza per più di 874 px ne risentono (sto provando il tema Emporio, che trovo più ordinato del Soho).

      Spero di non aver divagato troppo.

      Elimina
    3. Non è molto semplice operare modifiche nei nuovi temi, oltre alla dimensione della barra non mi sono avventurato anche perché ogni tema ha un codice diverso quindi per ogni personalizzazione bisognerebbe scrivere 5 post 🙂
      P.S. Il Tema Emporio è quello con il codice più complicato :)
      @#

      Elimina
    4. Buonasera, Ernesto.

      Che peccato, speravo di tornare da queste vacanze e trovare la risposta desiderata, ma purtroppo...

      In ogni caso, spero un giorno o l'altro troverai il modo di poter modificare la larghezza del corpo del post, sia per le immagini, sia per tutto quello spazio sprecato. Grazie ancora per il supporto.

      PS - non si può fare nulla nemmeno per il gadget sulle informazioni personali come ti ho scritto poco sopra?

      Elimina
  16. Buongiorno Ernesto,
    è forse possibile aggiungere una sidebar anche a destra nel modello Contempo?
    Mi servono 2 sidebar (una a dx e una a sx) come si poteva fare nei modelli più vecchi.
    Grazie per i tuoi preziosissimi articoli!

    RispondiElimina
    Risposte
    1. Andando su Tema -> Personalizza, con i Temi Responsive non è più disponibile l'opzione Layout con cui si poteva scegliere il Layout (numero di sidebar, numero di colonne, tipo di footer, ecc...)
      @#

      Elimina
  17. Buongiorno.
    Volevo chiedere: è possibile e, se sì, come, ridurre la larghezza dello snippet enorme dell'ultimo post pubblicato del tema emporio?

    RispondiElimina
    Risposte
    1. Purtroppo i nuovi temi di Blogger hanno un codice diverso gli uni dagli altri e me ne sono occupato raramente perché dovrei farlo per ciascun Tema. Con i modelli precedenti invece si trovavano codici che andavano bene per tutti i temi:(
      @#

      Elimina
  18. Ciao, scusa è possibile ridimensionare le dimensioni dei singoli post?
    grazie e ciao.

    RispondiElimina
    Risposte
    1. Per modificare una singola immagine ci clicchi sopra nell'editor e scegli Piccola, Media, Grande, Originale, Extralarge. Invece per modificare le dimensioni delle immagini di tutti i post puoi seguire queste istruzioni
      https://www.ideepercomputeredinternet.com/2014/02/fissare-dimensione-immagini-homepage-blogger.html
      e sono utili pure queste
      https://www.ideepercomputeredinternet.com/2019/08/blogger-foto-dimensioni-url.html
      @#

      Elimina
    2. Ok, grazie anche questa info è utile, ma forse mi sono espresso male, nel modello contempo è possibile ridimensionare oltre la sidebar il corpo della pagina che contiene il post? Grazie ciao.

      Elimina
    3. Il modello Contempo fa parte dei modelli di ultima generazione del tipo Responsive che sono di difficile personalizzazione
      @#

      Elimina
  19. ok, grazie della conferma, immaginavo. Ciao.

    RispondiElimina

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