28 luglio 2009

56 commenti Condividi il post Facebook Twitter Google+

Come inserire un "box con barra di scroll" nel blog

Qualche settimana fa ñ¡¢ø£ëtå mi ha chiesto:

sai come si mette sul blog un box con barra di scroll, per mettere dentro una lista di link?

A lei ho già risposto via email, ma forse potrebbe interessare anche a voi. Per questo ho deciso di pubblicare questo post.

Innanzitutto ecco cos'è un box con barra di scroll con una lista di link:


Vediamo allora come realizzarlo (do per scontato che sapete fare un elenco di link).

Il codice per il box è:

<div style="width:230px; height: 100px; border: 1px dashed #FF5A7E; overflow:auto;">
elenco di link
</div>

dove width:230px; e height: 100px; indicano le dimensioni del box, border: 1px dashed #FF5A7E; indica lo stile del bordo (che potete personalizzare a vostro piacimento) e overflow:auto; è lo scroll (se impostato su auto la barra di scroll compare solo se il contenuto del box è più grande del box stesso).

Mi spiego meglio con un esempio: ecco lo stesso box con pochi link dove non compare la barra di scroll (a sinistra) e con molti link quindi con lo scroll (a destra).



All'interno del box potete mettere un elenco di link, una serie di immagini, del semplice testo, ...

Ecco ad esempio un box con una serie di immagini:



















Io l'ho utilizzato per l'elenco dei miei Link preferiti; qualche settimana fa avevo sostituito gli antipixel con delle scritte scorrevoli ma questa soluzione mi piace di più.


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

