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ù.
Questo blog è sostenuto dalle vostre donazioni spontanee e dai click
sugli sponsor. Se sei un frequentatore abituale del mio blog e
ritieni utile il lavoro che svolgo sostienimi come puoi. Grazie!
Iscriviti e gioca!
sugli sponsor. Se sei un frequentatore abituale del mio blog e
ritieni utile il lavoro che svolgo sostienimi come puoi. Grazie!
Iscriviti e gioca!
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.
52 commenti:
Un piccolo riconoscimento ...un premio per te.
Ciao!
se passi per il mio blog c'è una sopresina per te!
ciao, Roberta
@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!
P.S.Vedo che mi hai inserito come link preferito :-)
Onoratissimo!!!
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ò!
@Pablo Hernandez: bentornato!!! Cmq il tuo corazon deve palpitare o para mi o para Giò!
Mi toccherà tenere quello :-(
Ciaoooo
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!
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.
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.
Proverò questo altro script ma dopo le ferie!!!
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?
<div align="center">
e alla fine
</div>
o forse sono solo io imbranatona!
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.
Ti mando un'email con il codice html.
Ps:complimenti per il blog!
Una domanda: nel codice in oggetto in elenco links, cosa metto?
grazie e complimenti
<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!
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..."
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/
Grazie per le dritte che ci doni. Rita
Prova e fammi sapere!
ti volev ingraziare perchè ho utilizzato i tuoi preziosi consigli
sul mio blo didatticowww.pagineditrattamentotesti.blogspot.com
grazie diana
Ti ho scoperta per caso, ti inserirò nei feed e pure nel blogroll.
Bacix
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
<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).
Grazie mille
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.
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!
Appena fatto e mi sembra niente male tu che dici?
Riesci a far diventare "brava" anche chi è imbranata come me.
Grazie grazie grazie
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.
Per fare più spazio tra il bordo e il testo quale codice si deve mettere? padding?
grazie in anticipo!
Ti è stato utile il post? Allora lasciami un commento!