Pudotusvalikko1

Pudotusvalikko - Dropdownmenugenerator.com

Tällä ohjeella luot java-pohjaisen pudotusvalikon/alasvetovalikon blogiisi. Valikon luonti ja ennenkaikkea sen muokkaus ei vaadi muokkauksia blogisi html koodiin, joten ohje soveltunee hyvin myös vähemmän asiaan perehtyneille.  

1. Rekisteröityminen

Mene osoitteeseen http://www.dropdownmenugenerator.com/ ja klikkaa oikeasta yläkulmasta "log in"

Klikkaa "Create Account"

Täytä vaaditut tiedot ja klikkaa "Create My Account"

Salasana lähetetään sähköpostiosoitteeseen, jota käytit rekisteröitymiseen. 
Kirjaudu sisään käyttämällä sähköpostiosoitettasi.

2. Valikon luonti

Valikko nimetään oletusarvoisesti aina nimellä "MyMenu1", eikä sitä pysty muuttamaan. Valikon koko on rajoitettu 20 palkkiin. Kuukausimaksullisessa versiossa yllä mainittuja rajoituksia ei ole.
Valikon luontiin en lähde tässä sen syvällisemmin perehtymään. Tärkeimmät kohdat on kuitenkin listattuna alla. 

1. Teema, 2. Rakenne, 3. Asetukset, 4. Vaihda teema, 5. Värit, 6. Tekstityyppi, 7. Nuolityyppi, 8. Päivitä, 9. Esikatselu (selaimessa), 10. Testikoodi, 11. Lataa valikko, 12. Esikatselu, 13. Valikon nimi

1. Lisää palkki, 2. Lisää erotus, 3. Valikon järjestys, 4. Palkin logo, teksti ja linkki

1. Pystysuuntainen valikko, 2. Valikon leveys, 3. Palkkien sijainti (Oikealla, keskellä, vasemmalla), 4. Valikon läpinäkyvyys, 5. Pudotusvalikon palkin korkeus, 6. Pudotusvalikon läpinäkyvyys

3. Valikon testaaminen bloggerissa

Jotta voit testata tekemääsi valikkoa bloggerissa sinun täytyy ensin luoda "HTML/Javascript" gadget. 

Klikkaa bloggerin vasemmasta reunasta "Ulkoasu" ja tämän jälkeen blogisi otsikon alapuolella olevaa "Lisää Gadget" tekstiä.

Etsi avautuvasta valikosta kuvan mukainen "HTML/Javascript" ja paina sen oikeassa yläkulmassa olevaa "+" merkkiä. Tämä avaa uuden ikkunan, johon tullaan seuraavaksi lisäämään tekemäsi valikon testauskoodi.

klikkaa sivustolla dropdownmenugenerator.com painiketta "Code"(2)

klikkauksen jälkeen aukeaa kuvan mukainen laatikko. Kopioi sisemmässä laatikossa oleva koodi ja liitä se bloggerin "HTML/Javascript" laatikkoon, jonka avasit aiemmin.

"HTML/Javascript" tulisi näyttää suunnilleen tältä koodin liittämisen jälkeen.

Tallenna ja voit siirtyä katsomaan pudotusvalikkoa blogiisi. 

Pudotusvalikko pitäisi näkyä nyt blogissasi.

4. Valikon tallentaminen Driveen

Tekemäsi valikko täytyy tallentaa Google driveen, koska kohdassa 3. tekemäsi valikko poistuu 24 tunnin kuluttua palvelimelta. Bloggeriin ei voida tallentaa tiedostoja, joten ohjeiden mukainen pudotusvalikko täytyy hakea muusta osoitteesta sivulatauksen yhteydessä. Tähän tarkoitukseen paras ja luotettavin vaihtoehto on ilmainen Google Drive, joka on käytettävissä gmail tunnuksilla.   

Google Drive - https://www.google.com/intl/fi/drive/

Google Driveen päästyäsi klikkaa "oma drive" ja tämän jälkeen "uusi" ja valitse kansio.

Nimeä kansio nimellä "MyMenu1"

Palaa sivustolle dropdownmenugenerator.com ja  klikkaa "Download" (3), jonka jälkeen tekemäsi valikko latautuu zip. tiedostona. Tarvitset zip tiedoston purkamiseen esimerkiksi ilmaisen WinRaR ohjelman. 

Avaa zip tiedostossa oleva kansio "MyMenu1"

 Kansion sisältö tulisi näyttää suunnilleen tältä. Sisältö vaihtelee riippuen tekemästäsi valikosta.

Tummenna/valitse nämä tiedostot ja siirrä ne Google Driveen.

Siirron jälkeen Driveen luomasi kansion sisältö tulisi näyttää suunnilleen tältä.

5.Valikon käyttöönotto bloggerissa

Driveen tallennetut tiedostot täytyy tehdä ensin julkisiksi. Tämä onnistuu klikkaamalla kansiota "MyMenu1" hiiren oikealla näppäimella ja valitsemalla ilmestyvästä valikosta "jaa.."

Tämän jälkeen avautuu ikkuna, jonka oikeasta alakulmasta valitaan "lisäasetukset"

 Kansion julkaisemiseksi täytyy kansion käyttöoikeuksia muuttaa. Klikkaamalla "Muuta.." pääset muokkaamaan kansion julkisuusasetuksia.

Valitse "Päällä - Julkinen verkossa" ja tallenna. Varmista, että julkiset käyttöoikeudet ovat vain katselua varten. (kuvassa "voi katsella")

Tallentamisen jälkeen palaat takaisin aiempaan valikkoon. 

Kopioi "Jaettava linkki" ja liitä se esimerkiksi notepadiin tai muuhun  tekstinkäsittelyohjelmaan.

Liitä kopioimasi linkki tekstitiedostoon sekä alle oheinen koodi:

  <script type="text/javascript" src="https://googledrive.com/host/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/MyMenu1.js">
         </script>
         <div id="MyMenu1"></div>

Korvaa koodin /XX..XX/ kirjain- ja numerosarjalla, joka on luomasi kansion julkisessa linkissä. 

(Kopioi kaikki väliltä id= ja &)

Valitse bloggerin vasemmasta kulmasta "Ulkoasu" ja etsi tekemäsi "HTML/Javascript" laatikko ja paina sen oikeasta alakulmasta muokkaa.

Kopioi muodostamasi koodi tekstitiedostosta ja liitä se aiemmin tehdyn testauskoodin tilalle.

Koodi tulisi näyttää samalta, kuin alla olevassa kuvassa. Sillä erotuksella, että välillä "host/.../MyMenu1.js" on sinun valikkosi numero- ja kirjainyhdistelmä.

Onneksi olkoon, tekemäsi pudotusvalikko on nyt valmis!

Mikäli haluat tehdä muutoksia valikkoosi, kirjaudu sivustolle dropdownmenugenerator.com ja tee haluamasi muutokset valikkoosi. Lataa päivitetty valikko ja korvaa kansion "MyMenu1" sisältö uusilla tiedostoilla.