sunnuntai 29. joulukuuta 2013

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!

53 kommenttia:

  1. Kiitos taas hyvästä vinkistä! Teen nämä itselleni heti alkavalla viikolla. :)

    VastaaPoista
    Vastaukset
    1. Itsekin taidan askarrella nämä tällä viikolla.

      Poista
  2. Kiitos tästä! Mun on jo ikuisuuden verran pitänyt tehdä tämä asia, mutta en ole jaksanut etsiä kunnon ohjeita. Nyt sain vihdoinkin hoidettua tämänkin jutun :)

    VastaaPoista
    Vastaukset
    1. Tämä on ilmeisen monella roikkunut to do -listalla. Mutta ehkä näillä ohjeilla sitten viimein onnistuu :)

      Poista
  3. Suuuuuuuuuuuuuuuuuuuuuret kiitokset tästä ohjeesta ! Olenkin tuskastellut jo pidemmän aikaa miten ihmeessä saisin blogiini soppelit seurantanamiskat kaikille miljoonalle eri sivustolle joihin olen päättänyt tupertaa itseni :D Ei nuo nykyisetkään nyt ehkä sieltä sekavimmasta päästä ole, mutta itseäni häiritsee :3

    VastaaPoista
    Vastaukset
    1. Ollos hyvä! Omaan silmään sopivat nappulat on kyllä aika must, jos on ihan miljoonaan paikkaan mennyt liittymään.

      Poista
  4. Sinun blogissasi on aina erittäin hyödyllisiä neovoja ja tietoja. Kiitos siitä! :) Osaisitko auttaa miten blogin sivuun saisi instragram kuvakkeen vai millä nimellä sitä sanotaan? :)

    VastaaPoista
    Vastaukset
    1. Ai siis sellaisen, joka näyttää niitä kuvia? Niitä on käsittääkseni monia erilaisia suht helposti asennettavia widgettejä mm. täällä, täällä ja täällä.

      Poista
  5. Olen saanut blogistasi paljon käyttökelpoisia ja hyödyllisiä vinkkejä. Kiitos niistä! Hyvää uutta vuotta sinulle!

    VastaaPoista
  6. heippa ! tuli joskus liityttyy toho google + ja nyt haluisin takas päästä tonne bloggerii pelkästää, nii katooko mun blogi jos deletoin itteni pois google +:sta?

    VastaaPoista
    Vastaukset
    1. Joku on siinä onnistunut ilman, että blogi on tuhoutunut. Tämän postauksen kommenteissa on juttua siitä.

      Poista
  7. Kiitos taas hyvästä postauksesta! Huomasin, että blogillasi on oma osoite eikä siis pinkbubble.blogspot.fi. Voisitko tehdä juttua siitä miten saada bloggerissa .fi osoite :)

    VastaaPoista
    Vastaukset
    1. Minulla onkin ollut tekeillä postaus tuosta aiheesta. Tarvitsin apua taannoisessa omaan osoitteeseen siirtymisessä ja yritän vielä haastatella sitä apuriani, että mitä kaikkea siinä tulikaan tehtyä :D

      Poista
  8. Kiitos jälleen kerran loistavista neuvoista! Sulla on kyllä mahdollisesti Suomen parhain ja hyödyllisin blogi! :) Nappien teko onnistui mainiosti ja niiden blogiin laittaminen. Seuraava projekti onkin tehdä blogille FB-sivut ja mitenkäs muutenkaan kun sun ohjeilla! :)

    VastaaPoista
  9. hei miten tohon läpinäkyvään taustaan pystyy lisäämään sen kuvan? Apua nopeasti jookos!! <3

    VastaaPoista
    Vastaukset
    1. Kun avaat sen uudestaan Picmonkeyssa, niin mm. sieltä vasemmasta reunasta perhosen takaa löytyy kaikenlaisia kuvia, mitä voi käyttää. Sieltä tuo sydän on ainakin.

      Poista
  10. Moi! Löysin tän superhyvän blogin ihan randomilla ja ajattelin kysyä että miten saa vaikka nuo napit kaksvierekkäin tai silleen siististi ettei ole sataa alakkain. Ja sori jos se luki postauksessa, koska en jaksa nyt puhelimella lukea :/ !

    VastaaPoista
    Vastaukset
    1. Juu, ei se lukenut tuossa. Kirjoittelin kyllä niistä pienistä kuvakkeista ja voin tehdä niistä oman ohjeen, jossa selviää se miten napit saa vierekkäin.

      Poista
  11. Kiitos paljon loistavista ohjeista! Sun ansiosta jopa minä osasin värkkäillä nämä, ja tajusin että sama logiikka pätee iHerbin koodimainosbannerin tekoon. Sen kanssa ehdin tuskailla jo jonkin aikaa.

    Tämän lisäksi innostuin uusimaan koko blogin ulkonäköä ja fontteja, ja nyt viimeisenä tein kokonaan uuden bannerin pelkällä Picmonkeylla!

    Tuo Picmonkey on muuten aika koukuttava ohjelma ;)

    VastaaPoista
    Vastaukset
    1. Ole hyvä! Se on tosiaan näppärä ohjelma. Ei turhia kommervenkkejä ja silti tuotokset näyttävät hyviltä.

      Poista
  12. Tykkäsin tosi paljon ohjeesta! Ootko huomannu PicMonkeyn uudistuksen? On helpompikin tapa saada Transparent background. Voit etusivulta valita Design, ja kun se vie sinut editoriin, se kysyy heti Canvas Color ja siitä voi painaa transparent! :)

    VastaaPoista
    Vastaukset
    1. Jep, sen sopivan koon valitseminen on sitten taas eri juttu tuota kautta.

      Poista
  13. tää oli kyllä jälleen kerran hyvä vinkki ! , mutta en saanut toimimaan tota html koodia että kuvaa klikkaamalla se avaisi uuden sivun. johtuukohan uudesta mallista blogissa, kun vaihdoin simplen toiseen :o osa koodimuokkauksista vanhoista siis lakkas toimimasta nimittäin myös :D

    VastaaPoista
    Vastaukset
    1. Voipi johtua juuri mallin vaihdoksesta. Kannattaa katsoa, miltä tuo koodi näyttää siellä ja laittaa vaikka ne kaikki uusiksi. Harmi!

      Poista
  14. Löysin vasta tänään illalla blogisi ja oon kolunnut tämän lähes kokonaan lävitse. Kirjoituksistasi olen oppinut vaikka mitä uutta bloggaukseen liittyen ja tämä on ollut kyllä oivallinen opas näin aloittelijalle. Kiitokset näistä vinkeistä ja jatka samaan malliin! :)

    VastaaPoista
    Vastaukset
    1. Hei kiitos Ansku! Ja mukavaa, että löysit tänne :)

      Poista
  15. Help me! Tein ohjeittes mukaan (luultavasti :D) niin tuli! Virhe XML:ää jäsennettäessä, rivi 2474, sarake 33: Element type "a" must be followed by either attribute specifications, ">" or "/>"

    Muuten ihana vinkki ja sain hienot painikkeet :)

    VastaaPoista
    Vastaukset
    1. Jaahas! Laitoit siis tuon pidemmän koodin sinne blogisi HTML-editoriin? Näyttikö toi vika rivi lisäyksen jälkeen varmasti tältä <a expr:href='data:link' target='_blank'> Jos se ei kuitenkaan toimi, niin suosittelen tuota jälkimmäistä vinkkiä.

      Poista
  16. Hei tiedätkö onko olemassa mitään sellaista koodia, että sais nuo sivupalkin gadgetit lähemmäksi toisiaan. Esim. kun vaikka kahta kuva gadgettia yrittää lisätä sivupalkkiin, niin kuvien välille jää isohko väli, mikä ainakin itseäni pistää silmään. : /

    VastaaPoista
    Vastaukset
    1. Nopeasti löysin sellaisen koodin, jolla saa kaikkien sivupalkin widgettien väliä muutettua, eli niiden kuvien myös. Malli ->Mukauta->Lisäasetukset->Lisää CSS ja laatikkoon laitat

      .widget {
      margin: 8px 0 0 0;
      }

      Muutat tuota 8 miksi haluat ja katso esikatseluta miltä näyttää. Sitten tallennat, kun on hyvä. Ja se varmuuskopio kannattaa ehkä tehdä ensin.

      Poista
  17. KIITOS, kiitos kiitos!!! Nyt tuli hyvä, kun vihdoin jaksoin guuglettaa iheesta ja löysin aarreaittasi!! Tässähän tuntee itsensä ihan koodariksi, kun osaa HYVILLÄ ohjeilla kikkailla!!! :-)
    Varmasti palaan tulevissakin ongelmissa. Tai ehkä jopa ilman ongelmaa... ;-)
    www.lauramainen.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Hehee, tervetuloa ihan ilman ongelmiakin tänne :D

      Poista
  18. Ansiostasi kesytin HTML-koodin. Kiitos! <3

    VastaaPoista
  19. Heips! Taas yksi kiperä kysymys, johon toivoisin vihdoin löytyvän ratkaisu.. Olen törmännyt joissakin blogeissa tällaiseen. Nimittäin sivupalkin BLOGIARKISTO/TUNNISTEET/HAKU/LUKIJAT -otsikoiden tilalle on tehty tällaiset seurantapainikkeiden tapaiset kuvat. Siis nuo pienet otsikot on korvattu kuvalla. Olen yrittänyt pyöritellä tätä jo pitkään, kuinka saisin nämä otsikot muutettua itse tehdyiksi kuviksi, mutten ole vielä saanut keksityksi.

    Painikkeet olisi jo valmiina, mutta miten tämä vaihdos/muutos käytännössä onnistuu? Vai onko tähän ratkaisua ylipäätänsä?

    VastaaPoista
    Vastaukset
    1. Hmmm.. Nopeasti sanottuna saat otsikon kuvaksi poistamalla noista gadgeteista ne kirjoitetut otsikot ja heittämällä niiden yläpuolelle kuvagadgetilla haluamasi kuvat tämän ohjeen tyyliin. Siihen jää jonkin verran tyhjää gadgettien väliin, mutta tuossa pari kommenttia ylempänä on koodi, jolla väliä voi pienentää, niin kuva alkaa näyttää jo otsikolta :)

      Poista
    2. Kiitos paljon, yritän väkertää. :) Tuli myös mieleen, oletko perehtynyt näihin some ikoneihin? Yritin hakea blogistasi postausta some ikoneista, mutten löytänyt. Olisiko mahdoton postaus toteutettavaksi? Olen yrittänyt kovasti perehtyä niihin, mutta työ tuntuu jotenkin niin ylivoimaisen työläältä ja hankalalta, että olen aina pudonnut kärryiltä yrittäessäni.

      Poista
    3. Ttässä jutussa mainitsen ne mutta en ole tehnyt niistä juttua. Bloggeriin ei kaikkea saa niin helpolla mutta voin tutkia asiaa.

      Poista
  20. Upeaa mahtavaa ihana ihminen! Nyt vihdoin keksin salaisuuden, millä saan nuo napit omannäköisiksi. Kiitos Susanna! Siis kun Blogilistallakin mainitaan ohjeissa vain että lisäät tällaisen koodinpätkän esim. blogisi sivupalkkiin. Kukaan vaan ei maininnut sanallakaan, mihin se tarkalleen ottaen lisätään. Eihän sitä voi vaan raahata ulkoasu-kohdan sivupalkkiin... Taikasana oli html/javascript-gadget.

    VastaaPoista
    Vastaukset
    1. Hehheh, hauskaa, että onnistuit. Usein ohjeissa jätetään sellaiset pikkuseikat kirjoittamatta auki. Ja ne kun ovat yleensä ne tärkeimmät!

      Poista
  21. Jo toista kertaa tein painikkeet tämän ohjeen mukaan! Ja lukemattomia muitakin vinkkejä on tullut hyödynnettyä, joten kiitos ja syvä kumarrus!! =)

    VastaaPoista
    Vastaukset
    1. Kiitos kiitos :) Ohje näyttää siis toimivan hyvin!

      Poista
  22. Miksihän minä en saa tätä toimimaan :( Toimin omasta mielestäni ohjeiden mukaan eikä herjannut mitään, mutta siltikkään kuvat eivät avaudu toiseen sivustoon.. mur.

    VastaaPoista
    Vastaukset
    1. Hmm. Tarkistitko vielä, että kaikki koodit ok? Ja ongelma on se, että kuva ei aukaise linkkiä? Tuossa vikassa koodissa muuten kaikki on putkeen eli siinä ei ole väliä >< välissä. Tässä se vain jakautui kahdelle riville.

      Poista
  23. Hitto, minähän osasin! Ensimmäistä kertaa koskin mihinkään html-koodiin kun en niistä ymmärrä tippaakaan, mutta nythän ne aukeaa uuteen välilehteen! Jes ihanaa, hyvä minä, ihana sinä kun jaksat näitä blondinkestäviä ohjeita raapustella!

    VastaaPoista
    Vastaukset
    1. Hienoa! Toinen blondi osaa kyllä raapustella näitä blondinkestäviä ohjeita :D

      Poista
  24. Hei ihan mahtavaa kiitos tästä! Oon niin kädetön kaikissa tälläsissä tekniikkajutuissa! Tästä oli ihan uskomattoman suuri apu. En vieläkään voi uskoa että oikeesti onnistuin lisäämään nuo tuonne, kiitos sun! :)

    VastaaPoista
  25. Äh kun yritän lisätä html-koodiin tota sun neuvomaa pätkää, tulee vaan tällanen ilmotus: Virhe XML:ää jäsennettäessä, rivi 2355, sarake 33: Element type "a" must be followed by either attribute specifications, ">" or "/>"

    VastaaPoista
    Vastaukset
    1. Oletko tarkistanut, että koodit on prikulleen samalla tavalla kuin tässä? Vaikuttaa siltä, että jostain on kadonnut pätkä, jos > puuttuu.

      Poista