perjantai 15. elokuuta 2014

Miten lisätään some-painike blogiin


Kannattaa tarjota lukijoille erilaisia tapoja seurata blogiasi. Perinteinen GFC (jonka Blogger tarjoaa sivupalkkiisi) ei aina riitä, koska monilla ei ole Google-tiliä. Siksi Bloglovin, Blogilista, Facebook, Pinterest, RSS, Instagram ym.  ovat hyviä vaihtoehtoja.


Jos et itse halua/osaa tehdä some-painikkeita, voit ladata niitä ilmaiseksi netistä. Myös Kivemmasta blogista löytyy ilmaisia painikkeita käyttöösi.


Ohjeet

Ensimmäiseksi sinun tulee ladata kuva (some-painike), jollekin kuvahoustaussivustolle (itse käytän Photobucketia), jotta saat kuvan      URL-osoitteen. 


1. Avaa "Uusi teksti" aivan kun kirjoittaisit uuden blogipostauksen.

2. Valitse HTML



3. Lisää kuva (some-painikkeesi)



Huom! Valitse alimmainen Valitse tiedosto -vaihtoehto: URL-osoitteesta. Kopioi kenttään kuvasi URL-osoite. Klikkaa lopuksi "Lisää valitut".


4. Valitse "Ei mitään" ja "Alkuperäinen koko". Jos haluat muuttaa kokoa tai rajata painiketta, sinun tulee tehdä se ennen kuin kopioit kuvan URL-osoitteen.

Lisää kaikki haluamasi some-painikkeet samalla tavalla samalle sivulle. ÄLÄ paina entteriä. Muutat niiden järjestystä vasta myöhemmin.


5. Siirry takaisin "Luo"-puolelle



6. Lisää jokaiseen painikkeeseen linkki seuraavasti




Klikkaa kuvaa (se menee siniseksi) ja valitsi toimintopalkista "Linkki". Joudut tekemään tämän kahdesti (minulle tuntemattomasta syystä). Sen jälkeen lisää kohtaan "Mihin URL-osoitteeseen linkin pitäisi viedä?" sivun osoite, johon haluat lukijan päätyvän. 

Esimerkiksi kuvassa näkyy BL-painike (Bloglovin tai Blogilista). Haluan siis, että painiketta klikattaessa lukijani päätyy blogini Bloglovin-sivulleni, jossa hän voi alkaa seurata minua. Tai jos kyseessä on olisi Facebook-painike, haluaisin, että lukija voi tykätä sen kautta blogini FB-sivusta. 

Lukija ei siis suoraan ala seuraamaan sinua klikatessaan painiketta, vaan painike johtaa hänet sivulle jossa hän voi alkaa seurata blogia.



Voit halutessasi valita, että painiketta klikattaessa sivu aukeaa uuteen ikkunaan. Näin lukija pysyy vielä blogissasi. 


7. Siirry takaisin HTML-puolelle ja kopioi koko HTML-koodi.

Tässä esimerkki, miltä koodi voi näyttää (oma koodisi ei ole identtinen)

<a href="http://iammrsk.blogspot.fi/p/contact.html" target="_blank"><img border="0" src="http://i1331.photobucket.com/albums/w590/minttukar/dark-pink-email_zps69ed1543.png" /></a><a href="http://www.bloglovin.com/blog/9939525/i-am-mrs-k" target="_blank"><img border="0" src="http://i1331.photobucket.com/albums/w590/minttukar/dark-pink-bloglovin_zps7c5228df.png" /></a><a href="http://feeds.feedburner.com/iamMrsKblog" target="_blank"><img border="0" src="http://i1331.photobucket.com/albums/w590/minttukar/dark-pink-rss_zpsdc0714a1.png" /></a><a href="https://www.facebook.com/iammrsk" target="_blank"><img border="0" src="http://i1331.photobucket.com/albums/w590/minttukar/dark-pink-facebook_zps6d40984d.png" /></a>



ÄLÄ MISSÄÄN TAPAUKSESSA JULKAISE TEKSTIÄ! Voit tallenta sen, mutta laita otsikoksi esim. EI saa tallentaa.


8. Siirry takaisin blogisi Yleiskatsaus-sivulle. Valitse ulkoasu.




8. Valitse "Lisää gadget". Suosittelen sivupalkkia, mutta voit toki lisätä ne muuallekin. 

9. Valitse avautuvasta listasta "HTML/JavaScript" 








