Pubblicato il 26/07/12 - aggiornato il  | 19 commenti :

Come spostare in fondo al layout la Navbar di Blogger.

Come spostare in basso la Navbar o Barra di Navigazione di Blogger e lasciarla fissa allo scorrere della pagina.
Il dibattito sulla utilità o meno della Barra di Navigazione di Blogger è tuttora in corso. C'è chi la ritiene utile soprattutto per sé stessi in quanto ci permette di accedere alla Bacheca con un click su Design, chi pensa che la presenza del pulsante Condividi posa aumentare la visibilità del post sui social network e chi invece la ritiene completamente inutile se non dannosa visto che occupa un suo spazio anche se piccolo.
Ricordo che per nascondere la navbar si può incollare questa riga di codice

#navbar-iframe { display: none !important; }


subito sopra a ]]></b:skin>. Alternativamente si può usare anche questo codice che funziona particolarmente bene nei template del Designer Modelli. In questo post illustro una alternativa alla rimozione della Navbar vale a dire il suo spostamento nella parte bassa del blog utilizzando il tag position:fixed; in modo da lasciarla comunque visibile durante lo scroll della pagina

navbar-in-basso 

Ho anche postato una demo di questa personalizzazione



Per realizzare questa modifica si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo semplice codice

#navbar-iframe {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
}

Si salva il modello e la Navbar si visualizzerà in fondo al blog con tutti i pulsanti funzionanti. Chi volesse andare oltre con la personalizzazione potrebbe scegliere di visualizzare in basso la Barra di Navigazione solo in una determinata pagina o tipo di pagine. In questo caso si possono utilizzare i tag condizionali e incollare il codice subito sopra la riga </head>. Un codice potrebbe essere questo

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#navbar-iframe {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
}
</style>
</b:if>

che mostra la Navbar in basso solo nella homepage. Per porre altre condizioni basta sostituire il codice corrispondente alla prima riga colorata di rosso.


