L'aggiunta di una barra laterale alla tua attività Tumblr avvantaggia il tema fornendo informazioni aggiuntive sulla tua attività, collegamenti in uscita a organizzazioni partner o siti Web correlati o un campo di ricerca per trovare contenuti specifici nel sito. Molti temi sono progettati per supportare una barra laterale, ma puoi anche inserirne uno nel tuo tema utilizzando l'editor HTML di Tumblr. La creazione della barra laterale personalizzata con un editor di testo e lo stile con CSS ti offre il controllo completo sulle sue funzioni e sul suo aspetto, permettendoti di abbinare più accuratamente il suo aspetto alla tua identità aziendale.

Scrivi e applica uno stile al markup della barra laterale

1

Decidi cosa vuoi che appaia nella barra laterale e scrivi una bozza del contenuto della barra laterale in un documento di testo normale per un uso successivo.

2

Crea un nuovo documento HTML con tag per lo styling utilizzando la tua applicazione di modifica del testo. La struttura della pagina HTML5 dovrebbe essere simile alla seguente:

3

Inserisci un tag a parte con un ID "sidebar" nel corpo del documento HTML5. Il tag a parte dovrebbe essere simile al seguente:

4

Copia il contenuto che hai composto in precedenza per la barra laterale e incollalo nel tag a parte.

5

Utilizza il markup conforme agli standard per convertire il contenuto della barra laterale in HTML5. Ad esempio, racchiudi le intestazioni all'interno dei tag di intestazione, il contenuto del paragrafo all'interno dei tag di paragrafo e racchiudi il testo del collegamento nei tag di ancoraggio con i riferimenti al collegamento ipertestuale. Consulta una guida di riferimento HTML se non sei sicuro di come funzioni (vedi Risorse).

6

Salva il file come documento HTML sul desktop

7

Apri il browser web, seleziona "File", fai clic su "Apri" e seleziona il documento HTML salvato sul desktop. Il tuo browser mostra la tua barra laterale senza stile.

8

Torna al tuo editor di testo, posiziona il cursore tra i tag di stile e applica uno stile al markup facendo affidamento sul selettore "#sidebar" per scegliere come target la barra laterale. Lo stile della barra laterale dipenderà in gran parte dai tuoi gusti, dal design del tuo tema Tumblr esistente e dal markup nella barra laterale. Usa una guida di riferimento CSS3 per assicurarti di comporre correttamente le proprietà e i loro valori (vedi Risorse).

9

Decidi se vuoi la tua barra laterale a sinistra oa destra e assegna di conseguenza una proprietà float. Ad esempio, se desideri la barra laterale a sinistra del contenuto principale, il selettore "#sidebar", la proprietà float e il valore saranno i seguenti:

sidebar {

float: sinistra;

}

10

Verifica l'aspetto della barra laterale facendo clic su Aggiorna nel browser e continua a regolare lo stile del markup finché non sei soddisfatto del suo aspetto.

Inserisci la barra laterale nel tuo tema Tumblr

1

Accedi alla dashboard di Tumblr, fai clic sul titolo del tuo blog nella barra laterale destra, fai clic su "Personalizza" e fai clic su "Modifica HTML" per aprire l'editor del codice sorgente di Tumblr.

2

Copia il CSS dal tuo documento HTML aperto e incollalo alla fine della regione di stile del tuo tema Tumblr.

3

Trova il selettore CSS per la tua area di contenuto principale nell'editor di Tumblr, posiziona il cursore dopo la parentesi graffa e assegna la stessa proprietà float e il valore della barra laterale. Ad esempio, se la tua barra laterale deve apparire a destra, assegna una proprietà float con un valore di "right" al selettore del contenitore.

4

Copia il tag a parte e il suo contenuto dal tuo editor di testo e incollalo nel tag del corpo del tuo tema Tumblr. Se desideri che la barra laterale appaia a destra del contenuto principale, posizionala dopo quel contenitore; se vuoi che appaia a sinistra, incollalo prima del contenitore principale.

5

Fare clic su "Aggiorna anteprima", fare clic su "Aspetto" e fare clic sul pulsante "Salva" per finalizzare le modifiche apportate al tema.