Tee itse seurantapainikkeet blogiin

Blogin ulkoasun harmonia on helposti pilalla, jos sivupalkissa killuu kaikenlaisia erikokoisia ja -näköisiä seurantananappeja Blogilistalle, Blogloviniin, Facebookiin, Instagramiin sun muuhun. Nämä palveluthan tarjoavat helposti asennettavia follow me here and there -nappuloita ja kuvia mutta aina näiden valmiiden tuotosten ulkonäkö ei miellytä omaa silmää. Moni onkin kysellyt, kuinka nämä seurantapainikkeet voisi itse tehdä. Homma on hyvin simppeli. Tai siis tämänkin voi tehdä taas monella tapaa mutta ajattelin pyöräyttää ohjeen jo banneripostauksesta tutuksi tulleen Picmonkeyn ympärille. Sen käyttö kun ei vaadi rahaa eikä edes kauheasti kykyjä.

Seurantanappulat ovat monissa blogeissa tehty ihan kuvina ja kuvia mekin käytämme tänään. Ensin tehdään nappulat ja sitten laitetaan ne blogiin oikein kahdella eri tavalla.

Blogeissa näkee myös kuvakkeita, jotka ovat yhtenäisiä ja hyvin pieneen tilaan meneviä. Niitä saa netistä ja niitä voi askarrella itsekin mutta ongelmana on se, että toisin kuin esim. Facebookilla tai Pinterestillä, monilla suomalaisten bloggareiden käyttämillä palveluilla ei ole pienen pieneen tilaan menevää logoa, jota näissä kuvakkeissa voisi hyödyntää. Yhtenäisen ilmeen saaminen kuvakkeiden avulla onkin sitten jo astetta haastavampi operaatio. Esimerkiksi Facebookin pikkulogo on se f ja Pinterestillä taas P. Blogilistalta ja Bloglovinilta ei tällasia löydy. Kuvakkeisiin voimme palata myöhemmin, jos kiinnostusta löytyy.

Tässä tämänkertaisella ohjeella tehdyt pikaiset näytteeni, joita saa muuten vapaasti käyttää, jos haluaa:

Seurantapainikkeiden tekeminen
Selvitä ensin blogisi sivupalkin koko ja minkä kokoisia haluaisit tehdä seurantanapeista. Itse askartelin nämä mallipainikkeet kokoon 250x100. Pienenpikin olisi riittänyt. Sitten olisi aiheellista kaivaa esiin se bannerintekopostaus, koska ohjeilla on yhtäläisyyksiä ja se auttaa Picmonkeyn käytössä.

1. Ensin lähdet tekemään kollaasia (create a collage) ja valitset vaikkapa Ducks in a row vaikka kahden neliön mallin. Muuta kuva haluamaasi kokoon ja valitse sille läpinäkyvä tausta (suosittelen). Tallenna kuva png -muodossa koneellesi (siis ainakin, jos valitsit läpinäkyvän). Poistu kollaasintekotilasta.

2. Picmonkeyn etusivulla valitset sitten seuraavaksi kuvankäsittelyn (edit a photo). Avaa äsken tekemäsi tausta. Lisää taustaan kaikki se, jonka haluat näkyvän jokaisessa painikkeessa. Älä vielä laita mitään tekstiä mutta heittäydy luovaksi! Kun olet valmis taustan suhteen, tallenna se koneellesi.

Läpinäkyvä tausta näyttää tältä tai koneelle tallennettuna jopa mustalta. 

3. Seuraavaksi ala taas muokata kuvaa ja hae koneeltasi nyt tämä äsken tekemäsi tausta. Lisää siihen haluamasi teksti, esim. Blogilista. Ota muistiin jonnekin mitä fonttia käytit, mikä sen koko oli, ja mitä väriä käytit (numeroiden ja kirjainten sarja oikeassa yläkulmassa). Kannattaa ehkä merkata varmuudeksi vielä kuinka monennella ruudukkorivillä tekstin reuna oikein oli ylhäältä tai alhaalta katsottuna (läpinäkyvässä taustassa on tämä ruudukko taustalla).

4. Tallenna valmis tuotos sopivasti nimettynä mutta älä sulje ikkunaa Picmonkeyssä tallennuksen jälkeen. Jos teet enemmän painikkeita yhdellä kertaa, voit kirjoittaa seuraavan nimen tämän äsken tehdyn ja tallennetun päälle. Silloin fontti on varmasti samaa kokoa ja väriä ja vielä samassa kohdassa. Valitset vain hiirellä edellisen tekstin ja kirjoitat suoraan sen päälle uuden nimen. Tallennat sopivalla nimellä ja jatkat samoin seuraavan kanssa.

