Blogin ulkoasun muokkaaminen: kiinnitä välilehdet sivun yläreunaan

Ainakin muutaman lukijan toiveena on ollut ohje siihen, miten yleensä tuolla blogin bannerin alla majailevan välilehdet-osion saisi pysymään näkyvissä, vaikka sivua skrollailisi alaspäin. Eli siis lyhyesti sanottuna, välilehdet pysyvät sivun yläreunassa, kun blogia selaa alaspäin. Banneri ei kuitenkaan jää näkyviin samalla tavalla. No, nyt olisi ohjetta siihenkin tarjolla. Kävin aika monta ohjetta lävitse ja tämä toimi moitteettomasti siinä yleisimmässä eli Bloggerin Simple-teemassa.

Muutama huomio ennen ohjeeseen ryntäämistä:

1. Ota varmuuskopio. Nyt tai ei koskaan!

2. Oletko ihan varma, että haluat välilehtien seuraavan lukijaa, kuin hai laivaa? Jos innostuit vain tästä uudesta ominaisuudesta, jonka voisit saada blogiin, niin kiva juttu, mutta mieti vielä seuraavat jutut läpi: onko välilehdissä lukijan kannalta oleellista tietoa? Jos hän on blogisi alalaidassa ja välilehdissä on sellaista tietoa, kuin Facebook, Blogilista, Bloglovin ym., niin onko niistä jotain hyötyä lukijalle siinä vaiheessa vai onko niiden jatkuva esittely enemmänkin rasittavaa? Ehkä enemmänkin lukukokemusta parantavat välilehdet olisivat paikallaan: esimerkiksi ainakin eri tageilla varustettuihin postauksiin vievät välilehdet, joiden tekemistä harjoiteltiin tässä jutussa. Niitä klikkaamalla lukija voi jatkaa lukemista helposti, eikä ainakaan harhaudu pois blogistasi.

3. Aikaisemmat koodailusi ja/tai blogisi teema saattavat vaikuttaa koodin toimivuuteen ja muutoinkin lähde liikkeelle omalla vastuulla - ja ota se varmuuskopio. Mutta joka tapauksessa tämä on hyvin easy peasy juttu.

Tässä kuvia malliksi, jos mietit, miltä touhu näyttää livenä. Mallina meillä tällä kertaa toimii ihastuttava testiblogini:

Tässä kaikki normaalisti.

Tässä ne pysyvät yläreunassa, vaikka etusivulla ollaan jo skrollailtu puoleen väliin.

Ja sama postauksessa. Sieltä ne tulee!

Jos sinulla ei ole välilehtiä mutta ne alkoivat nyt juuri houkutella, saat ne itsellesi tällä ohjeella.

Ja sitten ohjeeseen:

1. Suuntaa blogisi HTML-koodiin reittiä Malli -> Muokkaa HTML-koodia. Etsi yläreunasta Siirry widgettiin.

2. Sitten etsi välilehtiwidgettisi oikea nimi. Se löytyy helposti klikkaamalla widgetin nimeä ja hyppäät automaattisesti koodissa oikeaan kohtaan, josta löydät ID:n. Se on se nimi, jota tarvitset.

Klikkaa widgetin nimeä

Kopio tai laita muistiin ID ilman mitään '-hipsuja tms. Tässä ID on PageList1 eli sama, kuin widgetin nimikin tuossa oli.

3. Seuraavaksi etsi koodista tämä kohta:

Tuo head löytyy koko koodin alkupäästä ja tarkista, että se näyttää samalta, kuin kuvassa.

4. Kopioi seuraava koodi ja liitä se juuri tuon ympyröidyn head-kohdan yläpuolelle koodiin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function() {
    var wc_widget_top = $('#widgetinnimi').offset().top;
    var wc_sticky_widgets = function(){
        var wc_current_top = $(window).scrollTop(); 
            
        if (wc_current_top > wc_widget_top) { 
          $('#widgetinnimi').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widgetinnimi').css({ 'position': 'relative' }); 
        }   
    };
    wc_sticky_widgets();
      $(window).scroll(function() {
         wc_sticky_widgets();
    });

});</script>

Koodin pitäisi näyttää suunnilleen tältä nyt:

5. Korvaa kaikki koodissa olevat kolme kohtaa, joissa lukee widgetinnimi välilehtiwidgettisi ID:llä. Tallenna ja kokeile, että toimii!

Välilehtien ulkoasua kannaattaa muokkailla hieman, koska se mikä näyttää normaalitilassa hyvältä, ei ehkä toimikaan tämän ominaisuuden kanssa nätisti. Esimerkiksi läpinäkyvä tausta välilehdissä on tässä tapauksessa hullunkurinen. Muokkaukseenhan pääsit Malli -> Mukauta -> Lisäasetukset. Ja jos ja kun sinulla on sivupalkissa tavaraa, välilehtipalkki osaa ajaa niiden yli alaspäin mentäessä, joten no worries.