Adăugarea unei bare laterale la afacerea dvs. Tumblr beneficiază de temă prin furnizarea de informații suplimentare despre afacerea dvs., linkuri de ieșire către organizații partenere sau site-uri web conexe sau un câmp de căutare pentru găsirea de conținut specific pe site. Multe teme sunt concepute pentru a accepta o bară laterală, dar puteți introduce și una în temă utilizând editorul HTML al Tumblr. Crearea propriei bare laterale cu un editor de text și stilarea acesteia cu CSS vă oferă un control complet asupra funcțiilor și aspectului său, permițându-vă să potriviți mai exact aspectul său cu identitatea afacerii dvs.
Scrieți și stilizați marcajul barei laterale
1
Decideți ce doriți să apară în bara laterală și scrieți o schiță a conținutului barei laterale într-un document text simplu pentru utilizare ulterioară.
2
Creați un nou document HTML cu etichete pentru stil, utilizând aplicația de editare a textului. Structura paginii HTML5 ar trebui să arate după cum urmează:
3
Introduceți o etichetă deoparte cu o „bară laterală” în corpul documentului HTML5. Eticheta deoparte ar trebui să arate după cum urmează:
4
Copiați conținutul pe care l-ați compus anterior pentru bara laterală și lipiți-l în eticheta aparte.
5
Utilizați marcaje conforme standardelor pentru a converti conținutul barei laterale în HTML5. De exemplu, includeți anteturi în etichetele de antet, conținutul de paragraf în etichetele de paragraf și atașați textul linkului în etichetele de ancorare cu referințe de hyperlink. Consultați un ghid de referință HTML dacă nu sunteți sigur cum funcționează acest lucru (consultați Resurse).
6
Salvați fișierul ca document HTML pe desktop
7
Deschideți browserul web, selectați „Fișier”, faceți clic pe „Deschidere” și selectați documentul HTML pe care l-ați salvat pe desktop. Browserul dvs. afișează bara laterală nestilată.
8
Reveniți la editorul de text, plasați cursorul între etichetele de stil și stilizați marcajul bazându-vă pe selectorul „#sidebar” pentru a viza bara laterală. Modul în care stilați bara laterală va depinde în mare măsură de gusturile dvs., de designul temei dvs. existente Tumblr și de marcajul din bara laterală. Utilizați un ghid de referință CSS3 pentru a vă asigura că compuneți corect proprietățile și valorile acestora (consultați Resurse).
9
Decideți dacă doriți bara laterală din stânga sau din dreapta și atribuiți o proprietate float în consecință. De exemplu, dacă doriți bara laterală din stânga conținutului principal, selectorul „#sidebar”, proprietatea float și valoarea ar arăta după cum urmează:
plutește la stânga; }
10
Testați aspectul barei laterale făcând clic pe Reîmprospătare în browser și continuați să ajustați stilul de marcare până când sunteți mulțumit de aspectul său.
Introduceți bara laterală în tema dvs. Tumblr
1
Conectați-vă la tabloul dvs. de bord Tumblr, faceți clic pe titlul blogului dvs. în bara laterală dreaptă, faceți clic pe „Personalizați” și faceți clic pe „Editați HTML” pentru a deschide editorul de cod sursă Tumblr.
2
Copiați CSS din documentul HTML deschis și lipiți-l la sfârșitul regiunii de stil a temei dvs. Tumblr.
3
Găsiți selectorul CSS pentru regiunea dvs. de conținut principal în editorul Tumblr, plasați cursorul după paranteză buclată și atribuiți aceeași proprietate float și valoare ca bara laterală. De exemplu, dacă bara laterală este menită să apară în dreapta, atribuiți o proprietate float cu o valoare „dreaptă” selectorului de containere.
4
Copiați eticheta deoparte și conținutul acesteia din editorul de text și lipiți-o în eticheta corpului temei dvs. Tumblr. Dacă doriți ca bara laterală să apară în dreptul conținutului principal, plasați-o după acel container; dacă doriți să apară în stânga, lipiți-l înaintea containerului principal.
5
Faceți clic pe „Actualizați previzualizarea”, faceți clic pe „Aspect” și faceți clic pe butonul „Salvați” pentru a finaliza modificările pe care le-ați făcut temei dvs.
