Oma teema -3-

Tapahtunut edellisissä osissa: Perus internetsivu muokattiin soveltuvaksi blogger blogialustalle. Tämän jälkeen tutustuttiin bloggerissa <div> elementit korvaavan <b:section> elementin toimintaan sekä siihen millaisia atribuutteja b:section elementin määrittelyissä voidaan käyttää. 

Nyt on aika iskeä lihaa luiden ympärille. Blogin runkona toimivien b:section elementtien sisälle laitettavien widgettien ja gadgettien määrä on huima. Pelkästään blogger koodin puolella widget tyyppejä on 13 ja erilaisia gadgetteja joita blogiinsa voi lisätä on paljon enemmän. Gadgettien määrä lasketaan todennäköisesti kymmenissä ellei sadoissa.

Widget tyypeistä

Blogin toiminnan kannalta merkittävimmät widget tyypit ovat 'Blog' ja 'Header' kaikki muu on ns. kuorrutusta kakun päällä.  'Blog' widgetti on toiminnaltaan hyvin yksinkertainen se toimii ikkunana kaikille julkaistuille blogikirjoituksillesi. Header widget puolestaan toimii blogisi otsikko -alueena ja saattapa se sisältää myös lyhyen kuvauksen blogistasi. 

Kuten jo mainitsin blogger blogin lähdekoodi perustuu xml:n. Tämä tarkoittaa sitä että nämä lähdekoodissa olevat widgetitkin toimivat oikeastaan pelkkinä kehotuksina hakea jokin tieto jostakin ja 'tulostaa' se tietokoneen näytölle luettavassa muodossa. Tämän huomaa varsinkin blogikirjoituksista helposti: Kirjoitukset tallentuvat erilliseen xml tiedostoon josta tieto vain haetaan 'Blog' widgettillä esitettäväksi tiettyjen asetusten mukaisesti.

Siinä missä b:section elementti toimi kuten div-elementti html kielessä samanlaisia ominaisuuksia löytyy myös bloggerin widget elementistä b:widget. Bloggerin widget elementti b:widget sisältää kuitenkin vielä suuremman määrän erilaisia atribuutteja, joten erilaisia säätömahdollisuuksia on todella paljon. Tämän kaiken lisäksi b:widget elementti tottelee myös ehtolauseita sekä jossain määrin myös erilaisia css määrittelyjä joten aivan varmasti jokainen voi rakennella ihan oman näköisensä blogin. 

Lähdetään kuten tavallista notepad++ ohjelmalla liikkeelle ja avataan blogimme lähdekoodin xml tiedosto. Etsi blogistasi  jälleen kohta:

Tällä kertaa siirrymme hieman syvemmälle ja tarkastelemme header osan b:widget elementtiä. Kuten b:section elementissä, tulee myös widget elementissä olla määritettynä jokaiselle widgetille oma id. Tämän tulee olla uniikki jotta mahdolliset muokkaukset vaikuttaisivat ainoastaan haluttuun widgettiin.

ID atribuutin lisäksi widgetistämme löytyy kohta locked:'true'. Tämä on lähdekoodin puolelle lisättävä 'varotoimi' jolla estetään widgetin poisto liian helposti. (lukittuja widgettejä kun ei voi poistaa blogger asetusten ulkoasuvalikon kautta). Vastaavasti widgetit joissa atribuutti on asetettu muotoon locked:'false' voidaan poistaa muokkaamatta blogin lähdekoodia.

Header widgetin määrityksissä löytyy myös title joka toimii pelkästään widgetin 'nimenä' (ei pidä sekoittaa id tai type atribuuttiin), sekä atribuutti type:'header'.

Tyyppi atribuutti on id:n ohella toinen pakollinen määrittely joita b:widget elementistä tulee löytyä, näitä widget tyyppejä on yhteensä 13 ja tässä käytössä yksi niistä eli 'header'. Kaikki widget tyypit löydät alla olevasta listasta ( suurin osa widget tyypeistä on bloggerin omien gadgettien tarpeisiin tehtyjä ja ns. 3. osapuolen widgetit ovat usein tyyppiä HTML):

• BlogArchive (bloggerin blogiarkisto gadget)
• Blog (blogikirjoitukset)
• Feed (syöte)
• Header (Otsikkoalue / Ylätunniste)
• HTML (mahdollistaa html:n ja javascriptien käyttämisen)
• SingleImage (kuva)
• LinkList (linkkilista gadget)
• List (lista)
• Logo
• BlogProfile (Blogin profiili - ei sama kuin google+ profiili nykyään)
• Navbar (normaalisti blogin yläosassa oleva blogger navi palkki)
• VideoBar (video - gadget)
• NewsBar (uutiset - gadget)

