kevat2015_kurssit

Liitä blogiisi Google Analytics

Saat blogiisi helposti monipuolisen kävijätilastoinnin käyttämällä Google Analyticsiä. Aloita luomalla itsellesi Google Analytics -profiili osoitteessa www.google.com/analytics. Jos sinulla ei vielä ole Google-tiliä, voit luoda uuden tilin millä tahansa sähköpostiosoitteella. Analyticsin käyttö ei edellytä minkään muun Google-palvelun käyttöä.

Analytics-profiilin luonnin yhteydessä tarjotaan erilaisia ohjeita seurantakoodin asentamiseksi sivustolle, mutta voit sivuuttaa nämä ohjeet. Sinun tarvitsee vain ottaa talteen itse koodi profiilitiedoistasi.

Tämän jälkeen etsi blogisi hallintanäkymän työkaluvalikosta kohta Google Analytics.

Syötä Google Analyticsin seurantakoodi sille tarkoitettuun kenttään ja tallenna muutokset. Google Analytics alkaa välittömästi kerätä kävijätilastoja, ja analyysit niistä ovat nähtävillä Google Analytics -palvelussa seuraavasta päivästä lähtien.

Mainosta julkaisuasi tai sarjakuvablogiasi Sarjainfossa

Pienlehteilijä! Omakustantaja! Bloggaaja! Mainosta julkaisuasi tai sarjakuvablogiasi Sarjainfossa.

Sarjainfo on Suomen sarjakuvaseuran jäsenlehti, jota on julkaistu vuodesta 1972 lähtien. Sarjainfo on alan laajin erikoislehti Suomessa ja se palkittiin vuonna 2009 opetusministeriön myöntämällä kulttuurilehtien laatupalkinnolla. Lehti ilmestyy neljä kertaa vuodessa.

Pienlehti-ilmoituksen koko: 64 x 51 mm

Värilliset 300 dpi Mustavalkoiset (bitmap) 600 dpi

Hinta: 20 euroa/ mainos

Hintaan kuuluu 3 kk nettimainosta joko kvaak.fi tai sarjakuvablogit.com -verkkosivustolla. Kysy tarkemmat tiedot eri bannerien koosta!

Lähetä mainoksesi tai kysy lisätietoa os. info@sarjakuvaseura.fi. Liitä mukaan yhteystietosi ja laskutusosoite.

Mainosbannerin tekemisestä

Mainosbannerin tekeminen onnistuu helposti esimerkiksi photoshopissa näin:

1-Avaa photoshopissa uusi tiedosto (File–>New).

Määrittele kuvan resoluutioksi 72 dpi. Koko voi olla esim.

150×70 px (hyvä koko blogien sivupalkin bannereille)

ahokoivu02 234×60 px (perus pienen mainosbannerin koko, mm. kvaak.fi)

ahokoivu03 468×60 px (perus ison mainosbannerin koko)

Muita kokoja voi myös kokeilla, esim. 140×350 px

Koot siis pikselikokoina (pixels).

2- Copy/pastaa haluamiasi kuvia bannereihin. Avaa kuva jota haluat käyttää bannerissa. Valitse (rectangular marquee tool) joko koko kuva, tai osa sitä. kopioi kohta (Ctrl+c). Ota banneri esiin ja liitä kuva siihen (Ctrl+v). Kuvan kokoa voi muuttaa klikkaamalla oikeanpuoleisella hiirinäppäimellä kuvaa ja valitsemalla ”Free transform”. Hox! Pidä shift-näppäin pohjassa, kun muutat kuvan kokoa, niin kuva ei vääristy!

3-Jos haluat tehdä bannerista animaation, liitä usempi kuva banneriin. Kun copy/pastaat niitä, photoshop tekee automaattisesti jokaiselle kuvalle oman layerin. Ota animaatio-työkalu esiin (window–>animation). Työkalun alalaidassa on kuvake (duplicate selected frames), jota painamalla voi tehdä uusia frameja animaatioon. Voit muokata jokaista frame-kuvaa erikseen. Animaation nopeutta säädellään framejen alalaidassa olevasta pienestä nuolikuvakkeesta.

