Cum adaugam o caseta de derulare verticala (scroll box) in Blogger

Atunci cand dorim sa inseram in articol un paragraf foarte lung si nu vrem sa fie vizibil tot, il putem adauga intr-o caseta de derulare (scroll box). Caseta de derulare verticala (vertical scroll box) este utila cand aveti continut lung si doriti sa salvati spatiu in articol. In acest fel vizitatorii blogului nu trebuie sa deruleze tot continutul articolului  ca sa citeasca acel paragraf, ci doar caseta de defilare  pe care o cream in cadrul postarii.

Pentru a crea o caseta de derulare doar cu derulare pe verticala avem nevoie sa folosim overflow-y:scroll;. Aceasta comanda ii spune browser-ului sa creeze o caseta de derulare pe axa y (verticala). Pentru ca bara de derulare sa nu apara si pe axa orizintala (x) folosim proprietatea overflow, mai exact overflow-x:hidden.

In exemplul de mai jos am adaugat continutul "text" intr-o casuta de derulare cu latimea de 720 px si inaltimea 100 px. Latimea si inaltimea casetei de derulare o puteti modifica singuri. Codul  este urmatorul:

<div style="border:1px solid black;width:720px;height:100px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
<p style="height:250%;">
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</p>
</div>
Rezultatul in urma inserarii acestui cod in Blogger este:

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Pentru a insera codul de mai sus in Blogger urmati pasii:
1. Va logati in contul Blogger;
2. Click pe Postari si apoi pe Creati o postare noua;
3. Scrieti articolul dorit iar cand vreti sa introduceti un paragraf lung intr-o caseta de derulare comutati pe optiunea HTML a postarii si lipiti codul de mai sus (il copiati in prealabil), cu mentiunea ca in locul campului unde scrie Text text...text veti introduce pragraful dvs.
4. Comutati apoi pe optiunea Scrieti in cadrul postarii si finalizati articolul.

Screenshot:

Orice nelamurire pe care o aveti legata de acest articol, postati-o va rog in comentarii sa o putem rezolva impreuna. Daca ti-a placut, nu uita sa distribui articolul!

Tweet