Julkaistu: 28. helmikuuta 2025
Lukuaika: 21 minuuttia

Millainen on toiminnallisesti hyvä blogi - Omat top 10 -muokkaukseni

Kukaan ei ole seppä syntyessään ja kaikkien uusien asioiden opettelu lähtee nollasta. Niin on myös blogin pitämisen kohdalla. Joillakin se vain luonnistuu paremmin kuin toisilla. Itse tekemällä ja omista virheistä oppimalla kartuttaa ehkä parhaiten osaamistaan. Kirjoista ja muiden ajatuksista on myös hyvä ammentaa lisää viisautta. Asioita kannattaa kyseenalaistaa, mutta jos joku on niin sanotusti jo keksinyt pyörän, niin turha sitä on keksiä uudestaan. Siinä vain heittää omaa aikaansa hukkaan. Aloitin blogin pitämisen vuoden 2014 alussa ja reilun vuosikymmenen kokemuksella ajattelinkin nyt jakaa muutamia vinkkejä mielestäni hienompaan ja toimivampaan nettisivuun. Nämä ovat tietenkin osittain makuasioita, mutta silti tosiasioita ei voi kieltää. Esimerkiksi autossa pitää olla voimanlähde ja renkaat. Sama logiikka toimii blogien suhteen. Tietyt asiat vain pitäisi olla käytössä. Yritän perustella näkemystäni jokaisen väittämän kohdalla, mutta saat toki olla eri mieltä. Minkälainen on toiminnallisesti hyvä blogi ja miten olen muokannut omaani? Pölli tästä, jos siltä tuntuu :) Tai pikemminkin kannustan, että teet näin...


Tämän artikkelin sisällysluettelo. Linkkiä klikkaamalla pääset suoraan tekstiin. Tämä artikkeli on julkaistu 15.5.2016 ja nyt päivitetty suurelta osin esimerkiksi AI:llä tehdyn blogiarkiston ja lukuaikalaskurin osalta. Myös kommentti-widgettiä ja Google -kääntäjää parannettu tekoälyn avulla. Lisäksi tekstin lukukokemusta parannettu ja lisätty sisällysluettelo ja selkeitä kuvia.

Mistä oikein puhutaan?


Nyt ei siis puhuta siitä, mikä tekee blogista hyvän sisällöllisesti saati kirjoitustyylin kautta. Visuaalisuuden, selkeyden, hyvän kielen tai jutuista välittyvän kirjoittajan intohimon sijaan nyt puhutaan enemmänkin toiminnallisuudesta. Vaikka kirjoitin tämän jutun jo vuonna 2014, niin vieläkin törmää blogeihin, joissa sivuston käytettävyys on vähän rampa. Vähän kuin lukisi hyvää kirjaa, mutta uutta sivua ei oikein pystykään kääntämään. Jollain sivustolla saattaa olla vaikkapa yli 100 kpl tekstejä. Miten lukijan on tarkoitus navigoida ja löytää itselleen mielenkiintoiset jutut sivustolta? Artikkeleja ei ole jaettu järkevästi eri kategorioihin, saati tagipilveä ei löydy. Jo ihan yksinkertainen hakukenttäkin puuttuu. Tai ehkä sellainen on, mutta piilotettu vain niin hyvin, että se ei osu silmään. Vaikka jutut olisivat miten rautaisia tahansa, niin vanhoja saati suosituimpia juttuja ei vain oikein pysty lukemaan, koska blogiarkistoa ei ole. Jos lukijalla ei ole helppoa tapaa blogissa navigoimiseen, niin ei hän siellä kauaa viivy.

Esimerkkikuva pienestä osasta siitä, mitä blogista olisi mielestäni hyvä löytyä.


Melkein sydäntä särkeväksi asiassa tekee se, että kaikki nämä asiat on melko yksinkerttaista saada blogiin muutaman kikan tietämällä tai jo Bloggerissa olemassa olevan widgetin vain asentamalla. Homma ei vaadi juurikaan taitoa tai vaivaa. Kirjastakin löytyy perinteisesti sivunumerot, hakemisto, sisällysluettelo, luvut ja kansilehdet. Eikö blogissakin kuuluisi olla tietyt perusasiat? Miksi blogi muka olisi jotenkin poikkeus? Tietysti jos et kaipaa lukijoita blogiisi ja nekin vähät sinne eksyvät haluat karkottaa mahdollisimman nopeasti, niin omapa on asiasi. Muille suosittelen listan läpikäyntiä. Olen pyrkinyt koostamaan listan suurin piirtein tärkeysjärjestykseen, mutta lopustakin löytyvät asiat ovat tärkeitä ja niitä on jo vaikea laittaa tärkeysjärjestykseen.


1. Kirjoitusta kuvaava otsikko


Mikään ei ärsytä itseäni niin suunnattomasti kuin huonosti valittu otsikko. Esimerkiksi "Ajatuksia"- tai "Arki"- otsikot nostavat ärsytyksen tappiin. Tällaisten otsikon takaa voi löytyä ihan mitä tahansa sijoittamisesta liikuntaan tai vaikka kukkien kasteluun. Valitse nyt hyvä ihminen kirjoituksellesi mahdollisimman kuvaava otsikko. Jos otsikko ei tunnu lukijasta kiinnostavalta, niin miksi hän jatkaisi lukemistaan yhtään sitä pidemmälle. 

Ei saa myöskään sortua klikkiotsikkoon, eli harhaanjohtavaan ja liioittelevaan otsikkoon, jolla on tarkoitus herätellä tunteita ja kalastella lukijoiden uteliaisuutta. Esimerkiksi "Rajua ryyppäämistä ja villiä seksiä - tästä on kyse". Sitten kun avaat linkin, sen takaa paljastuu ihan turhanpäiväinen pilipalijuttu, jossa totuuttakin on korkeintaan toinen puoli. Jutun pitää kuitenkin vastata itse otsikkoon. Lukijan aika on arvokasta. Huonolla otsikolla ammut itseäsi jalkaan. Mitä kuvaavampi otsikko, sitä paremmin sillä sijoittaudut Googlen hakutuloksissa. Ei ole mitenkään sattumaa, että oma blogini on monella niche-kategorialla hakujen top 3 -sarjassa.



