Kaip Tumblr svetainėje sukurti fiksuotą šoninę juostą

Jei kada nors slinkote žemyn tinklalapį ir pastebėjote, kad tam tikras elementas nejudėjo, tai buvo CSS position savybės veiksmas. Tumblr tinklaraščių savininkai, įdėję šią savybę į savo šablonus, gali pasiekti tą patį efektą – šoninė juosta (sidebar) liks fiksuota, kai lankytojai slinks puslapius. Puikus bandymų laukas – jūsų šoninė juosta.

Žingsniai, kaip pridėti fiksuotą šoninę juostą

1. Atsidarykite Tumblr valdymo skydelį. Paspauskite ant nuostatos piktogramos ir pasirinkite tą tinklaraštį, kurį norite redaguoti. Jei turite tik vieną tinklaraštį, tiesiog spustelėkite jo pavadinimą.

2. Pasirinkite Customize → Edited HTML. Tai atvers jūsų temą ir parodys jos HTML kodą.

3. Paspauskite bet kurioje kodo vietoje ir naudokite Ctrl+A > Ctrl+C, kad nukopijuotumėte visą kodą į iškarpinę. Atidarykite Notepad (ar kitą teksto redaktorių) ir įklijuokite kodą – tai bus jūsų atsarginė šablono kopija.

4. Grįžkite į HTML redaktorių ir paspauskite Ctrl+F, kad atidarytumėte paieškos langelį. Įveskite sidebar ir paspauskite Enter. Turėtumėte rasti pirmąjį #sidebar fragmentą, panašų į šį:

#wrapper #sidebar {
    /* esami stiliai */
}

5. Tiesiai po atidarymo skliausteliu įterpkite šį kodą:

position: fixed;
right: 100px;

Attributas position: fixed nurodo naršyklei fiksuoti elementą, kad jis nejudėtų slenkant puslapiui. right: 100px nustato atstumą nuo dešiniojo lango krašto – galite koreguoti šią vertę pagal poreikį.

6. Paspauskite Update Preview, kad pamatytumėte, kaip atrodys jūsų tinklaraštis. Slankiojant puslapio juostą, šoninė juosta neturėtų judėti. Jei viskas atrodo gerai, spustelėkite Save ir išsaugokite pakeitimus.

Patarimai

Eksperimentuokite su right reikšme – jei, pavyzdžiui, pakeisite ją iš 100px į 50px, juosta atsitrauks 50 pikselių į dešinę. Galite taip pat naudoti left arba top/bottom savybes, jei norite kitaip pozicionuoti elementą.

Įspėjimai

Redaguodami HTML, būkite atsargūs – netikslus kodo pakeitimas gali sugadinti puslapio išdėstymą. Jei įvyksta klaida, tiesiog ištrinkite visą turinį iš redaktoriaus ir įklijuokite ankščiau išsaugotą atsarginį kodą, kad grąžintumėte šabloną į pradinę būseną.