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.

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