4-Kun banneri on valmis käy tallentamassa se (file–>save for web) tallenna banneri gif-muodossa.

Lisää koodia -alapalkin muokkailu

Tällä CSS koodilla siis saa muokkailtua alapalkkia

#footer {
background: url(”http://kuva.jpg”)
no-repeat bottom left;
height: 200px;
border-top: 1px solid #99CC00;
text-align: center;
color: #333;
font-size: 11px;
padding: 0 0 10px 0;
margin-top: 10px;
}

lisää koodia -border viivojen muokkaus

…niitä voi muokata seuraavalla CSS-pätkällä

#content {
padding: 10px 0;
background: none;
}

.articles {
border-top: 1px solid #99CC00;
}

#content .showtags {
background: none;
padding-left: 5px;
line-height: 20px;
border-bottom: 1px solid #99CC00;
border-top: none;
}

Miten saat lukijoita blogiisi (ja sarjakuvillesi) -hyvin lyhyt oppimäärä

Liitä blogisi mm. Blogilista.fi sivustolle, josta lukijat löytävät sen helpommin.

Tee bannereita nettisivustoille. Esim. kvaak.fi. Vaihda bannereita kavereittesi kanssa, niin että he mainostavat sinun sivuasi ja sinä heidän.

Tee flyereitä, pieniä mainoksia, blogistasi. Jaa niitä esim. sarjakuvafestivaaleilla tai kysy jos voit jättää niitä jakoon kirjakauppoihin tai kahviloihin.

Laita mainoksia alan lehtiin ja nettisivuille. Mm. Sarjainfo tarjoaa mainostilaa pienlehteilijöille ja blogittajille.

Tee sarjakuvasi tutuksi: Tee pienlehtiä ja myy niitä sarjakuvafestivaaleilla (muista liittää lehtiin aina blogisi osoite!), tai tee sarjakuvia Kvaak.fi sivuston haasteisiin tai Nettinarttuun.

Ota osaa sarjakuvakisoihin (mm. Kemin sarjakuvakisa ja Sarjakuvantekijät ry:n Sarjis-kisa).

Tarjoa töitäsi kaikkialle, esim. Kuukauden kotimaiseksi Ilta-sanomiin, tai Sarjakuva-automaattiin Mbariin!

Muista aina tehdä pieni mainos blogistasi kaikkiin pienlehtiin ja muihin sarjakuviin mitä teet.

Bonuslinkkejä:

-Twitter Twitterissä pystyy hyvin seuraamaan muiden sarjakuvantekijöiden työkuulumisia ja voit tiedottaa omista tekemisistäsi helposti (esim. ”päivitin blogia” tai ”sarjakuviani  myynnissä Tampere kuplii -festivaaleilla”).

-Spreadshirt Voit perustaa oman kauppasi, jossa voit myydä kuviasi mm. T-paitoihin painettuina. HOX! En ole itse päässyt vielä kokeilemaan tätä paikkaa, joten en tiedä mitään sen laadusta. Kommentteja ja kokemuksia otetaan vastaan!

Ps. Lue myös Sarjainfon nro 142 artikkeli ”Kuinka markkinoida sarjakuvaasi ilman rahaa”.

Lisää vinkkejä saa kirjoittaa kommentteihin!

Kuvien lisääminen sivupalkkiin

Seuraavanlaisesti saat lisättyä kuvia sivupalkkiin:

1- Lataa kuvat media-arkistoon (media-> add new). Ota kuvan osoite talteen. (Hox! Kuva kannattaa olla maksimissaan 150-200 pikseliä leveä)

2-Lisää sivupalkkiin (Appearance–> sivupalkit) teksti-laatikko. Kirjoita laatikkoon seuraava koodi:

<img src=”http://kuva.jpg”>

Lisää kuvasi osoite koodiin http://kuva.jpg tilalle.

Tekstiotsikot saa piiloon lisäämällä custom CSS koodiin seuraavan pätkän:

