Icona-facebook Icona-google+ Follow Me on Pinterest Icona-facebook

Pagine

domenica 21 febbraio 2016Aggiornato il:

Novità per il mio blog

Era da un po' di tempo che sentivo il bisogno di un cambiamento per il mio blog. Mi frenavano due cose: la paura di cambiare e il timore di non essere in grado di raggiungere l'obiettivo.

Dopo settimane di lavoro, ecco il risultato. Ho preso coraggio e adesso Gattosandro Viaggiatore ha finalmente un nuovo look, e sebbene sia soddisfatta solo al 90% del risultato, sono contenta.

Sono partita da un'idea e l'ho sviluppata piano piano, scontrandomi con le mie lacune, in un campo a me semi sconosciuto - il magico mondo che si chiama html - che da autodidatta mi ha fatta impazzire regalandomi però grandi soddisfazioni ad ogni piccolo successo raggiunto.

Voglio raccontarvi come sono arrivata alla nuova versione, anche se magari voi sapete tutto di html e vi sembrerà strano che io abbia dovuto affrontare tutte queste difficoltà (nel caso voi siate esperti, se avete consigli e suggerimenti il vostro parere sarà prezioso).

Ecco quindi come ho lavorato.


Primo passo: creare un blog di prova.
La paura più grande, inizialmente, era quella di fare danni irreparabili e appesantire ancora di più il blog in generale senza ottenere l'obiettivo. Ho pensato allora di fare i miei esperimenti senza correre il pericolo di fare errori. La cosa più facile è partire da zero, e un blog nuovo di zecca è un'ottima soluzione.
Come prima cosa, quindi, ho creato un blog di prova dove ho cominciato a mettere mano al codice CSS senza avere il panico di fare danni.
Ho messo l'opzione 'non visibile ai motori di ricerca', l'ho chiamato banalmente Prova Template e ho iniziato a costruire il blog secondo il progetto che avevo in testa.

Creare un blog di prova


Secondo passo: trovare i codici html secondo le mie esigenze.
Per cominciare, quello che desideravo più di tutto era avere un menu multilivello dove inserire tutti i miei viaggi, e siccome i modelli preimpostati di blogger non supportano questa funzione ho cercato i codici che mi permettessero di crearlo su misura.

Li ho trovati qui e qui.

Ho studiato tantissimo, la rete offre davvero tante informazioni e dopo un po' ho iniziato a prendere confidenza con un linguaggio che a prima vista sembra davvero incomprensibile.

Codice html per menu


Terzo passo: modificare i codici html del menu.
La parte più difficile è stata quella della personalizzazione. Dimensioni, colori, caratteri.
Poi la parte più lunga, che mi ha portato via un sacco di tempo: inserire tutti i link ai post, titolarli, e creare il menu (e i sottomenu). 

Ho usato Notepad++ che è utilissimo ad individuare gli errori ed è l'ideale per scrivere un codice html comprensibile.

Modifica modello



Quarto passo: scegliere l'impaginazione.
Ho optato per uno stile pulito, con sfondo bianco e pochi gadget. Ho eliminato il superfluo e tolto tutti i box dei social. Inizialmente mi piaceva l'idea di avere una bella foto sotto al menu, ma alla fine ho tolto anche quella. Ho inserito solo i bottoni dei social.
Su picmonkey ho disegnato il nuovo header.

Quinto passo: applicare le modifiche al blog.
Dopo aver stabilito che il risultato mi piaceva, ho copiato il codice nel blog (sostituendolo al precedente). Inizialmente è stato il panico, non funzionava più niente, le colonne si sono sballate e si sovrapponevano le immagini.
Dopo il primo momento di ansia sono andata sul layout e ho aggiustato le larghezze, sistemato i colori, e apportato gli ultimi ritocchi.

Il mio header




Come dicevo, il risultato mi soddisfa al 90%, probabilmente apporterò ancora qualche piccola modifica perché oltre ad avere il grosso difetto di aver paura dei cambiamenti, sono anche molto pignola.

Mi devo ancora abituare, ma i primi commenti arrivati in risposta al mio SOS sulla mia pagina facebook sono stati incoraggianti. Fatemi sapere sinceramente cosa ne pensate, se il caricamento è veloce o se c'è qualcosa che non vi convince.
Il vostro giudizio per me è molto importante.




Ps. Questa non è una guida su come modificare il layout del blog. Mi piaceva l'idea di condividere con voi il mio lavoro e il mio percorso per arrivare al risultato finale. Mi scuso infatti per le imprecisioni nei termini e nelle spiegazioni. Per tutti i dettagli tecnici cosultate i link che ho inserito in questo post, che rimandano a siti che per me sono stati fondamentali.

