Sunday, November 13, 2011

Customized "follow me" -buttons

Suurin osa teistä onkin varmaan jo huomannut tuossa oikeassa sivupalkissa olevat kustomoidut "Follow Me" -painikkeet. Blogiani kun voi tätä nykyä seurata niin blogilistan, facebookin, twitterin, bloglovinin ja muutaman muun sosiaalisen sivuston kautta, tahdoin kehittää visuaalisesti kauniimman ratkaisun kuin ne palvelujen tarjoamat tunnukset, jotka tekivät sivupalkista ihan sillisalaatin näköisen. Täten hieman googlailin katsoakseni mitkä olivat mahdollisuuteni tämän suhteen. Yksinkertaisin ja toimivin ratkaisu oli, että luon itse haluamani "Seuraa"-kuvakkeet ja linkitän ne sitten kyseisiin palveluihin. Koska lukijoideni joukossa on myös paljon bloggaajia, ajattelin tehdä teille tämän pienen postauksen, missä opetan tämän helpon tekniikan teillekin.




Tässä tulee siis helpot 4 -askeleen ohjeet kuinka luoda kustomoidut "Seuraa blogiani" -painikkeet eri seurantasivustoille.


1. Luo haluamasi kuvake
Ensiksi sinun tulee tehdä kuvat, joita haluat linkityksessä käyttää. Jos et tahdo valmista kuvaa koneeltasi, joudut käyttämään kuvankäsittelyohjelmaa niiden tekemiseen. Minä itse käytin tähän PhotoShoppia. Yksinkertaisesti loin 200px X 70 px kokoisen uuden tiedoston (file -> new file -> blank file), josta sitten muokkasin taustani haluamalla värillä ja kirjoitin lopuksi siihen samaisella ohjelmalla haluamani tekstin: Strictly Style on facebook. Muista tallentaa kuvasi.




2. Lataa kuva nettiin
Jotta saisit kuvan näkymään sivuillesi, tarvitset kuvalle URL -osoitteen.

(URL:ää (Uniform Resource Locator) käytetään osoittamaan WWW-sivuja.) lähde:Wikipedia

Kuvalle on monta mahdollisuutta saada oma URL, mutta itse käytin tähän bloggeria. Kun olet saanut kuvan valmiiksi ja tallennettua, mene blogger-tilisi hallintapaneeliin ja valitse uusi teksti. Luo uusi postaus, jonne lataat juuri luomasi kuvan. Kun kuva on ladattu ja liitetty postaukseen, paina esikatselu painiketta, joka ohjaa sinut nimensä mukaisesti esikatseluun. Tätä kautta pääset klikkaamaan kuvaa niin, että se avautuu lopulta omassa ikkunassaan. Tästä ikkunasta, kopioi kuvan URL. Tämän jälkeen tallenna tämä uusi kuvallinen postaus. Sitä ei tarvitse julkaista.


3. Koodi
Nyt tarvitset enään html -koodin pätkän, mihin liität haluamasi kuvan URL -osoitteen sekä sen nettisivun osoitteen, jonne haluat kyseisen kuvan linkittää. Tässä tapauksessa se olisi minulla Strictly Style -blogin facebook sivu, eli http://www.facebook.com/strictlystylemrsv .
Koodi on seuraava:

<a href="sivu jolle tahdot linkin vievän"><img src="kuvasi url -osoite" /></a>

Eli ensimmäisten hakasien sisälle pistät sen sivun URL -osoitteen jonne haluat ihmiset johdattaa ja toisten hakasten sisälle sijoitat kuvasi URL -osoitteen, jonka sait ladattuasi ne bloggerin julkaisemattomaan postaukseen.


4. Kopioi koodi blogisi sivupalkkiin
Viimeistä viedään! Nyt menet takaisin blogger-tilisi hallintapaneeliin ja valitset sieltä "Ulkoasu" -painikkeen. Seuraavalta sivulta etsit oikealta sivupalkin kohdalta "lisää gadget". Sen myötä aukeaa uusi ikkuna, jota selaat alaspäin kunnes näät vaihtoehdon "HTML/ Java Script". Avaat kyseisen laatikon ja liität yllä näkyvän koodin, jonka olet täyttänyt haluamillasi osoitteilla. Omalla kohdallani lopullinen koodi näyttää tältä:

