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.

• Alustus - Mistä oikein puhutaan?
• 1. Kirjoitusta kuvaava otsikko
• 2. Hyvä kuva ja lyhyt esittelykappale
• 3. Hakukenttä ja google translator
• 4. Kategoriat ja yksityiskohtaisempi tagipilvi
• 5. Suosituimmat tekstit ja sisäinen suosittelu
• 6. Uusimmat kommentit
• 7. Artikkelin lukuaika-laskuri ja sisällysluettelo
• 8. Blogiarkisto, eli kaikki blogissa julkaistut tekstit
• 9. Blogiluettelo eli blogroll
• 10. Blogin kirjoittaja ja ota yhteyttä
• 11. Bonus: Personuidut widgetit

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)