Inserire una Scrollbar in un box nel proprio Blog

Aggiungendo una porzione di codice al nostro Blog possiamo risparmiare spazio nei vari widget o box che abbiamo inserito. Una buona idea è usare la Scrollbar per ottimizzare gli spazi, non è il massimo dell'estetica ma in alcuni casi è molto utile.

Per fare un esempio si potrebbe usare nel Blogroll o nella lista dei Partner o nel box in cui abbiamo inserito tutti gli Antipixel dei siti a cui ci siamo iscritti, oppure nella lista di foto che vogliamo far vedere, insomma può essere adattata in molte situazioni.

Prendiamo come esempio lo spazio che ho usato per i "Partner" nella colonna laterale di destra (quella lista di link e Antipixel), che è uguale alla foto qui sotto. Ora per capirci chiamo "lista partner" il codice che ho usato per il box "Partner".

Se usiamo Wordpress dobbiamo solo usare il codice qui sotto, ma se usiamo  Blogger andiamo nel Layout, apriamo il Widget dedicato nel mio caso ai "Partner" e aggiungiamo il codice sotto riportato. Oppure possiamo usare una soluzione un pò spartana, clicchiamo su "Modifica HTML",
check su "Espandi i modelli widget" e inseriamo il codice (però diventa fondamentale farci aiutare da Firebug di Firefox per sapere con precisione dove inserire il codice):

<div style="width:200px; height: 200px; border: 1px dashed #666666;
overflow:auto;">
lista partner
</div>

Dove precisamente:

width:200px >> la larghezza del box in pixel
height: 200px >> l'altezza del box in pixel
border: 1px >> bordo del box di 1 pixel
dashed #666666 >> colore del bordo del box
overflow:auto >> con "auto" si intende che nel momento in cui la mia lista supera la lunghezza di 200 pixel, la scrollbar si attiva in automatico.

Per ordinare i link o Antipixel con elenco puntato come nel mio caso usate questa porzione di codice:

<ul>
<li>
codice Antipixel o link
</li>
<li>
codice Antipixel o link
</li>
</ul>

Lasciatemi un commento sulla vostra opinione!

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!