Widgetin atribuutit (määritykset)

Type, locked, title ja id eivät kuitenkaan ole ainoat atribuutit joita b:widget elementin määrityksiin voidaan asettaa. Siitä syystä olen koostanut listan kaikista b:widget atribuuteista selityksineen:

• ID
• Pakollinen atribuutti
• Tulee olla uniikki. Pelkistä numeroista ja kirjaimista koostettu id (ei ääkkösiä)
• Käytetään esim css koodissa ulkoasua muokattaessa
• Type
• Pakollinen atribuutti
• Jokin yllä mainitusta
• Määrittää widgetin toiminnan
• Locked
• true tai false
• Vaikuttaa widgetin poistamiseen blogger asetuksissa Ulkoasu välilehdellä
• Title
• Widgetin nimi
• Voi olla mikä vain, vaikka yleensä käytetään kuvaavaa nimeä (esim Linkkilista)
•  pageType
• Määrittää millä sivuilla ko. widget näytetään
• Voi olla muotoa: all, archive, main tai item (esim. pageType:'main' näkyisi ainoastaan blogin etusivulla)
• mobile:
• true tai false
• näytetäänkö ko. widget mobiililaitteissa

Widgettien salattu sisältö

Notepad++:ssa blogimme lähdekoodissa tämä kaikki näyttää kovin siistiltä ja yksinkertaiselta. Mutta ei hätää sillä onneksi saamme tästä kaikesta huomattavasti sekavampaa ottamalla lähempään tarkasteluun bloggerin puolella blogimme lähdekoodin.  Meidän käyttämämme lyhyt header widget määritelmä muuttuu nimittäin varsinaiseksi hirviöksi 'avattuamme' sen sisällön kokonaan. (Laajenna widget-malleja) 

Oma notepad++:n puolelta löytyvä header widgetimme on lyhyt ja ytimekäs:

Bloggerista löytyvä aivan sama koodi ns. avattuna:

Pelottavaa eikö totta. Onneksi meidän ei tarvitse kajota sen suuremmalti header osion toimintaan. Vaan voimme hoitaa itsellemme merkittävät muokkaukset blogger blogin css osassa. Eli vaikuttaa ainoastaan siihen miltä kyseinen widget näyttää blogissa vierailevan henkilön silmissä. Niitä joita nyt sattuu kiinnostamaan mitä tuo ylläoleva 'hirvitys' sisältää:  

Ehtolauseiden avulla blogger määrittelee millainen blogin otsikkotyyppi on käytössä, eli näytetäänkö (asetusten mukaan) Blogin otsikon tilalla kuva, kuva otsikon takana, otsikko ja kuvaus, onko kyseessä mobiili-laite jolla selaillaan blogia jne. Perus bloggaaja asettaa vain blogin otsikkoasetuksista nämä itselleen mieluisaksi ja blogger alusta hoitaa loput. (katso alla oleva kuva).

Huomionarvoista tässä kaikessa on kuitenkin se että voisimme, jos kokisimme tarpeelliseksi, koodata myös alusta loppuun itse vastaavanlaisen blogin otsikkoalue widgetin. Eli jos sinulla on yhtäkkiä pakottava tarve saada bloggerin otsikkoalueen toiminta muutettua erilaiseksi kannattaa kysyä neuvoa, saatan jopa jotain osata kertoa asiaan liittyen.

Loppusanat

Tässä oli ensimmäinen pintaraapaisu widgettien ihmeelliseen elämään blogger blogeissa. Kommenteista olen voinut lukea että niitä ei ole, eli siitä voidaan vetää kaksi hyvin erilaista johtopäätöstä: Joko artikkelisarjani blogger teeman luomisesta on tähän asti ollut niin täydellinen että kysymyksiä ei vielä ole herännyt tai sitten aihe ns. ampuu yli hilseen ja kysyjä ei tiedä mistä aloittaa.

Kaikesta huolimatta niille jotka ovat onnistuneet vielä toistaiseksi seuraamaan tätä artikkelisarjaa: Seuraavassa osassa tutustumme widgettien maailmaan vielä hieman lisää. Mukavaa eikö totta?