Tähän vaan uusi teksti päälle. 

5. Jos tarvitset myöhemmin uusia nappeja uusia tilejä varten, sinulla on onneksi tausta tallella. Kun olet laittanut muistiin myös fontin koon ja värin, saat uusiin nappeihin tehtyä samanlaiset tekstit. Värin tunnuksen voit kirjoittaa tai copypasteta suoraan sille varattuun kohtaan, eli sinun ei tarvitse yrittää osua värikartassa oikeaan kohtaan. Myöhemmin tekstin saaminen juuri samalle kohdalle muiden aikaisempien tekstien kanssa voi olla haastavaa mutta läpinäkyvässä taustassa sinua auttaa ruudukko ja saat tekstin kohdilleen sen avulla.


Seurantapainikkeet blogiin kuvagadgetilla...
Voit lisätä kuvan blogiisi niinkin helposti kuin kuva-gadgetilla. Eli kun olet blogisi ulkoasussa ja valitse lisää gadget ja kuva, uudessa ikkunassa avautuu seuraava näkymä:

Tuohon sitten haet koneeltasi seurantanapin kuvan, et laita ruksia mihinkään pienentelykohtaan ja linkiksi laitat sen sivun, jolla kuvaa klikkaamalla tulisi päästä (siis esimerkiksi blogisi sivun Blogilistalla, blogisi Facebooksivun, jne.). Blogger vaatii nykyään myös otsikkoa kuvalle ja et saa tallennettua kuvaa ilman sitä. Voit kuitenkin kiertää otsikoinnin lykkäämällä sen kohdalle <!-- --> Sitten vain tallennat ja olet valmis seuraavaa kuvaa varten.

Vaikka nappulat ovatkin kuvia, et ehkä halua niiden näkyvän kehyksineen kaikkineen sivupalkissa, kun kerran läpinäkyvää taustaakin on jo väsätty. Voit poistaa kehykset blogisi kaikista kuvista tällä yksinkertaisella ohjeella.

Jos käytit tätä kuvagadgettaktiikkaa, huomasit ehkä kuvia klikatessasi yhden jutun: uusi sivu ei aukea uudessa välilehdessä vaan kuvaa klikkaava kävijä ajautuu pois blogistasi. Jos haluat kuvien avautuvan uuteen välilehteen, voi tehdä seuraavan tempun (ja se varmuuskopio ensin, kiitos!). Mene Malli -> Muokkaa HTML-koodia. Koodikentän yläreunasta etsit Siirry widgetiin ja klikkaat pientä nuolta. Saat listan widgeteistä ja sieltä sinun pitäisi etsiä oikeat kuvat. Kannattaa laskeskella monesko kuva on mikäkin. Klikkaat kuvan nimeä (imageX) ja hyppäät koodissa suurinpiirtein oikeaan kohtaan. Huomaa, että kuvan koodi ei ala kentän yläreunasta, vaan etsi näkyvillä olevasta koodista vielä se imageX ja klikkaa sen kohdalla vasemmassa reunassa olevaa pientä nuolta. Ja sitten vielä toista pientä nuolta, joka ilmestyi riviä alemmas. Sinun pitäisi nähdä about tällainen koodi:

<b:widget id='Image1' locked='false' title='' type='Image'>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>

Lykkäät tuohon viimeiselle riville heti 'data:link' jälkeen ja ennen > seuraavan koodinpätkän:

 target='_blank'

Tallennat ja teet saman jokaisella kuvalle, jossa on linkki ja jonka haluat avautuvan uuteen välilehteen. Sen pituinen se operaatio.


...tai HTML-koodilla
Kuvathan voi lisätä myös toisella tavalla. Voit ladata tuotoksesi johonkin kuvapalveluun netissä, kuten vaikka sinne Photobucketiin. Sieltä saat suoran linkin kuvallesi (se http:// -alkuinen vaihtoehto). Sitten syötät tarvittavat tiedot seuraavaan koodiin:

<a href="http://mihinosoitteeseenkuvasivie.fi" target="_blank">
<img src="http://kuvansuoralinkki.png"/></a>

Tämän voit laittaa blogisi sivupalkkiin HTML/javascript -gadgettina ja tallennat. Tässä linkki avautuu toisessa välilehdessä, eikä sinun tarvitse sorkkia blogisi koodia. Jos haluat vielä keskittää kaikki kuvat laita koodin ympärille <center>kuvan koodi</center>. Kehykset näkyvät myös näissä kuvissa, jos et ole niitä poistanut edellä mainitulla ohjeella.

Toivottavasti tästä ohjeesta oli iloa monille teille kyselijöille!