Personalizzare i titoli dei gadget di Blogger {metodo 1}

{Read in English...}

Come promesso nel post dove offrivo alcuni nastri freebie, vediamo come creare dei titoli personalizzati per i gadget delle barre laterali. Esistono due metodi per fare questo: oggi esploreremo la prima opzione, che è quella che mi piace decisamente meno, ma che sicuramente è più semplice e immediata per chi non vuole impelagarsi troppo con HTML e CSS.
Analizziamo vantaggi e svantaggi {che comunque vedremo come minimizzare}:
  • è necessario scrivere solo una piccola riga di HTML all'interno di un gadget, senza toccare il modello del blog;
  • ci si può sbizzarrire coi caratteri, dal momento che non si è vincolati ai web font;
  • è molto semplice cambiare stile o colori per il titolo di ogni singolo gadget.
  • a seconda del modello che usate, potrebbe esserci un po' troppo spazio tra titolo e relativo gadget;
  • alcuni gadget prevedono l'inserimento obbligatorio di un titolo testuale, perciò sarà necessario trovare un escamotage;
  • le immagini pesano sempre e comunque più del testo e quindi si va a influire negativamente sui tempi di caricamento del blog {seppur di poco};
  • c'è il rischio che il titolo, essendo un'immagine anziché un font, risulti leggermente più sgranato rispetto al resto delle parti testuali presenti nel blog.

Per cominciare, ecco come appare la sidebar del mio blog di prova senza alcuna personalizzazione.
Personalizzare i titoli delle sidebar di Blogger 1
Indubbiamente è bruttina: ha zero personalità e quei titoletti si notano a stento.

La prima cosa da fare è creare i nostri titoli con un programma grafico o un editor. Nel mio esempio ho usato Photoshop {ma naturalmente in alternativa potete usare Ipiccy, Picmonkey, etc.}, creando delle bandierine di diversi colori sopra le quali ho scritto il titolo del gadget.
Ora bisogna caricare le nostre immagini online: su Flickr, sulla bozza di un post di Blogger o dovunque altro vogliate, purché riusciate a ricavarne un link diretto per ognuna di esse.
Fatto questo, andiamo sulla pagina Layout di Blogger e aggiungiamo alla sidebar un gadget HTML/JavaScript. Al suo interno dovremo scrivere questo codice:
<img src="http://link.com/immagine.png" alt="Nome del mio gadget" />
Sostituite il testo in verde col vostro link diretto a una delle immagini, mentre al posto del testo viola riporterete il titolo del gadget.
Come mai compiliamo l'alt tag? Perché nel malaugurato caso in cui un lettore non riuscisse a caricare le immagini, potrà leggere ugualmente il titolo testuale dei nostri gadget.
Dopo aver salvato, dovremo trascinare questo nuovo elemento del nostro layout al di sopra del gadget a cui fa riferimento come titolo.
Ripetiamo questa operazione per tutti i gadget per i quali abbiamo creato un'immagine col titolo: in pratica, per ogni gadget che abbiamo nella sidebar, avremo anche un rispettivo gadget HTML/JavaScript contenente il codice del titolo.
Ora non ci resta che eliminare tutti i titoli presenti nei gadget stessi. Qualora Blogger ci riportasse che un titolo è obbligatorio, anziché mettere un punto o un asterisco, scriviamo questo: &#160;
Questo codice indica un carattere detto non-breaking space: il campo del titolo risulterà completamente vuoto.
Fatte queste operazioni, la nostra sidebar dovrebbe apparire così:
Personalizzare i titoli delle sidebar di Blogger 1
Meglio, vero? Però quello spazio bianco, dove manca il titolo obbligatorio {relativo al "Chi sono", che sarebbe il gadget di Google+}, a me dà proprio fastidio! Possiamo rimediare aggiungendo una "postilla" al codice del gadget HTML/JavaScript che contiene l'immagine col titolo relativo al gadget incriminato:
<img src="http://link.com/immagine.png" alt="Nome del mio gadget" style="margin-bottom: -30px;" />
La parte in arancio è quella che andremo ad aggiungere. Potete cambiare la spaziatura a vostro piacimento: se ad esempio così vi sembrerà tutto troppo ravvicinato, anziché "-30px" scrivete "-20px", e così via, finché il risultato non vi soddisfa.
Otterremo quindi questo risultato:
Personalizzare i titoli delle sidebar di Blogger 1
Un paio di consigli:
  • cercate di creare o comunque di utilizzare immagini, colori e font che si sposano bene col resto del vostro blog;
  • salvate le immagini come .PNG: il testo apparirà meno "sfumato" e se avete delle trasparenze le manterrete intatte;
  • ridimensionate opportunamente le immagini a seconda dela larghezza della vostra sidebar. Fate in modo che non siano nè troppo grandi nè troppo piccole!