<a href="http://www.facebook.com/strictlystylemrsv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihMNgPRXxxVtAv7BSYfTbOhiacVHaS_ocu5XlLm0hPEQYlpFfREIjy-7TGhKBkv4F-uAIPDJSvY868ePAZnsy0wPWnF2bo2iZPZiiYhT6NsrUSc2XVM1myi7gJZfpiIixsa_LnPipSHN1l/s1600/ssonfacebook3.jpg" /></a>


Nyt linkkisi on valmis! Toista tämä prosessi niin, että teet saman jokaiselle sivulle, jonne haluat lukijasi helposti yhdellä klikkauksella löytävän.



Tässä siis ohjeet kustomoitujen "Seuraa blogiani" -kuvakkeiden tekemiseen. Toivottavasti ohjeet olivat selkeät ja te kaikki voitte halutessanne tehdä juuri sellaiset seuraa -kuvakkeet kuin haluatte.
Inspiroivia hetkiä teille seuraa -painikkeiden luomisessa! :)


Hi guys! Here is a quick and easy step by step guide how to make your own customized "follow me" -buttons for you blog. The process consists of 4 easy steps:

1. Create the picture you want to use
2. Figure out the URL of your picture
3. Fill in a small piece of code
4. Copy paste the code to your blog's side banner

This is very easy and simple to do. In Finnish I go through each step in detail, so plase let me know if you wish me to recreate these steps in English as well? It's a great way to personalize your blog and tidy it up a bit from all the various follow me -buttons. Hope you get something out of google translator, if you don't, let me know and I'll make this in English too.
Have fun creating your buttons!:)

