Colgo l’occasione per rispondere una volta per tutte ad una domanda che mi arriva spesso per email e che riguarda come inserire delle immagini nelle nostre barre laterali. Le richieste ‘Come posso caricare delle foto con link sul blog senza appesantirlo?’ e ‘come posso avvicinare i banner che ho inserito nella sidebar?’ sono onnipresenti nel mio inbox e di solito vi rimando ai post Come Aggiungere un Banner nella Sidebar e Come Creare un Link tra un’Immagine e una Pagina Web che funzionano benissimo.
Eppure vedo ancora troppe colonne laterali brulicanti di bannerini di giveaway, banner di amici e quant’altro dove si abusa del gadget dedicato alle Immagini.
Per fare un esempio concreto userò il blog di Enrica Chiara Passion dove appaiono cose belle e buone, blog super nuovo, fresco e originale{dovete provare la sua ricetta dei tortiglioni al forno, yammy!!}.
Diversamente da molte blogger in erba che appena aperto il loro spazio virtuale fanno l’errore {che ho fatto anch’io} di confondereil blog con una bacheca personale dove appenderci di tutto, Chiara sta mantenendo il suo bello pulito e ordinato.
Ha addirittura creato dei bannerini che portano ad altre pagine {e fin qui tanto di cappello} ma ha anche lei usando il gadget Immagini invece dei quello dell’html.
E allora, visto che abbiamodetto più volte che ogni singolo gadget inserito nella home page ne rallenta il caricamento, e dato che esiste l’opzione html che permette di caricare tantissime foto nello stesso gadget perché non provare ad usarlo?
Il codice html è sempre lo stesso:
<a href="indirizzo web della pagina" title="testo visualizzato al passaggio del mouse"><img src="link diretto immagine" alt="testo alternativo" />
Nel caso di Chiara poi, nonostante lo sfondo dei suoi banner fosse bianco, in qualche modo si nota la differenza tra lo sfondo dei banner e lo sfondo del blog.
E questo non sarebbe successo se avesse salvato le immagini in formato .png e soprattutto usando il widget html/javascript.
Prima
Dopo codici html intervallati da uno spazio
Ricapitolando:
Basta compilare il codice qui sopra tante volte quante sono le immagini e incollarlo in un widget html. Le immagini appariranno una di seguito all’altra {come quelle nella mia barra laterale}.
Se poi desideriamo centrare le immagini, basta copiare <div align="center"> una volta sola al principio del codice mentre se preferiamo far comparire uno spazio tra una foto e l’altra, useremo <br />
Facciamo un esempio:
<div align="center"> <a href="INDIRIZZO WEB 1 " title="Testo"><img src="LINK DIRETTO IMMAGINE 1" alt="TESTO ALTERNATIVO 1"/><br/><a href="INDIRIZZO WEB 2 " title="Testo 2"><img src="LINK DIRETTO IMMAGINE 2" alt="TESTO ALTERNATIVO 2" />
Un consiglio da amica :
Ora che lo sappiamo, cerchiamo di rimediare, non solo per alleggerire il blog ma anche per non far si che la pagina principale sia lunga 20 chilometri…
A proposito, avete cancellato i banner dei giveaway scaduti a giugno? No?? E cosa stiamo aspettando???? Andale, andale!!
Personalmente, nelle barre laterali uso quasi esclusivamente il widget html/javascript e mi piace perché mi permette di inserire il titolo del widget {1} e i suoi contenuti nello stesso posto e affiancare due immagini {2}.
Che ve ne pare? A me sembra abbastanza facile, bisogna solo trovare il tempo di riorganizzare le colonne laterali. Vi basta un’estate intera?
Per rileggere i post dedicati al miglioramento della vostra home page sfogliate anche:
Come Rendere Più Leggero il Blog Riducendo i Post Visualizzati e Cancellando i Widget Inutili 4 Errori che ogni Blogger Dovrebbe Evitare 15 Consigli per Gestire il tuo Blog {Creativo}