19 commenti :

  1. Ho scoperto che la navbar si può nascondere senza toccare il css. Basta andare in layout > navbar > disattivato (almeno si può fare con i modelli del Designer Modelli).

    RispondiElimina
  2. Sono riuscita a inserire in basso la navbar ma....è visibile la mia email a tutti ! Vorrei nasconderla al pubblico. Come si fa?
    Grazie.
    Un caro saluto

    RispondiElimina
    Risposte
    1. @kamasa54
      Immagino che tu abbia visto la Navbar anche in altri blog oltre al tuo? Qual'è l'indirizzo email che visualizzi? Vedi sempre il tuo qualunque sia il blog. Questo se ti sei connessa con Google altrimenti vedi solo Accedi.
      Se un lettore apre una pagina del tuo blog, nella Navbar, vedrà semplicemente il suo indirizzo e non il tuo ahahahah

      Elimina
  3. Ciao Ernesto.
    Ho caricato un nuovo template da Btemplate ...ma non trovo piu' la barra di navigazione che mi permette di modificare il layout.... che ho combinato???
    Grazie
    Marina

    RispondiElimina
    Risposte
    1. @MarinaMaggiulli
      In molti template di Blogger la barra di navigazione è stata nascosta. Vai nel modello e cerca questo codice

      #navbar-iframe{height:0;visibility:hidden;display:none}

      basta che tu la tolga e la Navbar ricomparirà.

      Elimina
    2. grazie Ernesto!provo subito!
      Buona giornata

      Elimina
    3. Niante caro Ernesto,ho eliminato nel modello html la stringa che tu mi hai detto ma nulla..non compare nulla...c'entra per caso quest'altra stringa?

      Grazie
      Marina

      Elimina
  4. Risposte
    1. @MarinaMaggiulli
      Io l'ho ripetuto un sacco di volte. Se si scarica un modello da internet deve essere proprio come ci serve perché le modifiche saranno difficilissime visto che solo il suo autore ne conosce il codice perfettamente.
      Vai su Modello > Modifica HTML > Procedi e non espandere i modelli widget. Cerca questa riga

      <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

      o quest'altra

      <body>

      se il template è vecchio

      Guarda se sotto c'è questo codice

      <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
      <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
      </b:section>

      Se non c'è incollacelo e salva il modello. Devi anche togliere il codice di cui al commento 4.a

      Elimina
    2. Grazie Ernesto, finalmente ci sono riuscita!i tuoi suggerimenti sono preziosi!
      Hai ragione quando dici che il modello deve essere come lo vogliamo perche'cambiarlo e' difficilissimo e io ci sto sbattendo la testa!
      Ho un altro problema...il template in questione ha una barra menu in alto dove ci sono dei menu a tendina...ma lo hanno impostato in maniera tale che io cliccando sul menu' visualizzo tre sotto gruppi con tendina a discesa..ci sono tre nomi ma io non riesco, entrando nell'html ad inserire a quel nome l'indirizzo URL della pagina statica che voglio che si apra e il titolo corrispondente..tipo RENZO PIANO - PALAZZO DI GIUSTIZIA - e cliccandoci su non si apre..

      come lo modifico????
      grazie mille

      Elimina
    3. @MarinaMaggiulli
      Hai sbagliato e hai inserito l'URL al posto della voce da visualizzare nel menù. Se apri il codice del tuo modello hai una codice come questo
      <li><a href='#'>http://www.marinamaggiulli.blogspot.it/2012/03/nuovo-palazzo-di-giustizia-rpbw-renzo.html</a></li>
      <li><a href='#'>Market</a></li>
      <li><a href='#'>Stock</a></li>
      </ul>
      </li>
      <li><a href='#'>Downloads</a>
      <ul class='children'>
      <li><a href='#'>Dvd</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Software</a>

      Al posto dei cancelletti cioè di questi simboli # devi inserire l'URL di destinazione della pagina, cioè per esempio
      http://www.marinamaggiulli.blogspot.it/2012/03/nuovo-palazzo-di-giustizia-rpbw-renzo.html
      in questo modo
      <li><a href='http://www.marinamaggiulli.blogspot.it/2012/03/nuovo-palazzo-di-giustizia-rpbw-renzo.html'>Renzo Piano</a></li>
      mentre le voci vale a dire Stock, Download, Dvd, ecc è il testo che si vede effettivamente

      Elimina
  5. Hai ragione!!!perfetto!grazie Ernesto...come sempre perfetto!ho visto che hai letto il testo html del template "imputato"...mi spieghi per cortesia perche' nello stesso menu appena corretto quando copio il testo della subcategory cosi' come fatto dall'autore del template mi da errore???ho ricopiato esattamente la stringa come era scritta sopra (quella della HOME Inspiration per intenderci...) sonop riuscita ad impostare la prima categoria bedrooms con le sottocategorie perche' gia' fatto...ma quando vado a copiare il testo per la seconda categoaria (Bathrooms) per fare le sotto categorie mi da errore e mi dice che il tag end di ul deve essere tra ""...ma sopra non e' tra virgolette...e la stessa cosa me la fa se provo ad inserire un'altra slide (la n. 5) nela slidebar centrale rispetto alle 4 di default...copio esattamente il testo aggiungendo un'altra slide...ma mi da errore!!!!
    Grazie come sempre..un caro saluto e buona giornata!!!!

    RispondiElimina
    Risposte
    1. @MarinaMaggiulli
      Postare del codice nei commenti non è semplice e talvolta non viene bene. E' il caso del mio commento 5.c. Metti le doppie virgolette invece di quella singola. Più che seguire il mio commento incolla testo e URL nel tuo modello sostituendo rispettivamente voci del menù e cancelletti # come ti ho spiegato nel 5.c.

      Elimina
    2. Grazie Ernesto...ci sto provando ma nulla...adesso mi riferisce che devo far seguire da un tag-end ""....mi chiedi perche' sono cosi' difficili da modificare!!!!Uff....
      Buona giornata e grazie mille ancora!

      Elimina
  6. Buongiorno. Mi chiedevo se potesse darmi una mano a realizzare una navbar in basso di questo tipo. http://imgur.com/a/DVBiM
    La ringrazio!

    RispondiElimina
    Risposte
    1. È stata creata con un servizio specifico tipo AddThis
      @#

      Elimina
    2. aaaaaaaaaaaah ecco. e io che mi scervellavo. thanks

      Elimina

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