CATEGORIES

Customized “follow me” -buttons

13.11.2011

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=”http://3.bp.blogspot.com/-FI5RPOTrZyE/To6VKu2NJrI/AAAAAAAAQTI/bwJl95iURnw/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!:)

19 comments

Leave a Reply to Anonymous Cancel reply

Your email address will not be published.

*

  • Mahtavaa! Löysin googlella tämän tekemäsi ohjeen, ja nyt on minunkin blogissani kustomoidut napit :) Kiitos ohjeesta!

  • Anonymous

    Äh miksiköhän en pysty tossa esikatselussa klikata siitä kuvasta joten en saa sitä kuvan URL-osoitetta :-( ?

  • Minka

    Hei, noudatin ohjeita täydellisesti, mutta se ei toimi? En ymmärrä missä vika :(

  • Elina

    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 :)

  • Anonymous

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

  • Anonymous

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

  • Pauliina

    Miten muuten sait ne noin lähekkäin toisiaan? :) En itse millään onnistu siinä…http://kisstherain-p.blogspot.com/

  • Pauliina

    Kiitos, tästä oli apua! :) Nyt blogissani on kivat Seuraa-painikkeet.http://kisstherain-p.blogspot.com/

  • Mona

    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

  • Mrs. V

    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

  • Anonymous

    olet aina niin ihana kun jaksat neuvoa! :)

  • Anonymous

    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!! :)

  • Anonymous

    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.

  • Mrs. V

    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 :)

  • Anonymous

    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ä!

  • Anonymous

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

  • Anonymous

    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

  • Norppa

    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!

  • Kara M.

    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! :)