Spero che questo post possa esservi utile. La prossima volta vedremo come personalizzare i titoli veri e propri dei nostri gadget, senza dover aggiungere elementi extra dal layout. È un metodo leggermente più avanzato, che sconsiglio a chi non ha mai pasticciato con HTML e CSS, ma che sicuramente presenta tanti vantaggi.
Nel frattempo, se avete dubbi, perplessità o richieste, lasciatemi un commento!

14 commenti:

  1. Bello anche questo metodo, mi piace il confronto con te, perchè trovi metodi diversi dai miei e io, infatti, ne uso un altro, un po' più...diretto, diciamo :D
    Era un tutorial in bozza, ma aspetterò a farlo, ancora ;)
    Brava Silvia!

    RispondiElimina
    Risposte
    1. Vorrei sapere che metodo usi allora :D
      A me questo qui non piace particolarmente, non è quello che uso quando faccio i template. In generale odio sostituire le parti testuali con le immagini dove posso evitarlo. Però è il metodo più facile che mi è venuto in mente senza pasticciare col CSS e quindi ho proposto il tutorial per chi si sente in soggezione a modificare il modello...

      Elimina
  2. Ciao Silvia, grazie. Mi sembra una spiegazione chiara e semplice... molto utile per quelli che sono alle prime armi come me ;) un caro saluto

    RispondiElimina
  3. Spiegazione chiara e molto utile come sempre!
    Grazie Silvia! : )

    RispondiElimina
  4. Grazie Silvia, sempre un sacco di dritte ben spiegate :-)
    Avrei una richiesta: hai voglia di spiegarci come mettere "Ti potrebbero anche interessare" a fondo post?
    ;-)

    RispondiElimina
  5. Ottima spiegazione, chiara ed esauriente, aspetterò anche la prossima per decidere come fare a cambiare i titoli
    Grazie
    Ciao
    Norma

    RispondiElimina
  6. Che belli i titoli dei gadget così!!!
    Appena ho un attimo mi ci metto con calma e provo.....è molto più carino!
    Con le tue chiarissime indicazioni sembra semplice, anche per chi come me non sa nulla di HTML.....Grazie!
    Buon week end
    Serena

    RispondiElimina
  7. Grande Silvia! Per fare i miei ho chiesto consulenza al maritozzo ^_^ ma se non sbaglio il procedimento è lo stesso (...ho poca memoria per queste cose :()
    Quindi dici che il mio testo risulta sgranato perché non l'ho salvato in PNG?? ...Mi tocca rimetterci mano! :'(

    RispondiElimina
  8. ma sai che mi hai fatto venire voglia di provarci?
    ... magari, passato Natale lo faccio...
    Grazie! =)
    Dani

    RispondiElimina
  9. Anch'io facci così... o meglio, lo facevo con i template vecchi... adesso mi sono adagiata nell'attesa di un cambiamento più radicale, ma i tuoi consigli sono sempre preziosi (come l'eliminazione del bruttissimo spazio bianco!!!) Grazie Silvia :)

    RispondiElimina
  10. Molto utile, grazie per le spiegazioni!
    Daniela

    RispondiElimina
  11. quanto adoro questi post!*______________*molto utili questi consigli...magari appena ho tempo potrei metterli in pratica!^_^Bacioni!

    RispondiElimina
  12. ...per ora bookmarks, ma prima o poi faccio tutto!

    RispondiElimina
  13. Oddio stavo uscendo pazza per fare questa cosa!!! grazie grazie grazie grazie grazie.... scriverei grazie all'infinito!!!!!

    RispondiElimina

Ti ringrazio per il tuo commento: mi stai dedicando due minuti del tuo tempo e lo apprezzo immensamente!
I commenti vengono modrerati, perciò non sono visibili appena inviati.
Mi riservo il diritto di cancellare messaggi:
• offensivi, diffamatori e/o volgari;
• a sfondo esplicitamente politico;
• pubblicitari;
• che richiedono 'follow 4 follow': seguimi se ti fa piacere, io farò altrettanto!

Related Posts Plugin for WordPress, Blogger...