2. Hyvä kuva ja lyhyt esittelykappale


Äskeiseen liittyen. Jos otsikon pitää kuvata kirjoitusta, niin myös kuvan pitää liittyä aiheeseen. Yllä olevassa kappaleessa olenkin jo perustellut tätä otsikon osalta ja samat perustelut pätevät tietenkin myös kuvaan. En pysty ymmärtämään sitä, että jos kirjoittaa esimerkiksi Pokemonista, artikkelin kansikuvasta ei löydy mitään Pokemoniin liittyvää, tai että joku käyttää vielä tekoälyn (lukusuositus: AI ja Tekoäly - Miten minä näen ja käytän tekoälyä) aikakaudella 90-luvulla suosittuja "clipart" leikekuvia. Alla mielestäni hyvä esimerkki hyvin aiheeseen liittyvästä kuvasta ja otsikosta. 


Esimerkki aiheeseen liittyvästä kuvasta, otsikosta ja itse esittelykappaleesta. 

Yllä olevassa kuvassa on myös erinomainen ja lyhyt esittelykappale, jonka soisi löytyvän jokaisen artikkelin alusta. Oletuksena Blogger näyttää artikkelisi kokonaisuutenaan. Pitkät tekstit kasvattavat kuitenkin syötesivun pituutta ja jos näitä näytetään vieläpä monta peräkanaa, niin se ei ole kovin käyttäjäystävällistä tyylikkyydestä nyt puhumattakaan. Kukaan ei silloin jaksa skrollata kilometrin pituista sivumassaa, saati saa selkeää kuvaa tarjolla olevista uusista artikkeleista.

Ratkaisu on käyttää "Lisää väli"-nappulaa (englanniksi read more/jump break), joka löytyy Bloggerilla tekstiä kirjoittaessa suoraan ja helposti työkalupalkista (nykyisin nimellä pakotettu tekstinpiilotus). Vain lyhyen tekstikappaleen ja siihen sopivan kuvan näyttäminen Bloggerissa on vähän kuin lyhyen tiivistelmän esittäminen blogissasi. Sitä silmäilemällä lukija voi päättää, kiinnostaako häntä lukea tätä pidemmälle. Ei se tietenkään vastaa kunnon tiivistelmää, mutta jos aloitat artikkelin kertomalla mitä aiot käsitellä ja jonkinlaisella esipuheella, niin aika lähellä ollaan.

Oletuksena Bloggerin "tiivistelmän" alle tulee "Read More"-linkki, jota klikkaamalla koko juttu aukeaa. Tämän voi kuitenkin muuttaa suomeksi seuraavasti: Ulkoasu ja sieltä Gadget:Blogitekstit. Tätä muokkaamalla avautuu "Määritä blogitekstit" -ikkuna ja sieltä muutetaan viestisivun linkkitekstiin esimerkiksi (omassa blogissani): LUE KOKO ARTIKKELI klikkaamalla tästä.



3. Hakukenttä ja google translator


Tämän perusasian olemassaolon luulisi olevan niin itsestään selvää, että ihmetyttää sen puuttuminen niin monesta blogista. Miten ulkomaalainen suomea ymmärtämätön voi navigoida saati lukea blogiasi helposti ilman Googlen kääntäjää? Tai miten muuten selvität suosikkiblogistasi esimerkiksi, missä yhteydessä siinä on kirjoitettu vaikkapa lottoamisesta? 

Vajaat 300 artikkelia sivustolleni kirjoittaneena joudun jo itsekin käyttämään hakukenttää, jos haluan löytää blogini artikkeleista jotain tiettyä tietoa enkä tarkasti muista mistä artikkelista se löytyykään. Muistin varassa asioiden löytäminen ei vain aina toimi. Joskus aikaisemmin Googlen oma blogihaku gadgetti ei toiminut ja käytin jotain ulkopuolista viritelmää. Vaikka sen ulkoasu olikin erittäin miellyttävä, niin sen toiminnassa/hakusanojen löytämisessä oli toivomisen varaa. Googlen oma blogihaku on tässä nyt kuitenkin jo paljon parempi. Molemmat hakukenttä ja translator löytyvät helposti Bloggerin widgeteistä, kohdasta "Ulkoasu" ja Lisää gadget.

Avautuva Google Translator vaakamallisena. Tässä näkyy vain puolet vaihtoehdoista, jotka jatkuvat oikealle. Löydätkö tästä sillisalaatista manuaalisesta haluamasi kielen.


Translatorista pitää kuitenkin mainita, että käytännössä se toimii vain pystymallisena. Tällöin siitä pystyy helposti etsimään esimerkiksi kielistä englanti, ruotsi, norja yms vaikkapa kirjoittamalla ensimmäisen alkukirjaimen. Vaakamallisena kaikki käännösvaihtoehdot (noin 100 kpl) ovat hirveää sillisalaattia, eikä mitään löydä tai voi hakea järkevästi. Pystymallisena itse jouduin vähän säätämään widgetin html-koodia, koska sen leveys ei sopinut omaan asetteluuni (oman sivustoni vasen reuna max leveys 210 pikseliä). Tämä kannattaa tehdä CSS:n sijaan inline-tyylillä, jotta muutokset eivät vuoda muihin osiin sivustoa.

Translate-widgetin koodi (inline-tyyleillä):

<b:widget id='Translate1' locked='false' title='Translate' type='Translate'>
  <b:widget-settings>
    <b:widget-setting name='displayMode'>VERTICAL</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div id='google_translate_element' style="transform: scale(0.9); transform-origin: left top; width: 210px; overflow: hidden;"/>
    <script>
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({
          pageLanguage: 'fi', // Vaihda tämä sivustosi kieleksi
          autoDisplay: 'true',
          layout: google.translate.TranslateElement.InlineLayout.VERTICAL
        }, 'google_translate_element');
      }
    </script>
    <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>


