3 czerwca 2013

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 :) 

2 komentarze:

  1. Mi się przyda! Przynajmniej spróbuję to zrobić xD A jak nie to będę Wam zaśmiecać szajsbox dalej ;*

    OdpowiedzUsuń