Come Fare Ordine nella Barra Laterale Usando il Widget Html per le Immagini

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 confondere  il 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 abbiamo  detto 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}