immagin top

12.5.14

Blog design: menu delle pagine fisso in alto

12.5.14

Innanzitutto scusatemi l'assenza di ben quasi un mese (cavoli), ma tante cose, fra cui influenza spietata si sono messe fra me ed un bel post che dovevo fare da tempo -.-
Vi sono mancata? Spero di sì :D
Nel frattempo ho visto che una cara amica blogger mi ha citata in un suo post sulla larghezza delle immagini: Tine/Silvia!!!!
Non avete ancora visto il post? E che aspettate?

Ma passiamo a noi, al come spostare il menu delle pagine in alto nel nostro blog e mantenerle fisse, facendo in modo che coprano tutti gli altri elementi del blog, una volta che si scende verso il basso con lo scrollbar.

In partica come nel mio blog :P

blogger menu fisso in alto - Simona S.

Ho realizzato un video tutorial per facilitarvi l'inserimento dei codici, ma i codici ve li scrivo qui, così vi basterà copiarli ed incollarli come mostrato nel video.
Dite la verità... ma quanto vi voglio bene??? TANTO COSI'!!!!!!!!!!!!



Vi lascio qui il link diretto ;) CLICCA PER IL VIDEO

Per centrare la pagine (e vale anche se non lasciate le pagine così come sono, senza spostarle in alto) inserite questo codice nel blocco delle tabs (vedi video)
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;text-transform:uppercase;}

Per eliminare i bordi
.tabs-outer {border:none !important;}

Copia e incolla questo codice per inserire le pagine (vedi video)
<!-- Coding by www.designsimonas.com please do not remove my credits -->
<div style='width:100%; height:30px; display:block; position:fixed; z-index:9000; background:#fff;'>

INSERISCI QUI IL CODICE DELLE PAGINE

</div>

PER APPROFONDIRE


Avrai notato dal video che le pagine non sono proprio attaccate al bordo superiore, questo perchè, anche se io l'ho reso invisibile dal gadget, la navbar resta comunque presente.
Per eliminare quello spazio, dobbiamo eliminarlo dal contenitore che racchiude tutto il nostro blog, quindi cerca body (lo trovi all'inizio degli stili) e inserisci questo codice all'interno degli stili:
margin-top:-30px;

Se non sono stata abbastanza chiara, se ti sei persa un passaggio, lascia pure un commento qui ;)