16 comments:

  1. Hih, tulipa juuri sopivasti! :) Ajattelin juuri muutama päivä sitten tätä asiaa "Kuinkahan Mrs. V on saanut nuo painikkeet luotua noin"! :D Eli kiitos, kun jaoit vinkin meidän maallisten kanssa, jotka eivät tietotekniikassa taidoillaan paljoa tuulettele ;D Tällaiset "vinkit bloggaajille" ovat aina tervetulleita! :)

    ReplyDelete
  2. Oli hyvät ohjeet, kiitos! Jaksoin jopa lukea ne loppuun asti, mikä on minulle, jolla on 3-vuotiaan kärsivällisyys, harvinaista. :D Se jää nähtäväksi, koska saan aikaiseksi askarrella napit, mutta to do -listalle meni ainakin!

    ReplyDelete
  3. hei menee kyl ohi aiheen mut kuitenki.. niin oliko sulla tai onko sulla joku mustahihnanen rannekello (oisko guess ollu?), en ainakaa piiiitkää aikaa oo nähny sitä asukuvissa tai muissa ni jos et sitä käytä ni oisikko sä halukas sitä myymään? :)

    -Riina

    ReplyDelete
  4. Toi sun sivupalkki on kyllä muutenkin sillisalaattia pelkästään kaikkien mainoksien takia :/

    ReplyDelete
  5. Mielestäni sinun olisi kannattanut käyttää bannerisi Strictly Style fonttia myös painikkeissa, näin kaikki olisi näyttänyt vielä yhtenäisemmältä!

    ReplyDelete
  6. Kara M,
    Tosi mukavaa jos joku sai tästä jotain irti, meni nimittäin hetki tätä tehdessä!:)

    Norppa,
    Todella ihana kuulla, että oli tarpeeksi selkeästi kirjoitettu!:) Hienoa, pitää tulla kurkkimaan mitä sait aikaan! :)

    Riina,
    Kyllä se aina välillä on päällä, vaikka kultaista kelloa suosinkikn :) Eli ikävä kyllä en ole kelloani myymässä :)

    Anonyymi,
    Myös mainosten takia on hyvä yrittää siivota niitä kohtia mitä voi, jotta olisi mahdollisimman selkeää :)

    Anonyymi,
    Kokeilin sitä, mutta se ei toiminut ulkonäöllisesti, koska silloin siitä ei tarpeeksi helposti erottunut, että kyse on eri napeista. Nopealla silmäyksellä näytti, että sivussa luki vaan Strictky Style 6 kertaa :)

    ReplyDelete
  7. Mikä ihme teitä joitain vaivaa? Blogisti jakaa ystävällisesti neuvoja, miten tehdä omat painikkeet ja te jotkut vaan inisette turhista. Hävetkää. Miettikää välillä vähän mitä sanotte. tässä sana anonyymilta anonyymeille.

    ReplyDelete
  8. Moikka:) Ensinnäkin, aivan ihana blogi ja tyyli! Kiitos kun jaksat kirjoittaa! Minä se panikoin pian koittavia häitäni täällä ja häitä varten on hakusassa hyvä hiustenpidennysten ja kampauksen tekijä samoin meikkaaja Helsingistä. Voisitko suositella Stage 11:sta jotain tiettyä kampaajaa laittamaan minulle ekat pidennykset? Entä osaisitko neuvoa laadukasta meikin tekijää? Ja kai ne rakennekynnetkin pitäisi saada. Tuntuu et olen aivan uponnut työhön ja arkeen, ja kaikki tärkeät kauneusjutut retuperällä... Tämä blogi onneksi tsemppaa siihen. Mukavaa syksyä sinulle ja kiitoksia tosi paljon mahdollisesta avusta jo etukäteen!! :)

    ReplyDelete
  9. olet aina niin ihana kun jaksat neuvoa! :)

    ReplyDelete
  10. Anonyymi,
    Voi ei hätää, kiitos paljon puolustuksestasi, mutta vahinkoa ei ole tehty :) Ihmiset kun keskittyvät eri asioihin :) Mutta kiitos kun ymmärrät vaivannäköni päälle!:)

    anonyymi,
    Hei! Oih, ihania aikoja! <3 laitako mulle mailia, kun en viitsi julkiseen ympäristöön nimiä laittaa? :) en edes etunimiä. Maili on stictlystylemrsv@gmail.com, toivottavasti voin auttaa sinua edes hieman eteenpäin!:)

    anonyymi,
    Kiitos ihan huimasti siitä, että arvostat vaivannäköäni <3

    ReplyDelete
  11. Oot kyllä ihan super ihana kun jaksat nähdä vaivaa ja teet tällaisia vinkkejä muille bloggareille <3 Kiitos siis superisti!! Oon monesti miettiny miten oot saanu nuo;) Täytyykin laittaa nyt omat työnalle:)
    Haleja kaunis <3

    ReplyDelete
  12. Kiitos, tästä oli apua! :) Nyt blogissani on kivat Seuraa-painikkeet.

    http://kisstherain-p.blogspot.com/

    ReplyDelete
  13. Miten muuten sait ne noin lähekkäin toisiaan? :) En itse millään onnistu siinä...

    http://kisstherain-p.blogspot.com/

    ReplyDelete
  14. Mutta miten saan laitettua nuo ihan valmiit kuvakkeet että esim "seuraa bloglovinin kautta"? Pitääkö ne valita joistain asetuksista, vai miten??

    ReplyDelete
  15. voisitko neuvoa yllä olevan? kiitos paljon etukäteen. olisi todella aterpeellista.

    ReplyDelete
  16. Kiitos paljon vaivannäöstäsi! :)

    Itseäni on ottanut päähän nuo eri sivustojen rumat/yhteensopimattomat kuvakkeet ja olen etsinyt oman kuvakkeen teolle ohjeita kissojen ja koirien kanssa. Nyt löytyi hyvät ja selkeät ohjeet :)

    ReplyDelete

Hei kaikki mahtavat!
Muistutuksen sana:
Blogini keskittyy vain hyvin pinnallisiin asioihin, enkä yksityiselämääni tässä julkisessa ympäristössä halua käsitellä. Tästä syystä kaikki henkilöllisyyttäni/yksityisyyttäni käsittelevät kommentit tulen poistamaan suoralta kädeltä. Kiitos ymmärryksestänne ja mahtavista kommenteistanne!:)