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>
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.
Grazie Iole per le utili informazioni!
RispondiEliminaO che bella idea! Appena esco dall'apnea casalinga ci provo...sìsì :) Grazie!
RispondiEliminaA parte il fatto che sono doverosi i complimenti ad Amsis per le foto... quasi quasi... cambio le tende... Un bacione, grazie!
RispondiEliminaGrazie ancora!
RispondiEliminaUn piccolo riconoscimento ...un premio per te.
Ciao!
Che bella soluzione risolvere il lungo elenco dei link con un modulo così!
RispondiEliminaciao Iole, sei sempre mitica con le tue "dritte", non ti perdo mai d'occhio!
RispondiEliminase passi per il mio blog c'è una sopresina per te!
ciao, Roberta
@Den: prima o poi ti assegnerò il premio "Il più affezionato dei lettori", sei sempre il primo a leggere i miei post! ^_^
RispondiElimina@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!
Ciao Iole, grazie come sempre per i tuoi consigli...
RispondiEliminaP.S.Vedo che mi hai inserito come link preferito :-)
Onoratissimo!!!
Ola Iole!
RispondiEliminaTengo 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ò!
@Tarkan: il tuo link è stato uno dei primi che ho aggiunto all'elenco dei miei blog preferiti (insieme a quello di Pablo).
RispondiElimina@Pablo Hernandez: bentornato!!! Cmq il tuo corazon deve palpitare o para mi o para Giò!
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...
RispondiEliminaMi toccherà tenere quello :-(
Ciaoooo
@Jajo: io continuo a vedere il carattere del primo paragrafo più piccolo rispetto al resto del post.
RispondiEliminaCmq 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!
Ciao iole ti faccio presente questo post
RispondiEliminahttp://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.
@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.
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaSi 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).
RispondiEliminaComunque 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.
@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.
RispondiEliminaProverò questo altro script ma dopo le ferie!!!
ciao Iole,
RispondiEliminami 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?
@The Five Demands: aggiungi prima del codice del box
RispondiElimina<div align="center">
e alla fine
</div>
non funzia :-(
RispondiEliminao forse sono solo io imbranatona!
@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.
RispondiEliminaE' sulla piattaforma wordpress.com il mio blog, non badare al dominio quello l'ho comprato ;-)
RispondiEliminaNella 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.
@The Five Demands: ho appena provato sul mio blog di prova wordpress e il blox è centrato.
RispondiEliminaTi mando un'email con il codice html.
alcuni lettori mi hanno fatto notare che non riescono a commentare sul mio blog ma non riesco a capire il perchè!!
RispondiElimina@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.
RispondiEliminaGrazie 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 ^^
RispondiEliminaPs:complimenti per il blog!
Utilissimo...Grazie!
RispondiEliminaCiao Iole ho preso un widget da te ( quello delle bandierine) e sto seguendo i tuoi consigli! Grazie!!!!!!!!
RispondiEliminaHo scoperto per caso iltuo blog, veramente interessantissimo. Mi sono subito abbonato ai tuoi feed.
RispondiEliminaUna domanda: nel codice in oggetto in elenco links, cosa metto?
grazie e complimenti
@francescomisc: al posto di elenco di link puoi mettere il codice html per avere una lista di link, come ad esempio:
RispondiElimina<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!
grazie iole.
RispondiEliminaun gran "lavoraccio", visto la mia interminabile lista di link amici.
grazie di cuore.
se vuoi puoi venirmi a trovare su: "Quelli che l'Inter..."
Ciao Iole sono Rita, puoi aiutarmi?Ho utilizzato come tu hai descritto qui:
RispondiEliminahttp://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/
@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?
RispondiEliminaCiao 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??
RispondiEliminaGrazie per le dritte che ci doni. Rita
@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/>.
RispondiEliminaProva e fammi sapere!
ciao jole
RispondiEliminati volev ingraziare perchè ho utilizzato i tuoi preziosi consigli
sul mio blo didatticowww.pagineditrattamentotesti.blogspot.com
grazie diana
Ti adoro!
RispondiEliminaTi ho scoperta per caso, ti inserirò nei feed e pure nel blogroll.
Bacix
Interessantissimo grazie :) mi ha suggerito il link Interclub Acquaviva :)
RispondiEliminahttp://arrgianf.blogspot.com/2010/04/internet-widget-per-blogger-bandierine.html ti ho appena linkato questo post :)
RispondiEliminaCiao 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?.
RispondiEliminaHo 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
@bimby: il codice html per pubblicare un'immagine che i tuoi lettori possono prelevare e inserire nei loro blog è:
RispondiElimina<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).
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.
RispondiEliminaGrazie mille
@francescomisc: per visualizzare i link in due colonne prova a creare una tabella: qui un tutorial!
RispondiEliminagrazie iole
RispondiEliminaCiao, mi sono accorto che con explorer il contenuto del box va in panne; esce fuori e si visualizza a tutta pagina.
RispondiElimina@Alessio Angelico: ti riferisci al box contenente i banner dei blog amici?
RispondiEliminaIn 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.
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@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).
RispondiEliminaSegui 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!
Iole sei un MITO!!!!!!
RispondiEliminaAppena fatto e mi sembra niente male tu che dici?
Riesci a far diventare "brava" anche chi è imbranata come me.
Grazie grazie grazie
@Rain Violet: brava, hai fatto un ottimo lavoro.
RispondiEliminaPer 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.
Grazie! L'ho usata nel mio sito, ho anche modificato il bordo, mettendo il tag ridge e altro colore! Messo anche sfondo colorato.
RispondiEliminaPer fare più spazio tra il bordo e il testo quale codice si deve mettere? padding?
grazie in anticipo!
@ilblogdiniere: esatto, devi usare la proprietà padding.
RispondiEliminaciao Iole devo inserire un codice html e non so come si inserisce l'indirizzo dell'immagine
RispondiEliminaCiao Iole, devo inserire nel box il codice html ma non so come inserire l'indirizzo dell'immagine puoi aiutarmi?
RispondiElimina@DolceSalato: per inserire un'immagine il codice html è il seguente:
RispondiElimina<img src="indirizzo_immagine" />
GRAZIE PROBLEMA RISOLTO. IL TUO BLOG E' SEMPRE UTILISSIMO!!!
RispondiElimina