/* Tekstiotsikot piiloon sivupalkissa */
.right h2 { display: none; }

ps. Jos kuva ei näy koita kirjoittaa ””-merkit normaaleiksi (shift+2) . Niissä voi olla joku outo tyylittely päällä.

mari01Jos haluat kuvaan linkin, käytä seuraavaa koodinpätkää:

<a href=”http://www.linkki.com”><img src=”http://kuva.jpg”></a>

CSS koodia

Tässä tämän sivuston CSS koodi, tehty white wash pohjalle. Kun tämän copy pastaa Appearance kohdan CSS-osioon, niin pääsee vähän alkuun oman blogin muokkailussa. Koodi siis löytyy klikkaamalla tämä postaus auki tuosta alhaalta.

Yläpalkin kuvan lisääminen

Näin saat esimerkiksi lisättyä blogin yläpalkkiin kuvan. Ohjeet on tehty käyttäen WhiteWash-pohjaa, en ole testannut miten ne toimivat muilla pohjilla. Kokeilkaa ja kikkailkaa koodin kanssa, sitä ei tarvi pelätä.  Toivottavasti näistä ohjeista on jotain hyötyä:

1. lataa kuva
Tee header kuva valmiiksi, ja tallenna se oikeaan kokoon. esimerkiksi 650×250 pikseliä olevan kuvan pitäisi asettua nätisti yläpalkkiin. Lataa sitten kuva blogiisi. Mene normaalisti osioon kirjoita –> Merkintä, ja lataa kuva sitä kautta (”lisää mediatiedostoja” tekstin vieressä oleva neliö).

kun kuva on ladattu kopioi kuvan linkki itsellesi

2. header img

voit siirtyä sitten pois blogimerkinnän kirjoittamisesta (sitä ei tarvitse tallentaa) kohtaan ulkoasu ja custom css

kirjoita css tiedostoon seuraava koodinpätkä:

div#header {
background: url(”http://kuva.jpg”)
no-repeat bottom left;
}


jossa http://kuva.jpg tekstin tilalle lisäät kuvasi linkin. voit siirtää kuvan paikkaa kirjoittamalla bottom left käskyn tilalle esim. bottom right.

paina nappia päivitä tiedosto. yläpalkin kuvan pitäisi nyt näkyä sivuillasi.

yläpalkin korkeutta ja palkin alapuolella olevaa viivaa voit muokata koodinpätkällä:

div#header {
height: 227px;
border-bottom: none;
}



3. otsikkotekstin piilotus

jos haluat automaattisesti sivulle tulevan otsikkotekstin piiloon, se tapahtuu seuraavalla koodilla:

#header h1 {
display: none;
}

4. otsikkotekstin muokkaus

jos haluat säilyttää otsikkotekstin ja siinä olevan linkin, mutta haluat muuttaa sitä tai siirtää sitä, se tapahtuu lisäämällä seuraavan koodin:

#header h1 {
font-size: 30px;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
padding: 190px 0 5px 0;
text-align: right;
}

#header h1 a {
color: #000033;
text-decoration: none;
}

#header h1 a:hover {
color: #000033;
text-decoration: underline;
}

#header h2 {
color: #000033;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 0;
letter-spacing: -1px;
line-height: 12px;
}

jossa ”header h1″ on yläotsikko, ”header h1 a” sen linkki ja ”header h1 hover” säätää, mitä linkille tapahtuu, kun siihen vie hiiren päälle. ”header h2″ on alaotsikko.

color: tällä voit muuttaa väriä. Värikoodeja löytää googlaamalla, tai jos sinulla on kuvankäsittelyohjelma, niin voit tarkistaa koodit sen kautta. Koodin pitäisi tunnistaa myös perusvärit kirjoittamalla ne englanniksi ”white” ”red” jne.

text-decoration: tekstiin tuleva ”koristelu”.
underline alleviivaa
none ei tee mitään koristeita


font-size: fontin koko
text-align: mihin teksti sijoittuu (left, right, center)