whycomputer.com >> Cunoașterea pe Internet >  >> Internet

Cum să creați o bara laterală fixă ​​pe Tumblr

Dacă ați scrolat vreodată o pagină Web și un element pe ea nu s-a mutat, ați fost martorul etichetei de poziție CSS în acțiune. Bloggerii Tumblr care adaugă această etichetă la șabloanele lor pot crea același efect în blogurile lor. Un loc bun pentru a încerca acest lucru este pe bara laterală. După ce adăugați o etichetă de poziție în codul HTML al blogului dvs., bara laterală rămâne fixă ​​atunci când utilizatorii scot în sus și în jos paginile de blog.

Accesați tabloul de bord Tumblr, apoi faceți clic pe pictograma de setări și numele blogului pe care l- d doriți să actualizați. Dacă aveți doar un blog, faceți clic pe numele acestuia.

Faceți clic pe "Personalizați" urmat de "HTML adăugat". Tumblr deschide tema și afișează codul HTML.

Faceți clic oriunde în interiorul codului și apăsați "Ctrl-A" urmat de "Ctrl-C" pentru a copia codul în clipboard-ul Windows. Deschideți un nou document Notepad și inserați codul în document. Acești pași vă asigură că aveți o copie de rezervă a șablonului original.

Reveniți la codul HTML Tumblr și apăsați "Ctrl-F" pentru a deschide o casetă de căutare. Introduceți "bara laterală" în acea casetă de căutare, apoi apăsați "Enter". Tumblr găsește prima apariție a "bara laterală" și afișează secțiunea de cod care conține acel cuvânt. Codul pe care îl găsește ar trebui să arate similar cu următorul text:

wrapper #sidebar {culoare: {culoare: Context}; }

Prima linie de cod conține cuvintele #wrapper #sidebar. O coloană din stânga urmează acele cuvinte.

Introduceți codul imediat imediat sub prima linie de cod:

position: fixed; right: 100px;

Atributul de poziționare instruiește browserele să fixeze bara laterală astfel încât să nu se miște când derulați. Atributul drept le spune browserelor câte pixeli doriți ca marginea dreaptă a barei laterale să stea de pe marginea dreaptă a paginii Web. În acest exemplu, atributul drept are o valoare de 100 pixeli.

Faceți clic pe "Actualizare previzualizare" pentru a vedea o previzualizare a modificărilor. Glisați bara de derulare a ferestrei în sus și în jos și veți vedea că bara laterală nu se mișcă. Faceți clic pe "Salvați" pentru a vă salva modificările.

Sfaturi pentru

Dacă doriți să modificați poziția orizontală a barei laterale, vă recomandăm să experimentați diferite valori pentru atributul drept. De exemplu, dacă modificați valoarea de la 100px la 50px, bara laterală se mută mai departe spre dreapta cu 50 de pixeli.

Avertismente

Aveți grijă atunci când lucrați în editorul HTML, ca schimbarea accidentală a codului existent poate avea efecte dramatice asupra aspectului paginii dvs. Dacă modificați codul și nu puteți afla cum să anulați modificările, puteți șterge întotdeauna totul în editorul HTML și inserați codul de rezervă pe care l-ați copiat în editor pentru al restabili în starea inițială.
URL:https://ro.whycomputer.com/Internet/100519141.html

Internet
  • Cum se creează un cod QR pentru un PDF

    Un cod de răspuns rapid poate fi un instrument puternic de promovare pe care îl puteți utiliza atunci când creați suporturi media pe care vă așteptați să le vizualizeze persoanele care dețin smartphone-uri. Un cod QR este o imagine pătrată mică care conține text codificat. Atunci când un proprietar

  • Cum se creează o temă Tumblr în Dreamweaver?

    O temă Tumblr este aspectul paginii care determină aspectul blogului dvs., inclusiv culorile și imaginile acestuia, și vă puteți crea propria temă folosind Dreamweaver. Deși Tumblr vă oferă un aspect prestabilit pentru pagina dvs., puteți crea o temă personalizată prin modificarea codului existent d

  • Cum de a schimba fontul titlului pe Tumblr

    Oamenii de la Tumblr sunt atât de serioși în privința faptului că utilizatorii lor se exprimau, au sacrificat litera e din numele aplicației lor. Ei îi încurajează pe utilizatori să fie la fel de nervoși, excepționali și extraordinari, oferindu-le acces la codul brut care determină cum va arăta blog

Cunoașterea pe Internet © https://ro.whycomputer.com