4. Kategoriat ja yksityiskohtaisempi tagipilvi


Olen listannut blogini yläpalkkiin eri kategorioita muun muassa säästämiseen, harrastamiseen ja blogin tekoon liittyen. Jos uusi tai vaikkapa vanhakin lukija haluaa tutustua vain tiettyyn kategoriaan, esimerkiksi blogin ylläpitoon, niin miksi pakottaa hänet lukemaan muuta? Kategoriat ryhmittelevät ja kokoavat tietyn aihealueen jutut hyvin yhteen. Näiden Yläkategorioiden teosta Bloggeriin olen kirjoittanut aivan oman juttuni

Yksityiskohtaisempi tagipilvi täydentää hyvin kategorioita. Jos on kiinnostunut harrastuksista ja urheilusta, mutta haluaa lukea niistä vain fatbikeen liittyvät jutut, niin tagipilvi (avainsanapilvi), josta sana fatbike löytyy on tässä ihan ehdoton. Tagipilvi on kuitenkin vain niin hyvä, kuin siihen käytetty aika ja vaiva. Ehkä tästä syystä tagipilven käyttöä ei näe niin usein. Artikkelia kirjoittaessa pitää tarkkaan miettiä, mitä hyödyllisiä avainsanoja siinä kannattaa käyttää. Jos olet kirjoittanut 300 tekstiä rahaan liittyen, ei 120 kertaa jo mainittu säästäminen ehkä ole se paras tunniste. Yritä pureutua syvemmälle ja tarkemmin.

Jos et tekstistä ymmärtänyt mikä on tagipilvi, niin se on tuo oikeassa reunassa oleva avainsanapilvi.

Kokemuksesta voin sanoa, että tagipilven käyttäminen heti alusta asti on hyödyllistä ja järkevän meta-tiedon lisääminen jälkikäteen on tuskallista touhua. Tagipilvi on Boggerin oma gadgetti. Tagipilvi on omasta mielestäni myös todella informatiivinen, koska sen tunnisteiden koko kasvaa sitä isommaksi, mitä useammin sama tunniste blogissa esiintyy. Jos olet kirjoittanut esimerkiksi opintolainasta vain yhden jutun, on se tagipilvessä vaikkapa fonttikoolla 7. Jos olet puolestaan kirjoittanut vaikkapa melonnasta 8 juttua, on fonttikoko jo 14. Tagipilvi on mielestäni yksi yksinkertaisimmista, mutta samalla informatiivisimmista lisäosista mitä blogiin voi lisätä. 

Jos avainsanapilvesi on yhtä iso ja vaihtelevan kokoisilla fonteilla kuin omani, niin sitten olet tehnyt jotain oikein. Tagipilvi pitää myös ehdottomasti laittaa aakkosjärjestykseen, jotta sieltä pystyy myös etsimään jotain kiinnostavaa. Mikään ei ole niin turhauttavaa, kuin etsiä random-sanojen joukosta jotain mielenkiintoista. Vähän kuin penkoisi roskakoria.


5. Suosituimmat tekstit ja sisäinen suosittelu


Ensivaikutelma syntyy nopeasti. Näytä mitä osaat parhaiten tai ainakin mistä lukijasi tykkäävät eniten. Miksi lukisin turhanpäiväistä, jos olet kirjoittanut jotain mielenkiintoista? Turha sitä on piilotella ja pantata, kadotat vain lukijat. Suosituimmat tekstit on Bloggerin oma ja löytyy tietenkin "Ulkoasu" ja Lisää gadget -kohdasta. Omassa blogissani tämä "suosituimmat tekstit" -toiminnallisuus on aivan sivuston alareunassa viime viikon, viime kuun ja koko ajan osalta. Suosituimmat tekstit löytyy myös vähän pidempänä versiona blogini oikeasta reunasta, koska aika harva varmaan jaksaa tuonne sivuston alareunaan asti kahlata.


Blogini alareunasta löytyvät suosituimmat jutut viime viikolta/kuukaudelta ja koko ajalta.


Tähän samaan aiheeseen liittyy myös sisäinen suosittelu. Termi on vähän kökkö, mutta tällä tarkoitetaan samanlaisten tekstisuositusten tarjoamista lukijalle. Tällainen oli aikoinaan Linkwithin-palvelu, josta tuossa esipuheen kuvassakin on jäänteitä. Jos esimerkiksi luit artikkelin Melonnasta, niin "palvelu" tarjosi lisää samankaltaista sisältöä. Mikäpä sen parempi ja fiksumpi homma, kuin "kierrättää" lukijaa blogissa. Kun yksi hyvä juttu on luettu, niin tilalle tarjotaan toinen yhtä hyvä aihealueeseen sopiva kirjoitus. Parhaimmillaan lukija voi jäädä lukemaan juttujasi koko päiväksi. 