56 commenti

  1. Grazie Iole per le utili informazioni!

    RispondiElimina
  2. O che bella idea! Appena esco dall'apnea casalinga ci provo...sìsì :) Grazie!

    RispondiElimina
  3. A parte il fatto che sono doverosi i complimenti ad Amsis per le foto... quasi quasi... cambio le tende... Un bacione, grazie!

    RispondiElimina
  4. Grazie ancora!
    Un piccolo riconoscimento ...un premio per te.
    Ciao!

    RispondiElimina
  5. Che bella soluzione risolvere il lungo elenco dei link con un modulo così!

    RispondiElimina
  6. ciao Iole, sei sempre mitica con le tue "dritte", non ti perdo mai d'occhio!
    se passi per il mio blog c'è una sopresina per te!
    ciao, Roberta

    RispondiElimina
  7. @Den: prima o poi ti assegnerò il premio "Il più affezionato dei lettori", sei sempre il primo a leggere i miei post! ^_^
    @cielomiomarito: provaci e fammi sapere...
    @Ale: che le foto di Amsis sono bellissime non c'è dubbio!!!
    Per le tendine... non metterci mano di nuovo che combini pasticci come la scorsa volta!
    @ñ¡¢ø£ëtå: grazie a te per la richiesta... le vostre richiste mi stimolano a scrivere nuovi post. E grazie anche per il premio!
    @Alessio Angelico: eh già, l'elenco diventa sempre più lungo e questa è la soluzione migliore (almeno per il momento).
    @Roberta: grazie per il premio... Questa settimana ne ho ricevuti veramente tanti!

    RispondiElimina
  8. Ciao Iole, grazie come sempre per i tuoi consigli...

    P.S.Vedo che mi hai inserito come link preferito :-)
    Onoratissimo!!!

    RispondiElimina
  9. Ola Iole!
    Tengo de ringraziarte por averme enserito en tu blog preferidos!

    Escusa por mi italiano, purtroppo soy espanol da la nascida!

    P.S.Mi corazon palpita solo para ti y para Giò!

    RispondiElimina
  10. @Tarkan: il tuo link è stato uno dei primi che ho aggiunto all'elenco dei miei blog preferiti (insieme a quello di Pablo).
    @Pablo Hernandez: bentornato!!! Cmq il tuo corazon deve palpitare o para mi o para Giò!

    RispondiElimina
  11. Ciao Iole, penso che il problema della mia prima riga di testo in caratteri piccoli sia legato al carattere utilizzato: ho impostato il comic sans ed addirittura tutto il post era in caratteri minuscoli; cambiandolo in georgia è tornato tutto normale...
    Mi toccherà tenere quello :-(
    Ciaoooo

    RispondiElimina
  12. @Jajo: io continuo a vedere il carattere del primo paragrafo più piccolo rispetto al resto del post.
    Cmq controllando l'html del tuo blog hai scritto font-family:comic sans; anziché font-family:comic sans ms;
    Ho provato sul mio blog di prova e senza "ms" non visualizzo il font Comic.
    Prova e fammi sapere!

    RispondiElimina
  13. Ciao iole ti faccio presente questo post
    http://www.blographik.it/2009/07/30/video-web-design-alternativa-a-lightbox/ in cui indica un'alternativa valida a Lytebox,non ho provato ad inserirlo su blogger anche perchè ho skydrive che non permette l'inserimento di contenuti javascript e perchè penso che tu sia più indicata per la realizzazione di questo tipo di lavoro spero che ne farai un post a presto.

    RispondiElimina
  14. @Train of thought: ti ringrazio per la segnalazione... gli darò un'occhiata. Cmq è Ligthbox che da problemi su Blogger (almeno a me e Amsis li ha dati) e non Lytebox, che uso ormai da mesi nel mio blog senza problemi.

    RispondiElimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Si anche a me. Quindi ho usato per alcune immagini lytebox, però o notato che su internet explorer fa un pò di "difficoltà" (sicuramente non da errore come su Ligthbox).
    Comunque vedi perchè da come dice il post è compatibile con tutti i browser (l'ho verificato con gli esempi che ci sono sul sito) e si possono inserire filmati file pdf e codice html oltre naturalmente ad immagini.

    RispondiElimina
  17. @Train of thought: qualche volta su IE ho notato che non viene caricato il css di Lytebox e quindi non si vedono i pulsanti Next, Prev, Colse, ecc.
    Proverò questo altro script ma dopo le ferie!!!

    RispondiElimina
  18. ciao Iole,
    mi stai aprendo indubbiamente un mondo nuovo.
    Sto provando a lavoricchiare su una pagina wordpress.com che è solo in bozza quindi non visibile on line, ed ho provato ad inserire la box dei links e funziona... non riesco però a centrarla nella pagina.
    Sicuramente sarò io impedita! :-(
    Hai qualche suggerimento?

    RispondiElimina
  19. @The Five Demands: aggiungi prima del codice del box
    <div align="center">
    e alla fine
    </div>

    RispondiElimina
  20. non funzia :-(
    o forse sono solo io imbranatona!

    RispondiElimina
  21. @The Five Demands: mi dicevi che lo stai usando su wordpress.com, quindi non sul tuo blog? Mandami via email l'indirizzo del blog e l'html che ti dico cosa non va.

    RispondiElimina
  22. E' sulla piattaforma wordpress.com il mio blog, non badare al dominio quello l'ho comprato ;-)
    Nella sidebar ha inserito la box e lì va bene, nel senso che cmq modifico la sua larghezza per renderla omogenea alle altre widget.
    Se invece, come sto provando, la inserisco in un post/pagina, non riesco a centrarla. Ho usato lo stesso html che hai riportato tu come prova e mettendo link a miei altri blog pressochè inattivi, quindi puoi farmi l'esempio direttamente su quell'html.

    RispondiElimina
  23. @The Five Demands: ho appena provato sul mio blog di prova wordpress e il blox è centrato.
    Ti mando un'email con il codice html.

    RispondiElimina
  24. alcuni lettori mi hanno fatto notare che non riescono a commentare sul mio blog ma non riesco a capire il perchè!!

    RispondiElimina
  25. @Train of thought: il problema è dovuto al modulo dei commenti sotto al post in template non ufficiali Blogger... se utilizzi la finestra popup risolvi subito. Non so se poi funzionano le faccine, dovresti chiedere a Tenebrae.

    RispondiElimina
  26. Grazie molto utile.Però io vorrei sapere come faccio a mettere mel box il codice dell'immagine con riferimenti al blog senza però che questa immagine si veda,cioè vorrei che si vedesse solo il codice.io ho provato a mettere il codice immagine tra code inizio e fine però nel box mi fa visualizzare l'immagine...sai come posso fare?Un'altra cosa come hai fatto a mettere il banner?Fammi sapere,ciao e grazie ^^

    Ps:complimenti per il blog!

    RispondiElimina
  27. Ciao Iole ho preso un widget da te ( quello delle bandierine) e sto seguendo i tuoi consigli! Grazie!!!!!!!!

    RispondiElimina
  28. Ho scoperto per caso iltuo blog, veramente interessantissimo. Mi sono subito abbonato ai tuoi feed.
    Una domanda: nel codice in oggetto in elenco links, cosa metto?

    grazie e complimenti

    RispondiElimina
  29. @francescomisc: al posto di elenco di link puoi mettere il codice html per avere una lista di link, come ad esempio:
    <a href="link1">nome1</a>
    <a href="link2">nome2</a>
    ...

    Ovviamente sostituendo opportunamente link1, link2, ... e nome1, nome2, ...
    Ad esempio il link al mio blog è:
    <a href="http://iolecal.blogspot.com/">Iole</a>
    Spero di essere stata chiara!

    RispondiElimina
  30. grazie iole.

    un gran "lavoraccio", visto la mia interminabile lista di link amici.

    grazie di cuore.

    se vuoi puoi venirmi a trovare su: "Quelli che l'Inter..."

    RispondiElimina
  31. Ciao Iole sono Rita, puoi aiutarmi?Ho utilizzato come tu hai descritto qui:
    http://iolecal.blogspot.com/2009/07/come-inserire-un-box-con-barra-di.html
    lo scroller e mi succede una cosa strana.Apendo con chrome ed explorer si vede benissimo a destra e sinistra mentre con firefox che uso maggiormente a destra dimezza lo scroller non permettendo la lettura.
    Ti scrivo il link:
    http://lovingwaves.blogspot.com/

    RispondiElimina
  32. @aries_moon: ho provato ad aprire il tuo blog con Firefox, Chrome ed Internet Explorer e gli scroller li vedo tutti bene... A quale ti riferisci in particolare?

    RispondiElimina
  33. Ciao Iole, grazie per la sollecita risposta.Allora ti aggiorno:-)).Se tolgo la foto del primo autore che in questo caso è Rudhyar ed nella barra a destra lasciando quindi iniziare la scritta allora si vede bene con tutti e tre i browser che utilizzo( chrome, firefox e saltuariamente explorer).Lasciando la foto invece in testa cioè all'inizio dello scroller succede quello che vedi aprendo però con Explorer( gli altri due chrome e firefox vanno bene).Domanda stupida: è dovuto forse alla foto??
    Grazie per le dritte che ci doni. Rita

    RispondiElimina
  34. @aries_moon: ho capito a cosa ti riferisci. Per risolvere il problema ti basta aggiungere dopo l'immagine (ed in generale ogni volta che vuoi andare a capo) questo codice: <br/>.
    Prova e fammi sapere!

    RispondiElimina
  35. ciao jole
    ti volev ingraziare perchè ho utilizzato i tuoi preziosi consigli
    sul mio blo didatticowww.pagineditrattamentotesti.blogspot.com
    grazie diana

    RispondiElimina
  36. Ti adoro!
    Ti ho scoperta per caso, ti inserirò nei feed e pure nel blogroll.
    Bacix

    RispondiElimina
  37. Interessantissimo grazie :) mi ha suggerito il link Interclub Acquaviva :)

    RispondiElimina
  38. http://arrgianf.blogspot.com/2010/04/internet-widget-per-blogger-bandierine.html ti ho appena linkato questo post :)

    RispondiElimina
  39. Ciao mi spiegheresti, cortesemente come si fa ad inserire nel box con barra di scroll il codice Html di una immagine che gli utenti possono prelevare ed inserire nel loro blog?.

    Ho provato ad inserirlo nel box di cui hai dato l'html sopra al posto della scritta elenco dilink, ma mi appare l'immagine e non il codice
    Grazie per l'aiuto

    RispondiElimina
  40. @bimby: il codice html per pubblicare un'immagine che i tuoi lettori possono prelevare e inserire nei loro blog è:
    <a href="indirizzo_blog"><img src="indirizzo_immagine"/></a>
    <br/>
    <textarea rows="4" cols="20"><a href="indirizzo_blog"><img src="indirizzo_immagine"/></a></textarea>

    ovviamente devi personalizzare il codice html impostando l'indirizzo_blog e l'indirizzo_immagine e la dimensione del box (numero di righe 4 e numero di colonne 20).

    RispondiElimina
  41. Perdonami iole, ma non riesco a mettere in ordine i link. Per esempio come faccio a sistemarli in due colonne come è presente nel tuo blog, o tutti a destra o al centro. Io non riesco.

    Grazie mille

    RispondiElimina
  42. @francescomisc: per visualizzare i link in due colonne prova a creare una tabella: qui un tutorial!

    RispondiElimina
  43. Ciao, mi sono accorto che con explorer il contenuto del box va in panne; esce fuori e si visualizza a tutta pagina.

    RispondiElimina
  44. @Alessio Angelico: ti riferisci al box contenente i banner dei blog amici?
    In effetti è strano, ho copiato il codice dal tuo blog e incollato in un file html e si vede correttamente su tutti i browser, compreso Internet Explorer.

    RispondiElimina
  45. Come sempre sei fantastica, ho trovato molto interessante questo aiuto, ma non era proprio quello che cercavo, premettendo che di queste cose ne capisco poco e quel poco solo grazie a te, ma mi è capitato di vedere in alcuni blog di lettura, la possibilità di inserire sulla destra sotto la voce libri che sto leggendo, non i titoli come trovi da me, ma le immagini...ho provato a farlo ma non ci sono riuscita...sono una frana...help me please :((

    RispondiElimina
  46. @Rain Violet: non so se i blog di cui parli utilizzano qualche widget ma l'unica soluzione che posso proporti per inserire le immagini al posto dei titoli è molto semplice (anche se non hai molta dimestichezza con l'html).
    Segui attentamente questi passi e riuscirai ad inserire le immagini senza problemi:
    1) vai in Blogger e clicca su nuovo post
    2) come se dovessi scrivere un post, inserisci le immagini dei libri
    3) una volta inserite le immagini, clicca sul pulsante di allineamento al centro (sopra o sotto ciascuna immagine puoi anche inserire il titolo o una breve descrizione)
    4) clicca sul tab "Modifica html" e copia il codice html generato
    5) non pubblicare il post ma salvalo come bozza (quando un giorno vorrai inserire un nuovo libro potrà esserti utile)
    6) incolla il codice html che hai copiato in un gadget di tipo html/javascript della sidebar.

    Prova e fammi sapere!

    RispondiElimina
  47. Iole sei un MITO!!!!!!
    Appena fatto e mi sembra niente male tu che dici?
    Riesci a far diventare "brava" anche chi è imbranata come me.
    Grazie grazie grazie

    RispondiElimina
  48. @Rain Violet: brava, hai fatto un ottimo lavoro.
    Per me gli imbranati sono coloro che si arrendono davanti al codice html senza nemmeno provarci e hanno anche la presunzione di scrivermi commenti del tipo "io non ci capisco niente, scrivimelo tu il codice".
    Tu invece hai seguito le mie istruzioni e sei riuscita a fare tutto da sola.
    Per qualsiasi cosa, contattami pure! Aiuto sempre volentieri le persone che si impegnano come te.

    RispondiElimina
  49. Grazie! L'ho usata nel mio sito, ho anche modificato il bordo, mettendo il tag ridge e altro colore! Messo anche sfondo colorato.

    Per fare più spazio tra il bordo e il testo quale codice si deve mettere? padding?

    grazie in anticipo!

    RispondiElimina
  50. @ilblogdiniere: esatto, devi usare la proprietà padding.

    RispondiElimina
  51. ciao Iole devo inserire un codice html e non so come si inserisce l'indirizzo dell'immagine

    RispondiElimina
  52. Ciao Iole, devo inserire nel box il codice html ma non so come inserire l'indirizzo dell'immagine puoi aiutarmi?

    RispondiElimina
  53. @DolceSalato: per inserire un'immagine il codice html è il seguente:
    <img src="indirizzo_immagine" />

    RispondiElimina
  54. GRAZIE PROBLEMA RISOLTO. IL TUO BLOG E' SEMPRE UTILISSIMO!!!

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy