Come creare una barra laterale fissa su Tumblr

Se hai mai fatto scorrere verso il basso una pagina Web e un elemento su di essa non si è spostato, hai visto il tag di posizione CSS in azione. I blogger di Tumblr che aggiungono questo tag ai loro modelli possono creare lo stesso effetto nei loro blog. Un buon posto per provarlo è nella barra laterale. Dopo aver aggiunto un tag di posizione al codice HTML del tuo blog, la barra laterale rimane fissa quando le persone scorrono su e giù per le pagine del tuo blog.

Visita la tua dashboard di Tumblr, quindi fai clic sull'icona delle impostazioni e sul nome del blog che desideri aggiornare. Se hai un solo blog, fai clic sul suo nome.

Fai clic su "Personalizza" seguito da "HTML aggiunto". Tumblr apre il tuo tema e mostra il suo codice HTML.

Fare clic in un punto qualsiasi del codice e premere "Ctrl-A" seguito da "Ctrl-C" per copiare il codice negli appunti di Windows. Apri un nuovo documento Blocco note e incolla il codice nel documento. Questi passaggi assicurano di avere una copia di backup del modello originale.

Torna al codice HTML di Tumblr e premi "Ctrl-F" per aprire una casella di ricerca. Digita "barra laterale" in quella casella di ricerca, quindi premi "Invio". Tumblr trova la prima occorrenza di "sidebar" e visualizza la sezione di codice che contiene quella parola. Il codice che trova dovrebbe essere simile al seguente:

wrapper #sidebar { color: {color:Background}; }

La prima riga di codice contiene le parole #wrapper #sidebar. Una parentesi sinistra segue quelle parole.

Incolla il seguente codice immediatamente sotto la prima riga di codice:

posizione: fissa; a destra: 100 pixel;

L'attributo position indica ai browser di correggere la barra laterale in modo che non si sposti durante lo scorrimento. L'attributo right indica ai browser di quanti pixel desideri che il bordo destro della barra laterale si trovi rispetto al margine destro della pagina Web. In questo esempio, l'attributo di destra ha un valore di 100 px.

Fai clic su "Aggiorna anteprima" per visualizzare un'anteprima delle modifiche. Trascina la barra di scorrimento della finestra su e giù e vedrai che la barra laterale non si muove. Fare clic su "Salva" per salvare le modifiche.

Suggerimenti

Potresti voler sperimentare valori diversi per l'attributo giusto se desideri regolare la posizione orizzontale della barra laterale. Ad esempio, se modifichi il valore da 100 px a 50 px, la barra laterale si sposta più a destra di 50 pixel.

Avvertenze

Fai attenzione quando lavori nell'editor HTML, poiché la modifica accidentale del codice esistente può avere effetti drammatici sul layout della pagina. Se modifichi il codice e non riesci a capire come annullare le modifiche, puoi sempre eliminare tutto nell'editor HTML e incollare il codice di backup che hai copiato nell'editor per ripristinarlo alla sua condizione originale.