Valitettavasti itselläni on vielä tämä projekti kesken, joten valmista koodia ja prosessia tähän ei vielä ole tarjolla :(



6. Uusimmat kommentit


Bloggaamisessa parasta on loppujen lopuksi kommentit. Välillä tulee roskapostia, välillä kiitosta ja useimmiten sellaista mitäänsanomatonta kommentointia. Joskus mukaan mahtuu kuitenkin todellisia helmiä. Muistan parikin tapausta, jossa kommenttien kautta opin enemmän ja sain uutta näkökulmaa aiheeseen, kuin itse artikkelia kirjoittaessa. Miksi et siis näyttäisi uusia kommentteja blogissasi widgetin muodossa? Ehkä syynä on se, että sitä ei saa helposti widgettinä. Kiitos AI ja DeepSeek tämäkin on nyt mahdollista. 

Lisäät vain Bloggerin Ulkoasusta HTML/JavaScript-gadget ja kopioit alla olevan koodin. Koodi hakee blogin viimeisimmät kommentit (10 kpl) ja näyttää ne tiiviissä muodossa allekkain, mukaan lukien kommentoijan nimi, kommentin sisältö (145 merkkiä), linkki artikkeliin, johon kommentti liittyy, sekä kommentin päivämäärä. Koodi käyttää dynaamisia API-kutsuja,  jotka sopeutuvat automaattisesti blogin nimeen tai osoitteeseen. Mitään muutoksia ei siis tarvitse tehdä, jotta koodi toimisi.


<style type="text/css">
.rc {
  margin-left: 0px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dotted;
}
.rc-header a {
  color: #045FB4;
  text-decoration: none;
}
.rc-body {
  font-style: italic;
  font-size: 12px;
  color: #444444;
}
.rc-footer {
  font-size: 12px;
  color: #777;
  margin-top: 5px;
}
</style>

<script type="text/javascript">
var numRecentComments = 10;
var maxCommentChars = 145;
var txtWrote = '[user] kommentoi juttua: <a href="[href]"><b>[title]</b></a>'; // Otsikko linkkinä
var maxPostTitleChars = 50;
var urlToTitle = {};

// Päivämäärän muotoilufunktio
function formatDate(date) {
  var day = ("0" + date.getDate()).slice(-2);
  var month = ("0" + (date.getMonth() + 1)).slice(-2);
  var year = date.getFullYear();
  return day + "." + month + "." + year;
}

// Hakee artikkelien URL-osoitteet ja otsikot
function getPostUrlsForComments(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        urlToTitle[entry.link[k].href] = entry.title.$t;
        break;
      }
    }
  }
}

// Näyttää viimeisimmät kommentit
function showRecentComments(json) {
  var j = 0;
  for (var i = 0; j < numRecentComments && i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (entry.author[0].name.$t == "Blogger User") continue;

    if (entry["thr$in-reply-to"]) {
      j++;
      var href = '';
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          href = entry.link[k].href;
          break;
        }
      }
      if (href == '') { j--; continue; }

      var hrefPost = href.split("?")[0];
      var comment = entry.content ? entry.content.$t : entry.summary.$t;
      comment = comment.replace(/<br[^>]*>/ig, " ").replace(/<\S[^>]*>/g, "");

      var postTitle = urlToTitle[hrefPost] || hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "").replace(/-/g, " ");
      postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
      if (maxPostTitleChars && postTitle.length > maxPostTitleChars) {
        postTitle = postTitle.substring(0, maxPostTitleChars).replace(/\s\S*$/, "...");
      }

      var authorName = entry.author[0].name.$t;
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      var formattedDate = formatDate(cmtDate);

      // Otsikko linkkinä
      var txtHeader = txtWrote
        .replace('[user]', authorName)
        .replace('[href]', href)
        .replace('[title]', postTitle);

      document.write('<div class="rc">');
      document.write('<div class="rc-header">' + txtHeader + '</div>');
      if (comment.length < maxCommentChars) {
        document.write('<div class="rc-body">' + comment + '</div>');
      } else {
        comment = comment.substring(0, maxCommentChars).replace(/\s\S*$/, "");
        document.write('<div class="rc-body">' + comment + '...</div>');
      }
      document.write('<div class="rc-footer">Päivämäärä: ' + formattedDate + '</div>');
      document.write('<div style="clear:both;"></div></div>');
    }
  }
}