27 commenti:

  1. Woah! Mi piacciono tantissimo i tuoi tutorial! *_*
    Una domanda.. Io tecnicamente ho le pagine ma sono "invisibili" perché ho preferito inserire immagini e relativi link in modo da essere più personalizzate.. In pratica è un widget html.. Si potrebbe fare anche con questo?
    Spero di non averti confuso con le mie strambe spiegazioni!!

    Grazie!

    RispondiElimina
    Risposte
    1. Grazie Serena :D
      Sì si può fare anche con questo, ti basta individuare il gadget all'interno del codice e poi procedere come per le pagine ;)

      Elimina
    2. Grazie, gentilissima!! Allora poi provo a pasticciare un po'! :))
      Buona giornata!

      Elimina
  2. Ciao Simona! Ho commentato già tramite G+, però ora che ho provato a farlo sul mio blog non va... Questo perchè non ho la lista delle pagine, ma una LinkList che funge da PageList. Ho provato comunque ma non me lo salva neanche... Come posso fare?
    PS. Grazie di cuore per questo tutorial, lo cercavo da tempo! :)

    RispondiElimina
    Risposte
    1. Ciao Mina, grazie per i tuoi commenti, ho visto :D
      Complimenti per il tuo blog, molto bello!!!
      Sì ho visto che hai aggiunto il gadget dei link, per ovviare a questo problema che ti dà, puoi ricreare le pagine al posto dei links... fra l'altro ho notato che il logo lo hai inserito nella sezione delle tabs...dovresti 'trascinarlo' dal layout verso su, nella sua posizione originale...
      So che ti sembrerà difficile quanto sto dicendo, ma prova magari su un blog di prova, nel quale puoi installare il tuo stesso template per apportare modifiche e cambiamenti... io di solito faccio così ;)

      Elimina
    2. Per un esempio pratico, questo è il mio blog di prova: http://provedeitemplate.blogspot.it/. L'errore di cui mi sono accorta è (forse!) che nel region inner è incluso anche tutto l'ambaradan del widget header, è possibile?

      Elimina
    3. Ciao Simona, alla fine ci sono riuscita! Però (sì, c'è un però...) la barra non parte dal lato estremo a sinistra, ma diciamo a una trentina di pixel. E nonostante l'allineamento sia centrato, per questo motivo anche il testo è più spostato verso destra. Potresti dirmi tu come fare? :3
      Grazie e scusa lo stress :(

      Elimina
  3. Grazie. Questi tuoi post sono sempre utilissimi e fatti molto bene. Bentornata!!!

    RispondiElimina
  4. Bellissimo tutorial e molto chiaro! Ma troppo complicato per me :p

    RispondiElimina
  5. Grazie Simo!!! Intanto sono riuscita a centrare le pagine era da tempo che ci provavo... Appena ho più tempo completo il tutorial, sperando di riuscirci!!! Un bacione

    RispondiElimina
  6. Bentornataaa e grazie per questa nuova chicca :-)
    Un abbraccio
    Emanuela

    RispondiElimina
  7. ciao vedo che non solo io sono mancata per un bel pò! bentornata e a presto!

    RispondiElimina
  8. Simona poi ho risolto, grazie ancora :)

    RispondiElimina
  9. Ciao Simona! Scusa se commento così tardi, ma volevo prima guardare il tuo bel video, molto chiaro :)
    A me piacciono molto i menù fissi come il tuo, quando sono fatti bene, non sono invasivi e si adattano bene al resto del layout... come il tuo!
    Per quanto riguarda la barra di Blogger, io, dopo averla nascosta, ho scelto di eliminarla completamente dal codice: ho proprio fatto piazza pulita della riga! Non sia mai che avercela rallenti anche solo di mezzo secondo il caricamento...
    Un abbraccio e ancora complimenti per il video. A presto!

    RispondiElimina
  10. Grazie a tutte per questo bellissimo bentornato ^_^ ♥
    Silvia hai ragione d'ora in poi mi levo subito la sezione della navbar perchè io proprio non la sopporto, anche se a volte si scoprono blog carini ;)

    RispondiElimina
  11. ciao Simona...all'inizio del video...bisogna aprire una pagelist2...a noi dovrebbe essere 1....ma a me nn compare prpr la pagelist...cm devo fare???

    RispondiElimina
    Risposte
    1. Allora vuol dire che devi inserire il gadget delle pagine...puo farlo da LAYOUT e sotto il gadget dell'header clicca su aggiungi gadget, poi scegli quello delle pagine ;)

      Elimina
  12. Come ho scritto nell'altro post, stavo cercando proprio questo ^^
    L'unica cosa che non ho capito è dove devo inserire l'ultimo codice, quello del margin-top :\

    RispondiElimina
    Risposte
    1. La barra all'inizio è in cima, ma quando scorro lungo il blog si sposta ad una 30ina di pixel più in basso e intralcia la visuale :\
      Qui se vuoi dare un'occhiata smartandcutie.blogspot.it

      Elimina
    2. CE L'HO FATTA!! (Parlo da sola XD)
      Se qualcuno avesse i miei stessi dubbi o problemi, ho risolto inserendo margin-top qui :)
      html body .region-inner {
      min-width: 0;
      max-width: 100%;
      width: auto;
      margin-top: -30px;
      }

      Elimina
    3. Ciao, mi fa piacere che tu ci sia riuscita :D
      Beh l 'margin-top' dovevi appunto inserirlo all'inizio degli stili in body {} ;)

      Elimina
  13. Ciao! Ti seguo praticamente da un mese e sto cercando di sistemare il mio blog al meglio (lo cambio circa una volta ogni 3 mesi perchè non mi convince mai).
    Ho inserito il menu delle pagine fisso in alto...ma ora non riesco a inserirne un altro sotto l'intestazione.
    Ho modificato la riga "showaddelements", inserendo cosi il gadget subito sotto l'intestazione, ma non posso dargli colore e questa cosa mi rattrista :(

    RispondiElimina
  14. Ciao Simona! Adoro il tuo blog, ma ho un piccolo dubbio: Puoi farci sapere come inserire il menù anche nella versione mobile? Grazie mille in anticipo ^_^

    RispondiElimina
    Risposte
    1. Grazie mille! Ci studierò un po' su, fra l'altro devo anche aggiornare questo tutorial perché riprendendolo per un template realizzato mi sono accorta di alcuni problemi.

      Elimina
  15. Ciao Simona,
    innanzitutto ti ringrazio questo tutorial!
    Ho seguito il video alla lettera, infatti il risultato sul blog si vede ma quando vado sul layout l'header copre la barra delle pagine senza darmi modo di modificare.. mi chiedevo se era normale... ti ho fatto uno stamp per farti capire: http://i.imgur.com/xLDbLHZ.png
    Grazie :)

    RispondiElimina
    Risposte
    1. Ciao Jessica! Innanzitutto bellissimi il tuo blog e il background!!!!
      Scusami se ti ho risposto tardi... ma vedo ora che il codice è diverso. Hai optato per un'altra soluzione?
      Se questo non ti crea problemi meglio così ;)
      cmq a me non faceva questo difetto...

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*