Some-ikonit blogin sivupalkkiin

Postausta some-ikoneista toivottiin, joten otin toiveen kuuleviin korviini ja tadaa, tässä olisi postausta some-ikoneista. Kaikille sana ei välttämättä ole tuttu, joten havainnollistetaan some-ikoneja kuvan kanssa:

Some-ikonit ovat siis esimerkiksi blogissa toimivia kuvakkeita blogin sivupalkissa, ja yleensä kuvakkeita klikkaamalla pääsee johonkin sivuun, jonka logo on some-ikonissa. Esimerkkinä voisi mainita kysymysmerkin (joka voi johtaa esim. ask.fm:ään tai bloggaajan esittelysivulle tms.) tai Facebookin logon. 

MISTÄ SAA SOME-IKONEJA? 
Some-ikoneja saa netistä vaikka mistä, mutta ainakin ilmaisena niitä saa täältä eli iconfinderistä. Sivuston lisensseihin en ole perehtynyt eli en siis tiedä, saako kaikkia ikoneita käyttää vaikkapa blogissa. Lisensseihin perehtyminen todellakin on oma paheeni, mutta ei puhuta siitä nyt :-D

MITEN ICONFINDERIÄ KÄYTETÄÄN?
Iconfinder on omasta mielestäni simppeli ja helppokäyttöinen, mutta ihan varmuuden vuoksi ajattelin laittaa mielestäni tärkeimmät asiat tähän postauksen osaan kuvien muodossa.

Alla olevassa kuvassa on screenshot Iconfinderistä. Violetilla on ympäröity kohta, johon olen kirjoittanut englanniksi asian, josta olen halunnut some-ikonin. Punaisella ympäröity kohta on Free eli ilmainen, jolloin sivu on suodattanut  ainoastaan ilmaiset ikonit koneeni näytölle. Mikäs siinä, jos on valmis maksamaan ikoneista, mutta itse olen löytänyt Iconfinderistä paljon hyviä ikoneita ihan ilmaiseksi.

Seuraavassa alla olevassa kuvassa olen valinnut ikonin, jonka olen halunnut ladata koneelleni ja viedä myöhemmin blogini sivupalkkiin. Tärkeimmät asiat tuosta kohdasta olen ympäröinyt punaisella ja violetilla. Punaisella ympäröity kohta on kohta, josta painamalla saat kuvakkeen ladattua koneellesi. Violetilla olen ympäröinyt valittavissa olevat kokovaihtoehdot: useista ikoneista olen löytänyt laajat kokomahdollisuudet. Jos haluat monta ikonia ja ne blogisi sivupalkkiin, suosittelen valitsemaan koon 48 tai 64. Kokoa voi myös muokata ikonin ladattua esimerkiksi Paintissa.

MITEN SOME-IKONIN SAA BLOGIIN

1. Kun olet ladannut some-ikonit koneellesi, sinun pitää ladata ikonit jollekin nettisivustolle esim. Photobucketiin tai Flickriin. Tässä postaus Photobucketin kautta kuvan lataamisesta ja linkittämisestä (!! tärkeä !!)
2. Ulkoasu -> Lisää gadget -> Lisää HTML/JavaScript
3. Jos sinulla on monta some-ikonia, jotka haluat vierekkäin blogisi sivupalkkiin, tarvitset jokaiselle ikonille tämän koodin: <a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a> Sinun pitää laittaa kaikki koodit yhteen gadgettiin tai niin minä ainakin suosittelen. Alla oleva kuva havainnollistaa tätä juttua:

 Kuvassa on siis kolme koodia samassa gadgetissa. Koodit kannattaa erottaa toisistaan kahdella enterillä. Huomaa, että nettisivuston, jolle some-ikoni vie, pitää olla http-muodossa eikä www-muodossa, niin kuin kuvassa on !! Eli tässä muodossa: https://www.flickr.com/


4.  Sitten vain tallennat ja esikatselet, miellyttääkö some-ikonien järjestys, värit ja paikka sivupalkissa silmääsi. 

Toivottavasti tämä tekniikka toimii teillä! Ja jos ei toimi, ilmoitelkaa ihmeessä asiasta tämän postauksen kommenttiboksiin.

Vähän Photobucketista

Ajattelin tehdä Photobucketille ihan oman postauksen, jossa

kerron vähän siitä, mikä se on & miten kuvat saa sen

kautta ladattua esim. blogin gadgetiin TAI postaukseen.

kuva ladattu laittomasti googlen kuvahausta. kuvaa klikkaamalla pääset alkuperäislinkkiin.

Photobucket on kuvanlatauspalvelu, jonne siis voit

ladata kuvia. Omasta mielestäni Photobucket on kätevä,

nopea ja helppo ladata kuvia esimerkiksi gadgetiksi.

Yllä oleva kuva on Photobucketin etusivusta, kun käyttäjälle

on kirjaudutta sisään. Punaisella ympyrällä vedetystä alueesta klikkaamalla

voit ladata kuvan/kuvia.

NÄIN LATAAT KUVAT PHOTOBUCKETIIN