// Haetaan artikkelien otsikot ja kommentit
document.write('<script type="text/javascript" src="//' + window.location.hostname + '/feeds/posts/summary?redirect=false&alt=json-in-script&callback=getPostUrlsForComments"></' + 'script>');
document.write('<script type="text/javascript" src="//' + window.location.hostname + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=showRecentComments"></' + 'script>');
</script>


 

7. Artikkelin lukuaika-laskuri ja sisällysluettelo


Kuinka monta kertaa olet törmännyt mielenkiintoiseen artikkeliin, mutta pähkäilet kuinkahan paljon aikaa tämän lukemiseen menee? Vierität sivua alaspäin ja huomaat sen olevan suhteellisen pitkä. 15 minuutin päästä pitäisi lähteä bussilla töihin, joten et jaksa paneutua sinällään mielenkiintoiseen artikkeliin. Myöhemmin kotiin tullessa olet tietenkin unohtanut koko jutun, tai keksinyt vieläkin parempaa tekemistä. Koko juttu jää siis lukematta siksi, että et tiennyt sen viemää aikaa. Tuttua eikö? Surullista sekä artikkelin kirjoittajan että potentiaalisen lukijan kannalta, joka voisi oppia jotain uutta. Ratkaisu? Eikö ongelmaan kannattaisi käyttää laskuria, joka kertoo tarvittavan lukuajan?




Laskurin tavoitteena on näyttää lukuaika (kellon kuva ja teksti: "Lukuaika:xx minuuttia") heti julkaisupäivämäärän vieressä juuri ennen artikkelin otsikkoa. Lukuaikalaskuri laskee lukuajan tuloksen artikkelista löytyvien sanojen ja kuvien perusteella. Oletus on 200 sanaa minuutissa ja kuvista 5 sekuntia lisäaikaa. Näitä voi tietenkin halutessaan koodista muokata. Tulos pyöristetään lähimpään minuuttiin. Kellon kuvan koodi piirtää itse ympyrästä, pisteestä ja parista viivasta. Lukuajan näyttö on ehdollinen, eli näytetään vain jos kyseessä on yksittäinen artikkeli. Lukuaikaa ei siis esimerkiksi näytetä Blogissani "Syötesivulla (uusimmat jutut)" tiivistelmissä, tai vaikkapa etusivuilla (yläkategoriat).

Miten lisätä koodi? Valitse Teema -> paina Mukauta -napin nuolta, josta Muokkaa HTML-koodia. Etsi päivämääräotsikon näyttävä koodi (Itselläni tämä on Blog1 widgetti ja koodirivillä 944), jonka sisään olen kirjoittanut tekstin: "Julkaistu". Liitä alla oleva koodi oikeaan kohtaan.

<span>Julkaistu: <data:post.dateHeader/></span>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      
      <!-- Lukuajan näyttö -->
      <meta charset='UTF-8'/>
      <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
      <style>
        /* Lukuajan ja kellon asettelu Gridillä */
        .reading-time-container {
            display: grid;
            grid-template-columns: auto auto; /* Kaksi saraketta: kello + teksti */
            justify-content: end;  /* Vie elementit oikealle */
            align-items: center;  /* Kohdistaa pystysuunnassa */
            font-size: 14px;
            margin-left: 10px; /* Väli vasemmalta reunasta */
        }

        /* Kellon ulkomuoto */
        .clock {
            width: 20px;
            height: 20px;
            border: 2px solid #333;
            border-radius: 50%;
            position: relative;
        }

        /* Kellon keskikohta */
        .center {
            width: 3px;
            height: 3px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Tuntiviisari (4:00 vastaa 120 astetta) */
        .hour {
            width: 2px;
            height: 8px;
            background-color: #333;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: bottom center;
            transform: translate(-50%, -100%) rotate(120deg);
        }

        /* Minuuttiviisari (12:00 eli 0 astetta) */
        .minute {
            width: 2px;
            height: 10px;
            background-color: #333;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: bottom center;
            transform: translate(-50%, -100%) rotate(0deg);
        }

        /* Lukuajan teksti */
        .time-text {
            font-size: 18px;
            color: black;
            margin-left: 10px; /* Väli kellon ja tekstin välillä */
        }
      </style>

      <div class='reading-time-container'>
          <!-- Kellon piirto -->
          <div class='clock'>
              <div class='center'/> <!-- Keskikohta -->
              <div class='hour'/>   <!-- Tuntiviisari -->
              <div class='minute'/> <!-- Minuuttiviisari -->
          </div>
          <div class='time-text'>Lukuaika: <span id='reading-time-text'>xx</span> minuuttia</div>
      </div>
      <script>
        document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
            function calculateReadingTime() {
                // Oletetaan artikkelin sanamäärä ja kuvat
                const wordsPerMinute = 200;
                const secondsPerImage = 5;

                // Haetaan artikkelin teksti
                const articleText = document.querySelector(&#39;.post-body&#39;).innerText || document.querySelector(&#39;.post-body&#39;).textContent;
                const wordCount = articleText.split(/\s+/).length;
                const imageCount = document.querySelectorAll(&#39;.post-body img&#39;).length;

                // Lasketaan lukuajan minuutteina
                let readingTimeInSeconds = (wordCount / wordsPerMinute) * 60 + (imageCount * secondsPerImage);

                // Pyöristetään lukuajan lähimpään minuuttiin
                const readingTimeInMinutes = Math.round(readingTimeInSeconds / 60);

                // Päivitetään lukuajan teksti
                document.getElementById(&#39;reading-time-text&#39;).innerText = readingTimeInMinutes;
            }

            // Lasketaan lukuajan heti, kun sivu on ladattu
            calculateReadingTime();
        });
      </script>
    </b:if>
  </h2>
</b:if>
        <!-- Lisähuomion CSS-säännöt koska lukuaika vaikuttaa bloggerin otsikkoon -->
<style>
  /* Korjaus päivämäärän otsikkoon */
  h2.date-header {
      font-size: 16px !important; /* Aseta haluamasi koko */
  }

  /* Korjaus postauksen otsikkoon */
  h3.post-title, h1.post-title {
      font-size: 21px !important; /* Aseta haluamasi koko */
  }
</style>



Sisällysluettelo


Pisin kirjoittamani blogiartikkeli taitaa olla: Muoviroskan erilliskeräys - Onko muovin kierrätys oikeasti järkevää? Sen lukemiseen alusta loppuun menee lukuaikalaskurin mukaan 20 minuuttia. Jos juttua ei jaksa lukea alusta loppuun, niin miten voisi helpottaa kirjoituksen jäsentelyä ja kiinnostavan tiedon löytämistä? Kirjoissa käytetään sisällysluetteloa, joten miksi sitä ei kannattaisi soveltaa myös blogiin? Karsastan termiä sisäinen linkitys, tai ankkurointi joten käytän termiä sisällysluettelo. Sehän tämä oikeasti onkin. Selkeää otsikkoa klikkaamalla pääsee suoraan itse käsiteltävään asiaan. Kuinka näppärää.


Jostain syystä en ole sisällysluetteloa blogeissa nähnyt. En edes pitkissä jutuissa, mikä on vähän kummaa? En sitä itsekään kovin usein käytä, koska sen teko tuo lisää vaivaa ja lyhyissä jutuissa se ei tuo lisäarvoa. Ideaalimaailmassa Bloggerissa olisi nappi, jolla sisällysluettelo generoitaisiin automaattisesti otsikkotyylejä käyttäen kuten vaikkapa tekstinkäsittelyohjelmissa. Pitkissä artikkeleissa sisällysluettelo toimii kuitenkin erinomaisesti. Sen alkuun on myös hyvä kirjoittaa milloin ja miten juttua on päivitetty. Samalla tavalla kuin tämän artikkelin alkuunkin on tehty. Ohjeet sisällysluettelon tekoon löytyy tästä artikkelista: Purkkaratkaisuja Bloggeriin - Vierekkäiset kuvat ja sisäinen linkitys.




8. Blogiarkisto, eli kaikki blogissa julkaistut tekstit


Jos löydät todella mielenkiintoisen sivuston, niin miksi et haluaisi tietää, mitä kaikkea blogisti on kirjoittanut? Kohdasta "Ulkoasu" ja Lisää gadget löytyy kyllä näppärä arkisto, jota voi klikkailla auki hierarkisesti kuukausittain/vuosittain. Sellainen on myös oman blogini vasemmassa sivupalkissa. Tämän blogiarkiston hierarkian ansiosta näkee helposti myös blogin iän, jos sitä miettii. Klikkaa vain auki vanhimman vuoden ja ensimmäisen artikkelin. 

Tässä Bloggerin virallisessa arkistossa on kuitenkin puute. Se listaa teksteistä vain otsikot. Mitä jos haluaisin sivuuni sisällysluettelon, jolta löytyy kaikki blogissa julkaistut tektsit kuvan ja lyhyen kuvauksen kera? Esimerkkikuva alla. Tarkempaa tutkimusta tämän ulkoasusta ja toimivuudesta voit tehdä katsomalla omaa blogiarkistoani, eli sisällysluetteloa suoraan klikkaamalla tätä Arkistoa.

Kuvankaappaus blogini kaikkien artikkelien sisällysluettelosta, jonka olen toteuttanut ChatGPT 4:n avulla.


Raadollisesti voisi sanoa, että kaikki se työ artikkelien muodossa on hukkaan heitettyä aikaa, koska niitä ei periaatteessa löydä mistään ilman kunnollista sisällysluetteloa. En syytä ketään, koska Googlen Blogger on tehnyt tämän lähestulkoon mahdottomaksi. Tällaista widgettiä ei vain löydy ja vaatii jo aikamoista taitoa ja kikkailua, että sellaisen saa tehtyä. Onneksi meillä on tekoäly.

Alla olevan koodin voi liittää suoraan Bloggerin artikkelisivulle (html-näkymä), jonne haluat sisällysluettelon. Muistat vain vaihtaa tuon blogini osoitteen '//downshiftaaminen.blogspot.com omaasi. Muista säilyttää tuo '//-alku, jotta sisällysluettelo toimii sekä http-että https-protokollalla. Tämä koodi luo sisällysluettelon, joka näyttää kaikki blogisi postaukset järjestettynä julkaisupäivämäärän mukaan. Se hakee postaukset Bloggerin JSON API:n kautta (150 postausta kerralla, odottaa 0,5 sekuntia ja uusi kierros, jotta toimii) ja näyttää ne käyttäjälle siistissä muodossa laskien ja näyttäen myös kaikkien postauksien lukumäärän.

<h3>
<span face="&quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif" style="font-size: x-large;">Sisällysluettelo - Kaikki sivustoltani löytyvät tekstit</span></h3>
<div>
<br /></div>
<br />
<html lang="fi">
<head>
  <meta charset="UTF-8"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
  <title>Bloggerin Postaukset</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .post-list {
      display: flex;
      flex-direction: column;
    }
    .post-item {
      display: flex;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      align-items: center;
      cursor: pointer; /* Lisätään kursorin muutos, että käyttäjä tietää sen olevan linkki */
      text-decoration: none; /* Poistetaan linkin oletustekstiväri ja alleviivaus */
    }
    .post-item:hover {
      background-color: #efefef; /* Vaaleampi taustaväri hover-tilassa */
    }
    .post-thumbnail {
      width: 80px;
      height: 80px;
      margin-right: 20px;
      border-radius: 5px;
      object-fit: cover;
    }
    .post-content {
      flex: 1;
    }
    .post-title {
      font-size: 1.2em;
      color: #333;
      margin: 0;
    }
    .post-date {
      font-size: 1.0em;
      color: #777;
      margin: 5px 0;
    }
    .post-excerpt {
      font-size: 0.9em;
      color: #555;
      margin-top: 5px;
    }
    .post-count {
      font-size: 1.2em;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="post-count">Postauksia yhteensä: <span id="post-count">0</span></div>
  <div class="post-list" id="post-list"></div>

  <script>
    var allPosts = [];
    var startIndex = 1;  // Aloita ensimmäisestä postauksesta
    var maxResults = 150;  // Lataa maksimissaan 150 postausta per pyyntö
    var totalPosts = 1000;  // Ladataan yhteensä 1000 postausta
    var loading = false;

    function loadPosts() {
      if (loading || startIndex > totalPosts) return;  // Estetään päällekkäiset pyynnöt

      loading = true;

      var url = '//downshiftaaminen.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent&max-results=' + maxResults + '&start-index=' + startIndex;

      var script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }

    function recent(data) {
      var posts = data.feed.entry;
      allPosts = allPosts.concat(posts);  // Lisää uudet postaukset olemassa olevaan listaan
      var postList = document.getElementById('post-list');
      var postCount = document.getElementById('post-count');

      // Päivitetään postauksien määrä reaaliaikaisesti
      postCount.textContent = allPosts.length;

      // Luodaan postauksen listan HTML
      posts.forEach(function(post) {
        var postItem = document.createElement('a');  // Tehdään postItemista linkki
        postItem.classList.add('post-item');
        postItem.href = post.link.find(function(link) {
          return link.rel === 'alternate';  // Linkki, joka vie itse postaukseen
        }).href;  // Asetetaan oikea linkki postaukseen
        postItem.target = '_blank';  // Avataan linkki uuteen välilehteen

        // Pikkukuva
        var postThumbnail = document.createElement('img');
        postThumbnail.classList.add('post-thumbnail');
        var imageUrl = (post.media$thumbnail) ? post.media$thumbnail.url : 'https://via.placeholder.com/80';  // Jos kuvaa ei ole, käytetään placeholderia
        postThumbnail.src = imageUrl;

        // Postauksen sisältö
        var postContent = document.createElement('div');
        postContent.classList.add('post-content');

        // Otsikko
        var postTitle = document.createElement('div');
        postTitle.classList.add('post-title');
        postTitle.innerHTML = post.title.$t;

        // Päivämäärä
        var postDate = document.createElement('div');
        postDate.classList.add('post-date');
        var publishedDate = new Date(post.published.$t);
        postDate.innerHTML = publishedDate.toLocaleDateString('fi-FI');

        // Lyhyt teksti (esim. 240 merkkiä)
        var postExcerpt = document.createElement('div');
        postExcerpt.classList.add('post-excerpt');
        var contentSnippet = post.content.$t.slice(0, 240) + '...';  // Rajoitetaan 240 merkkiin ja lisätään elipsi
        postExcerpt.innerHTML = contentSnippet;

        // Lisää kaikki elementit postItemiin
        postContent.appendChild(postTitle);
        postContent.appendChild(postDate);
        postContent.appendChild(postExcerpt);

        postItem.appendChild(postThumbnail);
        postItem.appendChild(postContent);

        postList.appendChild(postItem);
      });

      // Päivitetään startIndex seuraavaa pyyntöä varten
      startIndex += maxResults;

      loading = false;
    }

    function loadPostsWithDelay() {
      loadPosts();  // Lataa ensimmäiset 150 postausta

      // Asetetaan interval 0,5 sekunnin välein, jotta postaukset ladataan porrastetusti
      var interval = setInterval(function() {
        if (startIndex > totalPosts) {
          clearInterval(interval);  // Jos kaikki postaukset on ladattu, keskeytetään interval
        } else {
          loadPosts();  // Lataa seuraavat 150 postausta
        }
      }, 500);  // 500 ms = 0,5 sekuntia
    }

    // Ladataan postaukset heti, kun sivu ladataan
    loadPostsWithDelay();
  </script>

</body>
</html>


9. Blogiluettelo eli blogroll


Blogiluettelo löytyy lähes blogista kuin blogista. Ehkä sen takia, että sen löytää näppärästi suoraan widgettien joukosta ja toisaalta ihmiset ovat sosiaalisen median kautta oppineet jakamaan kaikkea. Ehkä myös yleisyys ruokkii suosiota. Jos naapurillasi on jokin suosittu juttu, niin pitäähän sinullakin olla. Muuten näytät tylsältä ja vanhanaikaiselta. 

Blogiluettelon (blogroll) avulla pystyy ohjaamaan blogisi kävijöitä myös muiden kirjoittajien blogeihin. Mikäli tuot riittävästi havaittavaa liikennettä, toisen blogin kirjoittaja yleensä havaitsee liikenteen lähteen ja toivottavasti/todennäköisesti lisää sivustosi omaan blogrolliinsa = lisää uusia lukijoita. Vastavuoroisuus siis yleensä palkitaan isompina kävijämäärinä. Mitä enemmän olet muiden blogiluettelossa ja mitä enemmän julkaiset kirjoituksia, sitä enemmän saat myös näkyvyyttä, koska uusimmat kirjoitukset nousevat aina blogrollin kärkeen. Omalla sivustollani blogrollin generoima kävijämäärä on kuitenkin suhteellisen pieni. Jos en ole julkaissut mitään uutta vähään aikaan, niin muiden blogien kautta tulee kävijöita <1%. Jos julkaisen jotain uutta ja suosittua, niin silloin muiden blogien kautta saapuu kävijöitä arviolta luokkaa 10 % koko kävijämäärästä.

 

10. Blogin kirjoittaja ja ota yhteyttä


Itse haluan yleensä tietää kasvon blogin takana. Anonyymiin kirjoittajaan on vaikeampi samaistua. Jos toivot saavasi blogisi kautta erilaisia yhteistyötarjouksia, niin luonnollisesti tiedot ylläpitäjästä pitää löytyä helposti nopealla vilkaisulla. Tästä on oikeastaan turha kiistellä. Yhteystiedot eivät tosin takaa, että saisit yhtäkään yhteistyötarjousta. Voin ainakin omasta puolestani vakuuttaa, että yhteystietojen lisäys ei nosta roskapostin määrää, jos joku sitä pelkää. Enemmän sitä tulee jo pelkistä artikkelien kommenteista.


11. Bonus: Personuidut widgetit


Lukijoille pitää tarjota aina parasta, joten tässä on sitten jotain bonusta :) Personoidut widgetit eivät ole missään nimessä pakollisia, mutta ne tuovat väriä ja tekevät sivustostasi omanlaisen. Huomaa, että liikaa widgettejä käyttämällä pahimmassa tapauksessa hidastat sivustosi toiminnallisuutta ja latausnopeutta, sekä saat sivuston näyttämään jo liian täyteen ahdetulta ja sekavalta, joten ole tarkkana. Vähemmän on yleensä enemmän.

Personoiduista widgeteistä suosikkini on ollut ihan sivustoni alalaidasta aikoinaan löytynyt Nordentin Shareville widgetti, jolla pystyin seuraamaan osakesalkkuni Top 5 omistuksia ja niiden kehitystä reaaliajassa. Valitettavasti Nordnet on lopettanut sen toiminnan. Tällä hetkellä tähän kategoriaan on listata vain Mietteitäni Twitterissä -feedi, johon tulee silloin tällöin jotain höpistyä. Jos käytät Twitteriä, niin tässä on vielä pakko mainita Twitter-korteista Bloggeriin ja näin lopuksi yleisesti pakollisen evästeilmoituksen muokkauksesta.

Näin tekoälyn aikakaudella lähes kaikki on kuitenkin mahdollista. Mitä lukijat haluaisivat sivustoltani löytyvän widgetin muodossa? Jos lukijoita kiinnostaa tekoälyn käyttö (ChatGPT 4, DeepSeek ja Grok 3) enemmän, niin olen kirjoittanut tästä artikkelin: AI ja Tekoäly - Miten minä näen ja käytän tekoälyä.



Siinäpä ne. Toivottavasti näistä vinkeistä oli jollekin apua ja parempi toiminnallisuus tuo myös lisää kävijöitä.



(Alkuperäinen artikkeli julkaistu 15.5.2016 ja nyt päivitetty)

13 kommenttia:

  1. Paljon hyviä vinkkejä! Kohdassa viisi esittelemäsi skripti kuitenkin hotlinkkaa suoraan mvnet.fi:n palvelimelta löytyvään tiedostoon. Jos ovat antaneet linkkaamiseen luvan niin hyvä, mutta muutoin kopioiminen on varsin epäkohteliasta ja pahimmillaan vaarallista: Ei ole mitään takeita että tuo skripti löytyisi jatkossakin heidän palvelimeltaan tuosta osoitteesta ja periaatteessa linkkausta voitaisiin käyttää hyväksi vaikka blogin kaappaamiseen tai haittaohjelmien jakamiseen.

    T. Ikiholdaaja

    VastaaPoista
    Vastaukset
    1. Kiva että tykkäät. En ole tietokone-expertti, enkä tietoturva-asiantuntija, mutta vastaan mihin pystyn. Skripti on alun perin joltain amerikkalaiselta sivustolta, jota en enää kuollaksenikaan muista. Skriptin toiminta kuitenkin lakkasi (niin kuin uhkakuvissa kerroit), kun palvelimen toimintakin lakkasi. Sen jälkeen skripti siirtyi vähän muutettuna MVnetin palvelimille. Linkkaamiseen on lupa ja MVnet on tällä hetkellä ollut toiminnassa noin 15 vuotta ja todennäköisesti on vielä pitkään pystyssä tästäkin eteenpäin. Netissä tietysti jokainen toimii omalla vastuullaan ja varovaisuus on aina järkevää, mihin hyvin viittasit.

      Poista
  2. Kiitos hyvistä vinkeistä! Täytyi heti testata yhtä.

    VastaaPoista
  3. Kiitos vinkeistä! Ihan omaa laiskuutta on noita jäänyt tekemättä. Tänään lisäsin blogiin arkiston, en vaan tykkää siitä bloggerin versiosta niin piti säätää itse.

    VastaaPoista
  4. Kiitos mielenkiintoisista vinkeistä! Itse tyydyn mummoimmeisenä Bloggerin valmiisiin widgeteihin.😊 Totta on ettei jaksa lukea kilometrin pituista postausta tai katsoa monta sataa kuvaa. Jostain joskus luin että hyvä postaus on lyhyt ja sisältää 3-4 kuvaa että latautuvat hyvin. No, koneet varmaankin noista ajoista parantuneet 😂

    VastaaPoista
    Vastaukset
    1. Jokainen tehköön blogista oman näköisensä. En tiedä ilmaisinko tätä suoraan, mutta artikkelin kirjoittaminen kumpusi oikeastaan kahdesta asiasta: turhautumisesta ja voimaantumisesta.

      En ymmärrä miksi ihmiset tieten tahtoen haluavat "sabotoida" omia blogejaan. Sinunkin blogiasi vilkaisin, mutta jätin lukematta, kun etusivu on jo kilometrin mittainen. Olisin halunnut katsoa suosituimmat juttusi ja katsoa mitä ihmiset ovat kommentoineet. No ei löydy, joten vedin johtopäätöksen, että tuhlaan vain aikaani.

      Itse en tiedä juuri mitään koodamisesta/HTML-kielestä. Ennen AI:n tuloa muiden kuin Bloggerin valmiiden widgettien teko toimi seuraavasti: Joko piti osata koodata tai jos ei osannut, piti Googlettaa josko jostain löytyisi muokattu koodi tarkoitukseen. 99 kertaa sadasta ei löytynyt ja homma piti jättää tekemättä, tai tyytyä johonkin olemassa olevaan, mutta todella rampaan toteutukseen :( Nyt kerrot vain AI:lle mitä tehdä ja iteroit tästä eteenpäin toimivan widgetin. Käytännössä lähes mitä tahansa voi tehdä ja tämän takia tuntee itsensä supermieheksi. Vielä kun postasin valmiit kooditkin artikkeliin, niin mummous kuulostaa kyllä tekosyyltä...

      Poista
  5. Kiitos palautteesta 😂 tajusin muuten itse kun luin jälkeenpäin kirjoittaneeni tuosta ettei jaksa lukea kilometrin pituisia postauksia niin minullahan itsellä oli sitten sellainen. Tietenkin jokainen tekee omannäköistä blogia. Kiitän edelleenkin vinkeistäsi ja piiloudun mummouden taakse. Eikö etusivultani löytynyt muka suosituimpia tekstejä tai kommentteja? No kuitenkin, jatketaan bloggailua, joko tekoälyllä tai omalla älyllä. Toivottavasti turhautumisesi helpottaa.Mukavaa maaliskuuta! T, Mummo!

    VastaaPoista
    Vastaukset
    1. Olihan siellä suosituimmat tekstit, mutta aivan lopussa. Jos saa sanoa suoraan, niin toiminnallisuus on aivan kamala. Tässä widgetissä on vain 3 kpl tekstejä ja koko juttu on jollain tapaa hajonnut. Se ei edes käytä hyödyksi koko oikean reunan leveyttä, vaan on jotenkin kutistuneen näköinen. Tekee ihan pahaa katsoa...

      Kommentteja on toki itse postauksissa, mutta sellaista widgettiä, joka näyttäisi viimeisimmät kommentit yhdellä kertaa ei ole. Hauskaa kevättä.

      Poista
  6. Hei vaan taas täällä mummo. Muokkasin vähän blogini ulkoasua ja osasin kuin osasinkin lisättyä koodisi. Kiitos ! Olit oikeassa, ei mummouden taakse saa piiloutua, kokeilemalla oppii, näin vanhin poikanikin aina minulle sanoo.🌹

    VastaaPoista
    Vastaukset
    1. Hyvä Päivi, uusimmat kommentit sopii erinomaisesti blogiisi. Siitä se lähtee.

      Poista
  7. Mummo kiittää.🌹Kokeilin nyt tekoälyä (ChatGPT) ja sehän on todellakin loistava koodien tekijä.

    VastaaPoista
    Vastaukset
    1. Ihan yllätyin, kun katsoin blogisi tekstiä: Minä ja Tekoäly. Olet tehnyt todella paljon kaikenlaista ChatGPT:llä. Nostan ihan hattua. Mistä ihmeestä edes keksit tuon takaisin ylös painikkeen? Yksinkertaisuudessaan aivan nerokas. Voi olla että itsekin pitää ottaa se käyttöön...

      Poista
  8. Kiitos paljon! Alkoi niin kiinnostaa, kiitos tämän blogisi postaukset. Täytyy tunnustaa että se oli käyttämäni tekoälyn ehdotus kun kysyin miten voisin parantaa blogiani. Mutta se on oikeasti hyödyllinen lisä. Suosittelen

    VastaaPoista