keskiviikko 18. lokakuuta 2017

Persoonalliset someikonit blogiin

Olen halunnut muokata blogini ulkoasua jo hetken verran ja sain viimein aikaiseksi aloittaa projektin. Halusin aloittaa "kevyesti" eli lisäsin blogiini persoonalliset someikonit oikeaan sivupalkkiin. Näin blogiani ja somekanavia on helpompi seurata, sillä sivusta löytyy painike mm. Snapchattini seuraamiseen.
Ikonien lisäämisen piti olla helppo homma, mutta sain silti kulutettua projektiin aikaa liki 1,5 tuntia, sillä aina jokin oli pielessä enkä ollut tyytyväinen. Tyytyväinen en ole vieläkään ja muutan ikonit kunhan saan ladattua uudet kuvat Flickriin.

Tähän projektiin tarvitset seuraavat jutut:

  • Kuvat, jotka haluat lisätä ikoneiksi. Omani ostin Etsystä 3,26 euron hintaan ja ikoneja taisi tulla setissä yhteensä 40kpl.
  • Flickr/Photobucketin, jonne ladata kuvat. Itse käytin Flickriä, sillä se on minulle tutumpi.
  • Html-koodin pätkän, jolla saat ikonit näkymään oikein.
  • Html/Java-gadgetin blogiisi.
  • Hieman kärsivällisyyttä, sillä usein koodien kanssa kaikki ei aina onnistu ensimmäisellä yrittämällä.
Html-koodi, jonka tarvitset blogiisi on seuraavanlainen: 


<a href="Liitä tähän kohtaan sivuston osoite, jolle kuva käyttäjän vie (esim. Facebook)"_blank"><img src="Liitä tähän kuvan osoite eli esim. Flickr-osoite" border="0" /></a>

Koodeja tarvitset aina yhden per kuva eli kun itselläni on 5 erilaista kuvaketta, minulla on 5 koodia gadgetissani.


Itse lisäsin koodiin myös kuvan mittoja rajoittavat tekijät (height, width) eli silloin koodi näyttäisi tältä: 

<a href="Liitä tähän kohtaan sivuston osoite, jolle kuva käyttäjän vie (esim. Facebook)"_blank"><img height="40" width="40" src="Liitä tähän kuvan osoite eli esim. Flickr-osoite" border="0" /></a>

Tuolla koodilla kuvistasi tulisi 40 x 40 pikselin kokoisia eli niin kuin itsellänikin on. Mikäli kuvakkeesi ovat jo valmiiksi oikean kokoisia, voit unohtaa tämän.

Tällä tekniikalla olen omat ikonini sivupalkkiin laittanut. Toivottavasti ohje toimii teilläkin! Mikäli haluaisitte jatkossa nähdä lisää blogin muokkaamista koskevia helppi-postauksia niin toteutan niitä mielelläni! :)

5 kommenttia:

  1. Helppipostaukset on huippuja, kun alkaa omankin blogin ulkonäölle tapahtua jotakin! :) ja noi siun on tosi kivannäköset kyllä :)

    VastaaPoista
    Vastaukset
    1. Ikonit on kivat, mut haluisin ne välit noiden kuvien väliin ja se nyt vaan ei vissiin onnistu :D Täytyy siis toteuttaa enemmän näitä, kun onhan tässäkin blogissa kikkailtu vaikka mitä :)

      Poista
    2. Moikka, html-kielessä   tarkoittaa välilyöntiä, joten jos lisäät sen koodipätkien väliin pitäisi kuvien välille tulla tilaa :)

      Poista
    3. Nyt se näyttää sen tässäkin välilyöntinä, niin isketkö vielä sen tekstinä tähän jos jaksat! Tai siis koodin välien kanssa :)

      Poista
  2. Hahahaha, kylläpäs olin hölmö :) tässä: & n b s p ;

    VastaaPoista