044. Instrukcja - Szeroka lista

                Dzisiaj mamy instrukcję na szeroką listę. Zainspirowała mnie do tego Sasame ( i dzięki jej za to). Więc zaczynajmy ^^

Wchodzimy na swojego bloga -> Projekt -> Układ -> Dodaj gadżet -> HTML/Java Script

Teraz zabieramy się za wklejanie. Zaczynamy od tego:

<form><select style="width: wpisujemy liczbę pikseli, która ma być długością naszej listy np. 425px;"onchange="window.open(this.options[this.selectedIndex].value,'_self')"

size=1 name=menu> 

<option />-Tu wpisujemy nazwę naszej listy np.Spis treści<!-- change the links with your own -->

<option value="link do strony" />Nazwa strony<option value=”link  do strony” />Nazwa strony</select></form>

Kolejne linki i nazwy wklejacie przed frazą "</select></form>" Proste? 

Pogrubioną czcionką dodane jest wszystko to co nie powinno znajdować się w naszym gadżecie (!!)

Jeżeli ktoś nadal czegoś nie wie tutaj ma przykład: 

<form><select style="width: 425px;"onchange="window.open(this.options[this.selectedIndex].value,'_self')"

size=1 name=menu>

<option />- Spis treści<!-- change the links with your own -->

<option value="http://ministerstwo-szablonow.blogspot.com/2013/06/041-szablon-wolny.html" />

041. Szablon wolny<option value=" http://ministerstwo-szablonow.blogspot.com/2013/06/042-szablon-dla-ahiru.html" />042. Szablon dla Ahiru<option value="http://ministerstwo-szablonow.blogspot.com/2013/06/043-sasusaku.html" />043. SasuSaku</select></form>

Żeby było zabawniej widok szerokiej listy można zmodyfikować. Więc co takiego można zrobić? 

Zmiana koloru liter:

color: #ffffff;

Zmiana koloru tła:

background-color: #000000;

Obrazek w tle (tylko jak lista jest zwinięta):

background-image: url('adres obrazka');

Cienie pod literkami:

text-shadow: 0px 1px 1px #000000;

Cienie szerokiej listy:

box-shadow: 0px 1px 1px #000000;

Wyśrodkowanie tekstu:

text-align: center;

Wyrównanie tekstu do lewej:

text-align: left;

Wyrównanie tekstu do prawej:

text-align: right;

Obramowanie (tu radzę uważać):

- Z lewej strony:

border-left: 1px dotted #ffffff;

- Z prawej strony:

border-right: 1px dotted #ffffff; 

Z góry: 

border-top: 1px dotted #ffffff;

Z dołu: 

border-bottom: 1px dotted #ffffff;

dotted - kropki

dashed - kreski

solid - linia ciągła

 double - linia podwójna

Zaokrąglone rogi:

border-radius: 0px 20px 20px 0px; 

 Zmiana wielkości liter: 

font-size: 11px; 

*wielkości można zmieniać(!!!!)
(!) większość z nich działa jednak tylko na zwiniętej liście

Teraz najważniejsza sprawa, gdzie to wkleić? Otóż wchodzimy w to co zrobiliśmy poprzednio i wyszukujemy frazę width: ???*px; 

Nasze komendy wpisujemy po tej frazie oddzielając je średnikiem (;)

*nasza wielkość

Przykład:

<form><select style="width: 425px; border-radius: 0px 20px 20px 0px; border-left: 2px double #a90505; border-right: 2px double #a90505; border-top: 2px double #a90505; border-bottom: 2px double #a90505; box-shadow: 0px 0px 4px #a90505;"onchange="window.open(this.options[this.selectedIndex].value,'_self')"

size=1 name=menu>........ (u góry macie co tu powinno być)

Wygląda to mniej więcej tak:

W razie problemów zgłaszajcie się na szajsboxie w komentarzach lub na gg 34782677 :) 

Pozdrawiam i mam nadzieję, że komuś się ta instrukcja przydała :)