10. Liitä tekemäsi HTML-koodi "Sisältö"-kenttään. Klikkaa kentän oikean yläkulman yllä olevaa "Muotoiltu teksti" -painiketta. Nyt voit hiirellä muuttaa some-painikkeiden järjestystä mieleiseksi. Kun olet valmis, tallenna.

11. Voit siirtää vielä tekemäsi gadgetin, eli kaikkien some-painikkeitesi paikkaa sivupalkissa. Lopuksi tallenna.





25 kommenttia :

  1. Halusin ihan uteliaisuuttani testata tuota (kohdassa 6) mainitsemaasi kahden "Linkki"-painalluksen mysteeriä, mutta en päässyt sinne saakka. Normaalisti tallennan kuvani Googlen omaan Picasa -palveluun, jotta ne saa liitettyä sieltä suoraan ilman URLeilla kikkailuja (ja olen pienentänyt kuvat aina ennen uppaamista, joten 2,5 vuoden bloggaamisen jälkeenkin kuvat vievät vain 6% tallennustilasta, joten mahtuvat sinne hyvin).
    Ongelma tulee kuitenkin vaiheessa 4, jolloin kuvan URLin pitäisi liittää kuvanlisäykseen. Jostain syystä Blogger ei vaan tarjoa minulle tuota "Valitse ulkoasu" -kyselyä, se antaa minulle vain esikatselun kuvasta ja Lisää valitut -painikkeen, jolla lisäys onnistuu. Tämä ei sinällään aiheuta oikeita ongelmia, koska nuo tasaukset ja kuvan koot voi säätää jälkikäteenkin toisen valikon kohdalta. Minä lähinnä periaatteen vuoksi ihmettelen asiaa, että miksi minulle ei tule tuollaista kyselyä? :D Koitin käyttää Googlen palvelimella olevan urlin lisäksi myös yle.fi:ssä ja ilosaarirock.fi :ssä olevia urleja, mutta kaikissa oli sama juttu. Mystistä... :D

    VastaaPoista
    Vastaukset
    1. Tarkoitatko, että sulle ei tule ollenkaan tuota kyselyä sen jälkeen, kun olet laittanut kuvan URL:n ja painanut Lisää valitut?
      Onko sulla kuitenkin käytössä uudempi Blogger käyttöjärjestelmä?

      Sen ei kuitenkaan pitäisi haitata, jos poistat HTML-koodista kaikki tasaukset ym.

      Poista
    2. Ja vielä: teethän sen siinä HTML puolella eikä "Luo" - puolella?

      Poista
    3. Ensinnäkin pahoittelut, että aiempaan kommenttiin vastaaminen sitten lopulta unohtui. Epäilin itsekin että voiko tuo johtua Bloggerin käyttöliittymän päivityksestä, kun joskus aikoinaan jätin jonkun päivityksen tekemättä. Metsästinkin sitten pitkän aikaa ohjetta että miten päivityksen voisi tehdä näin jälkikäteen, mutta en löytänyt mistään ohjetta joka ainakaan vastaisi oman Bloggerini näkymää ja vaihtoehtoja...

      Mutta siis, ongelma johtui siis juuri tuosta epäilemästäsi HTML/Luo -puolesta, luo-puoleltahan sitä pääasiassa koitin tehdä :) Sinällään tuntuu oudolta, että tuolla puolella on merkitystä kun luulisi sen ylävalikon lisää kuva -toiminnon toimivan täysin samalla tavalla riippumatta että mistä sen tekee.

      Jos haluat tehdä tuosta ohjeesta mahdollisimman rautalankaversion, niin kolmoskohdan "Valitse alimmainen Valitse tiedosto -vaihtoehto: URL-osoitteesta. Kopioi kenttään kuvasi URL-osoite.":n perään voisi ehkä lisätä että pitää klikata vielä "Lisää valitut" -painiketta ennenkuin se "Valitse ulkoasu" -tulee esille :)

      Mutta siis kiitos paljon, vaikka teenkin yleensä nuo tasaukset toisella tavalla niin nyt ei tarvitse tuotakaan enää ihmetellä :D

      Poista
    4. Pitääpä lisätä tuo ehdottamasi kohta! :)

      Tosiaan jostakin syystä se vaikuttaa HTML-koodiin jos sen tekee siellä "normaalilla" puolella ja näin lisättäessä esim. sivupalkkiin, se ei toimi.

      Poista
  2. Kiitos tästä! Tosi selkeät ohjeet. :) Olen kyllä niin tumpelo, etten varmaan siltikään onnistu. :D

    VastaaPoista
  3. Tämä oli hyvä ohje! Nyt nappuloiden teko sujuu jo ilman ohjetta, mutta alussa nämä vinkit olivat todella hyödyllisiä! :)

    VastaaPoista
    Vastaukset
    1. Eikö olekin siistiä miten bloggaamisessa kehittyy! :)

      Poista
  4. Ohjeet ovat selkeitä ja ihanaa, että voi aina myös kysyä lisäneuvoja, kun olen niin tumpelo :)

    VastaaPoista
    Vastaukset
    1. Oi kiitoksia! Mielelläni vastaan lisäkysymyksiin :)

      Poista
  5. Voi, mun pää on sekaisin jo lukimsesta!;D Ei vaan, tällaiseten kuvitettujen ohjeiden avulla tällainenkin tumpelo hyvällä onnella onnistuu.:)

    VastaaPoista
    Vastaukset
    1. Pitää vain edetä rauhallisesti :)

      Poista
  6. Kuinka voi tehdä sellaisen painikerivin, jossa kaikkiin kanaviin on oma linkki? Yksittäiset kuvat linkkeineen osaan kyllä ladata, mutta tahtoisin sellaisen selkeän rivin vielä :) Olisiko mahdollista saada sinulta konsultointiapua blogin suhteen ;)? Siis palautetta lähinnä luettaviudesta yms...

    VastaaPoista
    Vastaukset
    1. Tämän postauksen avulla se onnistuu :) Ei siis tarvitse olla vain some-painikkeita vaan ihan mitkä vaan painikkeet ja kuvat onnistuu. Laita minulle sähköpostia niin jutellaan lisää blogistasi :) iammrskblog at gmail.com

      Poista
  7. Kiitos selkeistä ohjeista! Onnistuu Toivon Vintilläkin! Mutta en osaa säätää leveyksiä niin, että luomani näppäinrivistö menisi julkisivun kuvan kanssa yksiin. Mistä löytyisi oikea paikka säätää?

    VastaaPoista
    Vastaukset
    1. Onko sun somenappulat oikean kokoisia?

      Poista
  8. Sulla on niin selkeät ohjeet, että Toivon Vintilläkin onnistuu! Kiitos.
    Sain tehtyä painikerivin, mutta se ei ole yhtä leveä kuin yläkuva. Mistä löytyis apu? Jos laitan painikkeiden väliin tyhjää, kuten haluaisin,pompsahtaa nappulat osin toiselle riville.

    VastaaPoista
    Vastaukset
    1. Se riippuu siitä miten leveä sivupalkki sulla on, eikä siitä minkä levyinen kuva on. Painikkeiden väliin ei voi laittaa välilyöntiä, koska se sotkee koodin vääränlaiseksi. Sun pitäisi muokata sivupalkin HTML-koodia (tai helpommin käyttää CSS-koodeja.)

      Jos tarvitset apua vielä niin laita sähköpostia iammrskblog at gmail.com

      Poista
  9. En osaa tehdä url-osoitetta photobucketin tai minkään muun kautta. Osaatko auttaa?

    VastaaPoista
    Vastaukset
    1. Kun olet ladannut kuvasi Photobucketiin sivun oikeassa reunassa on Share this photo, jonka alla löydät oikean linkin (direct)

      Poista
  10. Voi Minttu!<3 Pari iltaa olen tässä painikkeita yrittänyt paikoilleen ja nyt sitkeys palkittiin. Eivät riittäneet yhdet, eivätkä kahdet ohjeet, mutta NYT mulla on parempi ymmärrys tästäkin asiasta...ja voi olla, että painikkeet vaihtuvat vielä toisenlaisiin, kun tiedän, miten homma toimii. Kiitos, kiitos! Huippua, että on bloggaajia, jotka bloggaavat auttaakseen muita bloggaajia!<3

    VastaaPoista
    Vastaukset
    1. Jes, sait toimimaan! Kiitos ihanasta kommentista :)

      Poista
  11. Sori tuun tälleen myöhässä, mutta teen kaiken oikein tuohon asti että kirjoita url osoite mutta laitoin sen ja se väittää ettei ole oikein ? en ymmärrä vaikka se on oikein

    VastaaPoista
    Vastaukset
    1. Laittaisitko tähän tai kirjekuori-ikonin kautta kuvan url-osoitteen minulle :)

      Poista

Olisin erittäin otettu jos jättäisit minulle kommentin :)