1. Olet Photobucketin etusivulla (yllä oleva kuva). Klikkaa "Upload".

2. Klikkaa "Choose photos and videos".

3. Aukeaa kuvakansiosi, ja valitse sieltä kuvat, jotka haluat ladata.

4. Kuvat latautuvat sivun alareunaan, ja sitten voit klikata

kuvaa, jotta näet sen alkuperäisessä koossa.

Ja tadaa kuvat on ladattu photobucketiin!

 MITEN KUVA GADGETIIN TAI POSTAUKSEEN?

Kun olet ladannut kuvan Photobucketiin, saatat halua

laittaa kuvan esim. blogin gadgetiin tai postaukseen. Alla olevan

kuvan ympäröidyssä laatikossa (Links to Share this photo) on koodit siihen.

Jos haluat laittaa kuvan postaukseen, klikkaa laatikon HTML-kohtaa, 

jolloin koodi kopioituu hiireesi. Sitten liitä se postauksen HTML-koodiin,

ja tadaa, pitäisi näkyä!

Jos haluat kuvan gadgetiin, mene ulkoasu -> lisää gadget ->

HTML/JavaScript. Kopioi Links to share this photo -laatikon

HTML-kohta niin kuin ylemmässäkin ohjeessa & liitä tyhjään

kenttään.

Jos sinun pitää kopioida kuvan linkki, ÄLÄ kopioi linkkiä selaimen

ylälaidassa olevasta "linkkilaatikosta" (en muista mikä se on

nimeltään, joku osoitekenttä tms.) sivun linkkiä, vaan Links to share this photo 

-laatikon Direct-kohta. Tätä taitoa tarvitaan esim. tässä ja tässä ohjeessa.

 KYSY IHMEESSÄ, JOS PHOTOBUCKETISTA ON JOTAIN KYSYTTÄVÄÄ! :)

xoxo iltsu

Kuvagadget, josta pääsee johonkin linkkiin, muttei sille tarvitse laittaa otsikkoa

Melko monille on tullut ongelmia kuvagadgettia lisätessään; gadgetille

pitäisi laittaa otsikko, jotta gadgetin voisi tallentaa. 

Tällä tavalla sinun kuitenkaan ei tarvitse laittaa gadgetillesi otsikkoa.
Tässä vielä linkki postaukseen, jossa käsittelen Photobucketia. 

1. Lataa kuvasi esim. Photobucketiin (itse suosittelen tätä). Jos sinulla

ei ole Photobucketissa tiliä, luo se. Tulet luultavasti hyötymään tilistäsi.

2. Blogger -> ulkoasu -> lisää gadget -> HTML/JavaScript

Lisää tyhjään kenttään alla oleva koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" /></a>

Punaiselle tekstille laitat kuvan osoitteen, jonne pääsee,
kun klikkaa kuvaa. Siniselle tekstille laitat

kuvan osoitteen Photobucketista.

3. Tallenna & Tallenna asettelu.

LISÄYS: MITEN MUUTAN TÄLLÄ TAVOIN LISÄTYN KUVAN KOKOA?

Toimi siis ihan samalla tavalla, mutta kohdassa 2 lisää tässä postauksessa aiemmin esitellyn koodin tilalle tämä koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" width="40px" height="auto" /></a>
 Vihreää lukua 40 voi muuttaa. Kyseinen kohta kertoo kuvan leveyden sivupalkissa.

Toivottavasti tämä toimi!

xoxo iltsu

Oikeaan alareunaan ilmaantuva "nuoli" sivua scrollattaessa alaspäin

En keksinyt tälle parempaa nimeä, sillä rehellisesti sanottuna en

tiedä, mikä tämän efektin nimi on. Osa teistä on kuitenkin

varmaan törmännyt blogeissa oleviin nuoliin, kolmioihin tms., jotka

ilmestyvät blogin oikeaan alareunaan sivua scrollattaessa alaspäin. 

Ja siitä kun klikkaa, sivu scrollautuu nopeasti ylöspäin.

JA MITEN SAAT BLOGIIN?

1. Sinulla täytyy olla kuva, mieluiten läpinäkyvällä

taustalla varustettu. 

2. Lataa se johonkin kuvapalveluun, vaikka Photobucketiin.

3. Ulkoasu -> lisää gadget -> HTML/JavaScript.

4. Lisää tyhjään kenttään alla oleva koodi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'  type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 14px; right:14px; cursor:pointer;font:14px arial;'><img src='www.kuvasikaunisosoite.fi' width="45px" height="55px"/></a>

5. Lisää kuvasi osoite sille tarkoitetulle paikalle. Pikselilukuja voit

jälleen kerran muokata mieleiseesi. Ne vaikuttavat kuvan

kokoon sekä marginaaleihin (miten kaukana kuva on esim. 

vasemmasta reunasta...).

6. Lopuksi tallenna! Suosittelen laittamaan kyseisen gadgetin

alimmaksi gadgetiksi, jotta juttu toimisi parhaiten.

xoxo iltsu