20 commenti:

  1. Bravissima! Pensa che io sto ancora lottando per risolvere il problema della barra dei cookies!

    RispondiElimina
    Risposte
    1. Io l'avevo inserita, poi ho visto che Blogger l'ha messa in automatico e ho eliminato il codice. Spero che riuscirai a risolvere il problema, se posso fare qualcosa per aiutarti sono qui.

      Elimina
  2. bravissima davero..anche io come piperita patty mpm ci capsico granchè..anzi..per ora mi accontento di scrivere e condividere foto perchè proprio sono ignorante in materia

    RispondiElimina
    Risposte
    1. Mah sai, anch'io fino a un paio d'anni fa non ne sapevo nulla.
      Poi mi ci sono messa e sono talmente testona che finché non raggiungo l'obiettivo non mollo.

      Elimina
  3. e mi piace molto com 'è venuto il blog

    RispondiElimina
  4. Ottimo lavoro. Io mi sarei arreso al primo codice html... però il menù fatto così è fighissimo. Anch'io ho fatto un cambiamento grafico da pochissimo tempo, ma non ho mai messo mano al codice di Matrix :D Io credo tu sia l'eletta.

    RispondiElimina
    Risposte
    1. Ahahah! Magari :D
      Nel tuo blog starebbe benissimo questo menu, pensaci.

      Elimina
  5. Bello, anche io lo vorrei fare, soprattutto per i menù a tema, ma non sono capace e inoltre non ne ho neanche voglia.

    RispondiElimina
    Risposte
    1. Ahahaha Enrico mi fai morire! Se avessi la possibilità te lo farei io!

      Elimina
  6. Anche io recentemente ho lavorato molto in questo senso, non per il blog a cui presumibilmente rimanda questo commento, ma per il mio secondo blog (madamerenard.blogspot.com). ho scritto un post al riguardo con dei link, come hai fatto tu :)
    ci sono tantissime guide in rete, se ce l'ho fatta io ce la possono fare tutti. e il risultato... vale la fatica!

    RispondiElimina
    Risposte
    1. Molto bello il tuo blog! (Se clicco sul tuo nome non rimanda a nessun blog, ma alla tua pagina google+). Sembra una strana coincidenza, ma giuro che non lo conoscevo prima, anche perché in questi giorni di full immersion nel mondo dei codici html non sono riuscita a leggere altro.
      Vero, basta impegnarsi e ci può riuscire chiunque, e alla fine è una soddisfazione enorme.

      Elimina
  7. Caricamento veloce, tutto funziona e il blog è bellissimo!

    RispondiElimina
  8. Brava, il blog è bellissimo!❤ Io ogni tanto cambio i colori delle scritte e delle sfondo, ma faccio solo quello perchè mi intendo soprattutto di grafica!

    RispondiElimina
    Risposte
    1. In sei anni ho cambiato lo sfondo un sacco di volte! Adesso vediamo quanto resisto a tenerlo bianco.

      Elimina
  9. Blogger non mi aveva "avvisata" di questo post, ogni tanto capita che la rollbar non si aggiorni, e io mi perdo i post!
    bella questa nuova versione "luminosa" ! ! !

    (anche a me piacerebbe creare un "menu" dedicato ai viaggi, ma sono pigra!!! )

    RispondiElimina
    Risposte
    1. Troppo chiaro? Ero indecisa sul bianco o grigio.

      Elimina
  10. Anche io avevo spulciato quei due siti per l'html, quando ho modificato il mio blog, ma non avevo pensato a un blog di prova per evitare danni. Salvavo il modello e incrociavo le dita ;)
    Mi piace il menù che hai scelto, lo vorrei anche io, e mi piace la pagina bianca, ma mi piaceva anche verdina. Complimenti comunque. Ora gioco un po' con le voci del tuo menù, ciao.

    RispondiElimina
    Risposte
    1. Ho deciso per il blog di prova quando ho fatto un pasticcio e mi è preso un colpo ^_^ per fortuna avevo salvato il modello.

      Elimina

Consigli? Commenti? Mi piacerebbe molto sapere cosa ne pensate.

(Mi trovo costretta a inserire temporaneamente la moderazione ai commenti dei post più vecchi per tenere a bada lo spam. Abbiate pazienza, lo tolgo appena riesco a risolvere il problema).


LinkWithin

Related Posts Plugin for WordPress, Blogger...