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

 da inspiration board disordinata a barra ordinata

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


 Fashion Girl
 Tutorial
 Collaborazioni



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:




24 commenti :

  1. Molto molto interessante, grazie Alex! Infatti la barra laterale del mio blog è ancora in fase "disordine"! :P Ti volevo chiedere, però, come si usa inlinkz? Mi sembra molto carino per raggruppare in modo ordinato dei link... :)
    Grazieee :*

    RispondiElimina
    Risposte
    1. Huh, quanto ci sarebbe da dire su Inlinkz... io lo amo! Oltre ai linky party si possono creare delle utilissime raccolte di progetti nostri, l'unica cosa e' che non e' gratuito.

      O meglio, le raccolte di link semplici, come quella mia nel post precedente, sono gratis illimitatamente, mentre per quelle che contengono foto si paga un piccolo contributo mensile.

      Inoltre, a differenza di tutti gli altri strumenti per linkare {detti link-up tools} Inlinkz.com e' l'unico che una volta terminato il contratto lascia le tue raccolte sul blog. Invece con altri servizi si riprendono tutte le tue raccolte... cafoni!

      Elimina
  2. Sei sempre gentile e paziente. Ma io avrei bisogno di un bel corso per pc e di avere meno paura di combinare guai per imparare davvero. Certo se tu mi venissi a trovare sarei felicissima di affidarti il mio blog per un ritocchino ^_^
    Se passi da Genova ti aspetto davvero. Un abbraccio, Ely.

    RispondiElimina
  3. Sempre interessante seguirti, tanti consigli utilissimi!!!...che caldo...un abbraccio. NI

    RispondiElimina
  4. Bene!!!grazie ai tuoi preziosissimi consigli!!!un bacione elena e annalisa

    RispondiElimina
  5. Non dire niente....lo so!!!

    Baciooooooooooo

    RispondiElimina
  6. Il mio blog ha ancora pochissimi elementi tipo bannerini o simili, però hai ragione: i widget delle immagini rischiano di appesantire il caricamento del blog e inoltre non permettono di decidere quanto spazio lasciare tra un'immagine e l'altra. Magari modificando il template si può anche... ma sicuramente sarà più complicato che impostare margin o padding ai div contenitori delle immagini.
    Insomma, grazie per lo spunto! Quando avrò bannerini da piazzare in giro seguirò certamente il tuo consiglio e userò i widget html/js :)

    RispondiElimina
  7. Consigli preziosissimi, come il solito!Corro a eliminare i banner vecchi... Come facevi a sapere che erano ancora là?!

    RispondiElimina
  8. Ecco, mi hai scoperta...sì il mio blog è ancora formato bacheca/diario di "quel che mi va ci metto", ma comincia a dare fastidio anche a me, sinceramente sono in fase decluttering per un sacco di cose...per fortuna siam fatti per evolverci (chi più velocemente chi meno...)!!! grazie anche per questa lezione! Daniela

    RispondiElimina
  9. Utilissimi consigli, come sempre. Solo, non riesco a capire come inserire delle fotografie già presenti sul mio computer attraverso un indirizzo web. Se per il link mi è chiaro, non è chiaro per le foto o i bottoni scaricati come fotografie. I miei bottoni social sono leggermente spostati e non centrati con le altre fotografie ed è tanto che voglio sistemarli...
    Come fare?
    Baci
    Elli

    RispondiElimina
  10. Ciao Alex, grazie per questo tutorial, in effetti sto cercando di sistemare il mio blog e renderlo meno disordinato, un po' ci sono riuscita, per il resto le tue guide si sono di molto aiuto, se ti va di venirmi a trovare e vedere cosa posso migliorare i consigli sono ben accetti, mi trovi qui
    baci
    Sara

    RispondiElimina
  11. Una domanda, se io volessi inserire solo la foto e magari non un link in particolare, io avrei pensato alla mia lista di libri letti preferiti, magari inserire solo il titolo ma non un link, come fare?

    RispondiElimina
  12. Sempre utile. Grazie! =)
    Daniela

    RispondiElimina
  13. no, no ... keep calm dalle mie parti =D =D =D ma intanto sì, ciò che è finito a giugno l'ho spostato dove doveva e poiiiii proverò anche il resto!
    Ciao Alex!!!!

    RispondiElimina
  14. Ciao Alex,
    qualche giorno fa ti ho mandato una email, ma purtroppo la mia connessione fa i capricci...volevo solo sapere se l'hai ricevuta, altrimenti provo a inviartela nuovamente! =)

    Un bacio e a presto!

    RispondiElimina
  15. Buongiorno Alex..
    Posso chiederti una cosa?
    Non mi dire che anche Google friend connect è chiuso..
    Ho tentato di iscrivermi per seguire dei nuovi blog ma la scritta parla chiaro..

    RispondiElimina
    Risposte
    1. Buongiorno a te! Non ti preoccupare, non ha chiuso nulla.

      Se non ti funziona GFC prova a fare il refresh della pagina alla quale vuoi iscriverti come lettrice oppure clicca su

      "Sei già un membro? Accedi" invece di Iscriviti.

      Questi trucchetti funzionano sempre con me!

      Elimina
  16. Alex sei geniale, ti vorrei qui a sistemare tutte le mie cose :) C, xoxo.
    Blog
    Facebook
    BlogLovin

    RispondiElimina
  17. Come sempre ottimi consigli!!!!! :)

    RispondiElimina
  18. Ciao carissima,
    come sempre ci dai una mano, ma per quelle imbranate come me forse ne servono 2 di mani!!!!
    Che intendi per "Link diretto all'immagine"?? Ti spiego: sono andata nel sito dove c'è l'immagine che devo caricare e ho copiato l'URL, per poi inserirlo nel codice HTMl. Se questo è il procedimento giusto però l'immagine mi viene gigante!! Come mai. Help me please!!!

    RispondiElimina
  19. questa è una di quelle cose che mi riprometto di fare ogni mese.. e invece il tempo passa.
    Inesorabile,
    Meno male che hai fatto un bel riassunto in questo post.

    Speriamo di farcela (prima o poi!)

    RispondiElimina
  20. Perbacco! Ma sei anche telepatica ! ;) Rispondi alle mie domande quando proprio mi servono! Grande, GRAZIE !!!!!
    Domani rimetto a posto tutti i banner....
    Bacioni !

    RispondiElimina
  21. Ciao sono una nuova followers ho letto il tuo post e michiedevo se il mio blog ha anche lui come dici tu tante cose che non servono a niente,mi piacerebbe se lo visitassi e mi dicessi cosa ne pensi ti ringrazio in anticipo ciao a presto.

    RispondiElimina
  22. E mi ero persa tutto ciò...Alex grazie di cuore sei sempre tanto cara come me.
    Ti è arrivata la mia email?
    Baci

    RispondiElimina