tiistai 20. lokakuuta 2015

Flickristä kuvat blogiin ilman Flickr-logoista mouseover-efektiä

Lue ensin, miten kuvat saa Flickrin kautta blogiin. Flickr on tosin uudistunut tuosta postauksesta hieman, mutta periaate kaikissa vaiheissa on tietääkseni yhä sama.

Eli jos lataat kuvia Flickrin kautta blogiin nykyisellä systeemillä ilman, että teet mitään muutoksia kuvakoodiin, kuva näyttää tältä, kun viet hiiren blogitekstin kuvan päälle:


Jos et halua tuota Flickrin mouseover-efektiä, toimi näin:
Kun liität kuvan koodia blogitekstin HTML-palstalle, poista siitä (koodin alusta) punaisella alleviivattu pätkä:



Sitten kuvakoodin pitäisi näyttää jotakuinkin tältä:


Tosi simppeli juttu, toivottavasti auttoi :)!

lauantai 5. syyskuuta 2015

Uudemmat ja vanhemmat -tekstien tilalle nuolet

Tällä haetaan siis tätä:



JA MITEN BLOGIIN?

1. Tee/lataa jostain kuvat (esim. nuoli), jotka haluat Uudemmat ja Vanhemmat -tekstien tilalle. Nuolia ilman taustaa löytää esimerkiksi Iconfinderistä hakusanalla arrow.
2. Lataa kuvat esim. Photobucketiin. Tässä postauksessa kerrotaan Photobucketista.
3. Mene Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:


.blog-pager-older-link:after {
content: url('TÄHÄN SE KUVA JONKA HALUAT VANHEMMAT TEKSTIEN TILALLE');
}


.blog-pager-newer-link:before {
content: url('TÄHÄN SE KUVA JONKA HALUAT UUDEMMAT TEKSTIEN TILALLE');
}

#Blog1_blog-pager-older-link{
color:transparent;
}

#Blog1_blog-pager-newer-link{
color:transparent;
}


4.  Tallennat & valmista tuli! :)

keskiviikko 15. heinäkuuta 2015

Mistä taustakuvia blogiin?

Alhaalla on linkkejä sivustoille, joista löytää taustakuvia blogiin. Kerron jokaisesta sivusta vähän jotain sille / sen kuville suosituksia tms. Kaikilta linkkaamiltani sivustoilta löytyy jatkuvia ja ilmaisia taustakuvia, mutten takaa, että jokainen sivun taustakuva olisi jatkuva ja ilmainen.

Subtle Patterns
- Helppokäyttöinen
- Yli 400 taustakuvaa

LeMog
- yli 3500 texturea eli tosi laaja valikoima
- suunniteltu lähinnä asuntojen ja alueiden mallinnukseen (laminaattilattia, kivetys jne.)

Vintage Backgrounds
-  Pieni mutta nätti valikoima

Tile-able Website Backgrounds
- Kaikki taustakuvat ovat jatkuvia

Päivitys 6.1.2016:

Patterns of change
- paljon erilaisia vaihtoehtoja

Vinkki! Valitessasi sopivaa taustakuvaa sen värisävyjä voi muuttaa sopiviksi jälkikäteen kuvanmuokkausohjelmalla, joten jos löydät muuten kivan taustakuvan, muttei sen värit miellytä, ongelma on korjattavissa!

*Lista päivittyy ajansaatossa

sunnuntai 21. kesäkuuta 2015

Mouseover efektejä some-ikoneihin

Lue ensin, miten saat someikonit blogiisi

Lisää tässä postauksessa olleen koodin yläpuolelle seuraava koodi:
<div class='someicon'>

ja alapuolelle tämä koodi:
</div>

Jolloin HTML/JavaScript-gadgetin pitäisi näyttää jotakuinkin tältä:

<div class='someicon'>
<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>

</div>

Jos sinulla on useita someikoneja, sisällytä ne kaikki divien sisään eli älä lisää ylimääräisiä uusia divejä. EI SIIS NÄIN:

<div class='someicon'>
<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>

</div> 

<div class='someicon'>
<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>

</div> 

<div class='someicon'>
<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>

</div> 

VAAN NÄIN
<div class='someicon'>
<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>

<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>
<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>
<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>  
</div>

Seuraavaksi mene Malli > Mukauta > Lisäasetukset > Lisää CSS:ään jokin alaotsikoiden allaolevista kaksiosaisista koodeista:

HAALENEMINEN

.someicon img:hover{
opacity:0.5;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.someicon img{
opacity:1;
transition: all 1s ease-out;
}

PYÖRÄHDYS

.someicon img{
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.someicon img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

KEIKKUVAT IKONIT

.someicon img {
transition: all 0.5s ease;
}

.someicon img:hover {
transform: rotate(30deg);
}
 

keskiviikko 10. kesäkuuta 2015

Sticky navigation bar

Mikä ihmeen sticky navigation bar?
Paikallaan pysyvä "linkkipalkki" / navigaatiopalkki blogin yläreunassa bannerin yläpuolella, kun blogia scrollataan alaspäin. Kyseessä on siis ikään kuin ylävälilehdet, jotka ovat normaalisti bannerin alapuolella. Alla oleva kuva toimii esimerkkinä:



Miten blogiin?

1. Ulkoasu > lisää HTML/JavaScript > laita tyhjään boksiin tämä koodi:

<div id="stickynavbar">
<ul>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
</ul>
</div>


Punaiselle tekstille tulee http-muotoinen linkki (esim. http://blogikoodeja.blogspot.fi/), jonne haluat sivun nimeä klikkaamalla pääsevän. Samalla rivillä mustalla lukevan tekstin tilalle tulee taas sivun nimi (esimerkiksi Etusivu, Instagram, Youtube, Blogin kirjoittajasta...), jota klikkaamalla halutun linkin taakse pääsee. Saattoi kuulostaa vähän monimutkaiselta, joten otetaan esimerkiksi pätkä koodia:

<li><a href="https://instagram.com/ilonameih/">INSTAGRAM</a></li>
<li><a href="https://www.youtube.com/channel/UCYZTBGCMzlyWI3Enw2IqHVQ">YOUTUBE</a></li>


Koodissa on tällä hetkellä viidelle linkille paikat. Jos haluat linkkipalkkiisi esimerkiksi 7 linkkiä, lisää koodiin kaksi seuraavaa riviä: <li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
 Pätkä(t) lisätään <ul> ja </ul> merkkien sisäpuolelle eli esimerkiksi aiemman samanlaisen koodinpätkän taakse. 

 2. Tallenna ja siirrä kyseinen gadgetti blogitekstien (vihreä) ja sivupalkin (kuvassa sidebar-right-1) yläpuolelle Ulkoasussa. Punaisella rengastettu on siis kuvassa kyseinen HTML/JavaScript-gadget, ja sen paikan tulisi olla siis kuvanmukainen.



3. Tallenna asettelut ja mene Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit (violetilla)

 .tabs-inner .widget ul {
background: black;
border: none;
text-align: center;

padding: 8px;
}


Musta black tarkoittaa navigaatiopalkin taustaväriä. Voit muuttaa sitä. Jos haluat navigaatiopalkin taustan olevan esim. valkoinen, laita sanan black paikalle white tai heksakoodiarvo #ffffff. Punainen 8 taas tarkoittaa navigaatiopalkin korkeutta / paksuutta. Voit muokata lukua haluamaksesi.

.tabs-inner .widget li a {
border: none;
font: bold 13px arial;
color: white;
}


Punaiseksi värjätty teksti tarkoittaa, että linkkipalkissa näkyvä teksti on lihavoitu, kooltaan 13px ja fontiltaan Arial. Jos et halua boldausefektiä, laita sanan bold tilalle normal. Voit vaihtaa myös tekstin kokoa muuttamalla lukua 13 ja fonttia laittamalla sanan arial tilalle jonkin toisen fontin.
Mustaksi värjätty teksti (white) tarkoittaa, että teksti näkyy valkeana. Jos haluat tekstin näkyvän esim. harmaana, laita sanan white tilalle grey tai väriä vastaava heksakoodiarvo. Voit siis tuosta koodista muuttaa linkkipalkin tekstiä.


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: grey;
background-color: transparent;
text-decoration: none;
}


Musta grey tarkoittaa tässä koodissa tekstin väriä, kun hiiri viedään sen päälle (hover). Koodissa se on harmaa, mutta voit muuttaa sitä.

.tabs .widget li, .tabs .widget li{
display: inline;
float: none;
}

#stickynavbar {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width:100%;
}



Lue myös,
heksakoodeista

Bannerini tausta on valkoinen, mutta lisätessäni sen blogiin tausta muuttuu harmaaksi. Mitä teen?

Vastaus: Olet luultavasti tallentanut kuvan .jpg-muodossa, jolloin blogger jostain syystä (en tiedä mistä) muuttaa valkoisen tautan usein harmaaksi. Tallenna kuva siis .png-muodossa.

Mutta miten vaihtaa tallennusmuoto .jpg:stä .png:ään?
1. Avaa tietokoneeltasi Paint. 
2. Avaa Paintiin bannerikuva, jonka taustan et halua muuttuvan harmaaksi viedessäsi sen blogisi ylälaitaan bannerin paikalle.
3. Tallenna kuva .png-muodossa. Alla oleva kuva havainnollistaa tätä vaihetta:


Lue myös,

Toivottavasti bannerisi valkoinen tausta näkyy nyt valkoisena eikä harmaana :)!

tiistai 9. kesäkuuta 2015

Sivut/välilehdet banneriin

*Postauksessa oletetaan, että olet lisännyt blogiisi ylävälilehdet eli sivut bannerin alle

Tähän ei tarvita HTML-koodin muokkausta, vaan homma hoituu näppärästi tutun ja turvallisen CSS:n avulla. Eli välilehdillä bannerissa tarkoitan tätä:


MITEN OMAAN BLOGIIN?

1. Tee bannerikuva, eli siis banneri, johon haluat "linkkipalkin" eli välilehdet. Minä tein esimerkkibanneriin valkoisen suorakulmion eli palkin, johon halusin laittaa välilehdet. Tältä tässä vaiheessa bannerini näytti:


2. Lisää banneri blogiisi. Jos et osaa lisätä banneria, lue tämä postaus.

3. Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit (violetilla):

.PageList {text-align:center !important;}
.PageList {text-shadow: 0px 0px 3px black  !important;}
.PageList {letter-spacing: 2px; !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList {margin-top: -347px !important;}
.PageList {margin-right: 70px !important;}
.PageList {text-transform: uppercase; !important;}

Jos haluat välilehtien tekstien taakse varjostukset, pidä koodin toisella rivillä oleva 3 ja black (voit muuttaa sen väriä esim. pink, grey, blue...) paikoillaan. Jos et halua varjostuksia, poista koko toinen rivi (.PageList {text-shadow: 0px 0px 3px black  !important;}) koodista. 
Tässä kuvat, miltä teksti näyttää ilman varjostuksia ja varjostuksilla:


(// pahoittelut, kuvat ovat jostain syystä erittäin epäselviä)

Kolmas rivi (.PageList {letter-spacing: 2px; !important;}) tarkoittaa letter-spacingia eli k i r j a i n t e n   v ä l i ä  toisistaan. Jos et halua väliä, laita numeron 2 paikalle numero 0. Jos haluat välin, voit katsoa, minkä numeron välistä tykkäät eniten. Kokeile esim. lukuja 1-5.

Neljäs rivi (.PageList {margin-top: -347px !important;}) kertoo välilehtien korkeuden eli sen, miten ylhäällä ne ovat blogissa, mille korkeudelle ne bannerissasi sijoittuvat. Voit muuttaa lukua -347 mieleiseksesi.

Viides rivi (.PageList {margin-right: 70px !important;}) kertoo sen, missä suhteessa välilehdet ovat reunoihin verrattuna, mutta samalla rivillä. Esim. ovatko välilehdet lähes keskellä vai täysin oikeassa reunassa. Lukua 70 voi taas siis muuttaa mieleisekseen.

Kuudes rivi (.PageList {text-transform: uppercase; !important;}) kertoo, että välilehtien teksti on CAPS LOCKILLA kirjoitettu. Jos haluat tekstin olevan "normaali", vaihda sanan uppercase tilalle none.

Lisäksi lisää CSS-boksiin seuraavat koodit:

.tabs-inner .section:first-child {
border:none;
}


.tabs-inner .section:first-child ul {
border:none;
}

 
.tabs-inner .widget ul {
background: none;
_background-image: none;
border:none;
}

.tabs-inner .widget li a {
display: inline-block;
font: 11px verdana;
color: #000000;
border:none; 
}

 11px tarkoittaa fontin kokoa - voit muuttaa kyseistä lukua. Verdana taas on fontin nimi, jonka voit muuttaa haluamaksesi esim. corsiva tai arial. Kuusi 0-numeroa taas kertovat fontin värin, joka on tässä tapauksessa musta. Voit muuttaa sitä haluamaksesi joko heksakoodeilla tai engl. kielisillä numeroilla. Blogin väreistä löydät postauksen täältä.


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: grey;
background-color: transparent;
text-decoration: none;
font-style: none;
}

Boldattu grey taas kertoo fontin värin, kun hiiri viedään tekstin päälle. Voit muuttaa sitä. 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:active {
background-color: transparent;
text-decoration: none;
font-style: none; 
}

***

Toivottavasti tästä oli apua! :)

sunnuntai 5. huhtikuuta 2015

Instagram gadget sivupalkkiin

Mikä on Instagram gadget?
- Se on blogin sivupalkissa oleva widget eli gadget, jossa esiintyy instagram-tilisi kuvia esimerkiksi slideshow'na eli ns. diaesityksenä. Postauksen lopussa on havainnollistava  kuva lopputuloksesta.

Miten blogiin?

1. Ihan ekaksi sun kannattaa mennä blogisi mallin suunnittelutyökaluun (malli -> mukauta) ja mennä siellä kohtaan "Säädä leveyksiä". Tarkista sieltä sivupalkkisi leveys (mulla esim. testiblogissani 360px niin kuin alla olevassa kuvassa näkyy).


2. Sitten kun tiedät blogisi sivupalkin leveyden, mene osoitteeseen http://snapwidget.com/ ja rullaa sivua alaspäin. Sinun pitäisi päästä seuraavanlaiseen näkymään:


3. Mitä mihinkin kohtaan?
Username = ig-käyttäjänimesi
Hashtag = jaa'a, itse jätin tyhjäksi :D
Widget Type = jos haluat diaesityksen, kannattaa valita Slideshow.
Thumbnail Size = tähän sivupalkkisi koko tai sitten sitä pienempi numero riippuen siitä, miten ison Instagram gadgetin haluat blogiisi.
Photo Border: Jos haluat gadgetille kehykset, paina yes, jos et halua kehyksiä, paina no.
Background Color: Gadgetin taustaväri, suosittelen itse valkoista eli ffffff.
Hover Effect: Kun hiiri viedään päälle, voit valita, haluatko jonkun efektin tähän gadgetiin: esim. haalenemis- tai tummenemisefektin.

4. Paina vihreällä pohjalla olevaa Get Widget, maalaa ja kopioi boksista koodi (minulla alla olevan näköinen):


5.  Mene blogissasi Ulkoasuun ja valitse Lisää Gadget. Rullaa alaspäin ja valitse HTML/JavaScript. Liitä tyhjään boksiin juuri kopioimasi koodi.



6. Tallenna ja valmista tuli :)

lauantai 4. huhtikuuta 2015

Kuviin mouseover-efektejä

Olenkin esitellyt teille jo mustavalkoisuusefektin tässä postauksessa. Nyt kerron teille kuitenkin muutaman kuvaefektin lisää, koska mouseover-efektit ovat olleet viime aikoina tosi kyseltyjä :)!

(Mikä ihmeen mouseover-efekti? Kun hiiren vie kuvan päälle, kuva muuttuu)

Nämä tämän postauksen koodit tuottavat kuvaefektin siis vain postausten kuviin. Ja kuten lähes aina, lisää koodit mallin suunnittelutyökalun CSS-boksiin (malli -> mukauta -> lisäasetukset -> lisää CSS)

HAALENEMISEFEKTI




.post-body img:hover {
opacity:0.2;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


BLURRAUSEFEKTI




.post-body img:hover {
filter: blur(5px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: blur(0px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


SEEPIAEFEKTI




.post-body img:hover {
filter: sepia(1);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


.post-body img{
filter: sepia(0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


LISÄÄ VÄRIKYLLÄISYYTTÄ


.post-body img:hover {
filter: saturate(200%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: saturate(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


LISÄÄ KONTRASTIA



.post-body img:hover {
filter: contrast(130%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: contrast(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


Mouseover banneri / kun hiiren vie bannerin päälle, banneri muuttuu

Tämä onkin vähän monimutkaisempi juttu, joten tämän postauksen suunnittelussa ja tekemisessä kului vähän enemmänkin aikaa. Mutta hei, siirrytään suoraan asiaan.

Mouseover banneri? Mikä se on?
Jos ette tämän postauksen otsikosta saaneet punaisesta langasta kiinni, mouseover banneri on siis banneri (mikä on banneri ja miten se lisätään blogiin -postaus), josta tulee erilainen, kun hiiren vie sen päälle. Alla esimerkkikuva siitä - viekääs hiiri kuvan päälle!



MITEN SAAT MOUSEOVER BANNERIN BLOGIIN?

1. Sinulla pitää olla kaksi samankokoista kuvaa - toinen kuvista on se, joka näkyy, kun hiiri viedään bannerin päälle ja toinen on se kuva, miltä haluat bannerin näyttävän silloin, kun hiiri ei ole bannerin päällä.

2. Lataa nuo kaksi kuvaa nettiin, esim. Photobucketiin.

3. Mene malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi:

#header{
display:none;
{


Kyseinen koodi poistaa blogisi headerin eli Ulkoasusta käsin laittamasi alkuperäisen bannerin. Älä pelkää vanhan bannerin katoamista, nimittäin bannerittomuuden tilalle saat pian vähän eri tavalla laitetun bannerin!

4. Seuraavaksi mene ulkoasuun. Paina Ylätunnisteen alla olevaa kohtaa "lisää gadget". Jos blogisi Ulkoasussa ylätunnisteen alla ei ole palkkia, jossa lukee lisää gadget, valitse sitten blogitekstit-ruudun viereisestä palkista "lisää gadget" -kohta ja paina sitä.


5.  Rullaa alaspäin ja valitse "HTML/JavaScript".


Lisää sinisellä rengastettuun boksiin tämä koodi:

<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>

Laita tähän blogisi osoite -kohtaan blogisi osoite http-muodossa, eli kopioi se selaimesi yläreunassa olevasta linkkipalkista.

EI siis näin: www.blogikoodeja.blogspot.fi
VAAN NÄIN: http://blogikoodeja.blogspot.fi/

Muistathan, että jos latasit kuvat Photobucketin kautta, kopioit kuvien URL-osoitteet kohdasta Direct. Täällä lisää tästä asiasta.

6.  Jos lisäsit tuon äskeisen HTML/JavaScript-koodin sivupalkkiin etkä ylätunnisteen alle, siirrä se nyt ylätunnisteen alle vetämällä.

7. Valmista! Sitten vain painat "Tallenna".

MOUSEOVER BANNERIN KESKITTÄMINEN

Lisää kohdan 5 koodin alkuun <center> ja loppuun </center>. Koodi näyttää siis tältä:

<center>
<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>
</center>

Toivottavasti toimii! :)

perjantai 3. huhtikuuta 2015

Kuvien muuttuminen mustavalkoisiksi hiiren vietäessä päälle

Tarkoitan siis sitä, että tämän postauksen koodilla blogin kuvasta, jonka päälle vie hiiren, tulee mustavalkoinen. Eli kyseessä on siis eräänlainen mouseover-efekti.
Jotta asia selkiytyisi, vie hiiri alla olevan kuvan päälle:



Ja miten tämän efektin sitten saa omaan blogiin?

Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}


 Tuo yllä oleva koodi tuo efektin kaikkiin blogin kuviin (banneri, sivupalkin kuvat, postausten kuvat). Jos haluat efektin vain postausten kuviin, toimi muuten samalla tavalla, mutta lisää äskeisen koodin tilalta tämä koodi:

.post-body img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}


Entä sitten feidaantumisefektillä?

Lisää edellä mainittujen koodien tilalta nämä koodit, jotka luovat hitaan, ns. liukuvärjääntymismäisen, siistimmän mustavalkoisuuden hiiren vietäessä päälle. Olenpas hyvä selittämään asioita :D


.post-body img {
filter: grayscale(1%);
-webkit-filter: grayscale(1%);
-moz-filter: grayscale(1%);
filter: grayscale(1%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.post-body img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

tiistai 27. tammikuuta 2015

Linkkien kursivoituminen hiiren vietäessä päälle

Eli on olemassa linkki, ja kun hiiren vie linkin päälle, teksti muuttuu kursivoiduksi. Blogiin kyseisen hover-efektin saa menemällä Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

a:hover{
font-style: italic;
}

Postauksen otsikon taakse taustakuva

Tässä postauksessa on ohjeet siihen, miten blogikirjoituksen otsikon taustalle saa taustakuvan. Esimerkki tästä alla:



1. Sulla pitää olla kuva, jonka haluat laittaa postauksen otsikon taustalle. Kivoja kuvia löytyy esimerkiksi Googlen kuvahausta, jota mäkin käytän, vaikka periaatteessa sieltä kuvien kopioiminenhan on laitonta.

2. Kopioi kuvan osoite. Muistakaa, että Photobucketissa osoite kopioidaan kuvan oikealla puolella olevasta boksista klikkaamalla kohtaa Direct.

3. Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.post-title{
background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
}


4. Valmista tuli! :)

sunnuntai 25. tammikuuta 2015

Tekstin ja kuvien alkaminen samasta kohdasta

Alla oleva kuva hahmottaa, mitä ajan tällä kertaa takaa:


Tästä tulee usein avunpyyntöjä - miten saisi blogikirjoituksen tekstin ja kuvat alkamaan samasta kohdasta? Minulla on teille tässä muutama ratkaisu kyseiseen ongelmaan.

1. TAPA: Tarkista, onko blogitekstisi kuvilla kehykset. Voit tarkistaa sen maalaamalla vasemmalla hiirellä blogitekstejäsi kuvineen päivineen ja katsoa, onko kuvien ympärillä jotain ns. ylimääräistä. Nuo kuvien kehykset saattavat olla läpinäkyvät, jolloin niitä ei voi ilman kuvan maalaamista havaita. 

Jos kuvissasi on kehykset, voit poistaa ne tällä koodilla, jolloin kuvien ja tekstin pitäisi alkaa samasta kohdasta (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
}


2. TAPA: Voit siirtää kuvaa lähemmäs tekstiä tällä koodilla (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img{
margin-left: -10px;
}


Lukua -10 voi muuttaa pienemmäksi tai suuremmaksi. Kyseistä lukua muuttamalla blogitekstin kuvat siirtyvät vasemmalle tai oikealle riippuen siitä, suurentaako vai pienentääkö lukua.

lauantai 24. tammikuuta 2015

Banneri näkyviin mobiiliversiossa

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.mobile .header-outer{
display:block;
}


Ja muuta ilmoitusasiaa:
Oon saanut nyt tänään 24.1.2015 vastattua useaan kommenttiin, mutta silti aika moni kommentti odottaa vielä vastausta. Vastaan niihin vastaamattomiin tässä muutaman viikon sisällä sen mukaan, miten mulla on aikaa :)! Muistakaa, että kysyä saa aina, mutta vastaamiseen vaan saattaa mennä aika kauan :/

lauantai 3. tammikuuta 2015

Kehystäminen / borderit halutuille kohteille

Tämä on ollut viime aikoina yksi toivotuimpia postauksia, joten here you go! Tässä postauksessa käsitellään kehystämistä (eli reunustamista, boksaamista, bordaamista, rajaamista... rakkaalla lapsella on monta nimeä!), erilaisia kehysvariaatioita ja kohteita, joihin kehyksiä eli bordereita eli bokseja whatever voi laittaa. Kyseessä on superpitkä ja toivottavasti myös kattava postaus, jotta mahdollisimman monet teistä tajuaa idean ja osaa hyödyntää postauksen oppeja myös käytännössä! Puheet sikseen, tämä postaus on muutenkin tosi pitkä.

***

Esimerkkejä kehyksistä blogissa:

a) Koko blogin kehystäminen


b) Sivupalkin jokaisen gadgetin kehystäminen erilleen toisistaan 



c) Blogipostauksen päivämäärän kehystäminen 




Lähes mitä tahansa blogista voi siis kehystää.  
Koska kyseessä on laaja aihe, on hyvä käydä vielä tähän alkuun CSS-koodin periaate läpi. Jotkut harvat teistä ehkä muistavat tämän postauksen, jossa käsittelin koodaamisen alkeita ja CSS-koodin periaatetta. Siellä käytiin läpi, mikä osuus CSS-koodista on valitsin, mikä on ominaisuus ja mikä on arvo, ja vähän sitä, mitä kunkin määreen paikalle kuuluu laittaa. Tässä vielä siis CSS-koodin perusrakenne:
valitsin {    
ominaisuus:arvo;
}


Kun jotain asioita halutaan kehystää, pitää siis tietää valitsin (=se, mihin halutaan muutos - tässä postauksessa kehykset, esim. postauksen otsikko), ominaisuus (= mikä muutos) ja arvo (= millainen muutos). Tämä on oikeastaan sama kaikissa CSS-koodeissa. 

valitsin {
border: arvo;
}

Kehystämiskoodeissa ominaisuus on siis border, jos halutaan ns. boksata koko valitsin (esim. .post-title eli postauksen otsikko). Jos halutaan ikään kuin laittaa viiva postauksen otsikon alapuolelle, on ominaisuus muodossa border-bottom, eli halutun valitsimen alaosa. Valitsimia on runsaasti, joille voi asettaa ominaisuudeksi border. Jos taas haluttaisiin laittaa viiva halutun valitsimen (esim. se postauksen otsikko) yläpuolelle, olisi ominaisuus muodossa border-top. Tässä siis bordereiden ns. "muotoja":
border-top (valitsimen eli halutun määreen yläpuoli)
border-left (valitsimen vasen puoli)
border-right (valitsimen oikea puoli)
border-bottom (valitsimen alapuoli)
Nuo neljä muotoa yhdessä ovat sama asia kuin käyttäisi niistä pelkkää muotoa border. Nuo neljä "muotoa" ovat käteviä, jos valitsinta, esimerkiksi postauksen otsikkoa, ei halua kokonaan bordata, vaan haluaa laittaa esim. sen alle ohuen viivan. Pelkkää border-ominaisuutta on taas kätevä käyttää, jos haluaa sekä alapuolelle, yläpuolelle että vasemmalle ja oikealle puolelle samanlaisen kehyksen.
Jos siis haluaisi laittaa viivat esimerkiksi postauksen otsikon ala- ja yläpuolelle muttei sivuille (eli ei valitsimen vasemmalle ja oikealle puolelle), koodi olisi tällainen (huomatkaa, että arvon paikalla tulisi olla sen määreet, ei tuota sanaa arvo, eli tuo koodi ei toimi. arvot esitellään tässä postauksessa alempana):
.post-title {
border-top: arvo;
border-bottom: arvo;
}

Jos taas haluaisi boksata päivämäärän kokonaan, koodi voisi olla tällainen:

.post-title {
border-top: arvo;
border-left: arvo;
border-bottom: arvo;
border-right: arvo;
}

TAI tällainen:

.post-title {
border: arvo;
}

Nuo kaksi edellä mainittua koodia siis ajavat täysin saman asian, mutta kätevämpi on käyttää pelkkää ominaisuutta border noiden border-topien ja border-leftien sijasta tässä tapauksessa.

BORDERIN ARVOT

Nyt kun olemme tutustuneet jo lyhyesti valitsimeen ja border-koodin ominaisuuksiin, on kyseessä arvot, kolmas CSS-koodin rakenteen osa. Border-koodeissa borderilla on kolme eri arvoa: paksuus/koko (px-muodossa), ns. "tyyli" (en osaa selittää tarkemmin, selviää paremmin kuvaesimerkkien kautta) ja väri. Nuo kolme arvoa voivat esiintyä border-koodissa sekalaisessa järjestyksessä, mutta seuraavalla tavalla:

[alla siis postauksen otsikon kehystämisen koodi]

.post-title {
border: 3px solid #000000;
}

Arvojen järjestyksellä ei ole väliä - ne voi ilmoittaa tuossa järjestyksessä (koko-tyyli-väri) tai esimerkiksi tyyli-väri-koko tai esim. väri-koko-tyyli.

Tuossa koodissa siis borderin arvoja ovat 3px (paksuus) solid (tyyli, tarkoittaa tässä viivaa) ja #000000 (heksakoodimuotoinen väri, tässä postauksessa kerron CSS-koodien väreistä).
Borderin paksuutta, tyyliä sekä väriä voi muuttaa. Tuolla koodilla tulisi postauksen otsikkoon seuraavanlaiset kehykset:


Jos kehyksestä haluaisi pinkin/lilahtavan,  vähän ohuemman ja katkoviivamaisen, voisi kyseessä olla tämä koodi:

.post-title {
border: 2px dashed #F621E4;
}

Ja tuolla koodilla postauksen otsikon kehys näyttäisi tältä:


Borderin tyylit

Osaatte nyt käyttää px-lukuja eli muuttaa borderin kokoa sekä käyttää värejä heksakoodimuodossa (täällä heksakoodeja), mutta veikkaan, ettei moni tiedä vielä, mitä kaikkia tyylejä (kuten aiemmin tuli jo ilmi solid eli viiva ja dashed eli katkoviiva) voi bordereille laittaa. Siksi ohessa on kuva borderin tyyleistä nimineen blogitekstin päivämäärässä:



ESIMERKKEJÄ KEHYKSISTÄ BLOGISSA KOODEINEEN

Koko blogin kehystäminen:

.content-inner{
border: 2px solid grey;
}


Gadgetien (sivupalkin) kehystäminen:

.sidebar{
border: 3px dotted #0B0973;
}


Jokaisen gadgetin kehystäminen erilleen toisistaan (postauksen alussa, kuva b):

.sidebar .widget{
border: grey 4px double;
}


Katkoviiva postauksen otsikon alapuolelle:

.post-title{
border-bottom: 2px dashed grey;
}


Päivämäärän alapuolelle viiva:

.date-header{
border-bottom: solid 1px black;
}


Postauksen alapuolelle viiva:

.post{
border-bottom: 2px solid #FACE32;
}


Viiva gadgetien otsikoiden alapuolelle:

.sidebar h2{
border-bottom: 1px black solid;
}


Itse suosittelen laittamaan tässä postauksessa esittelemäni koodit mallin suunnittelutyökalun lisäasetuksien CSS-osioon.

***

Huhhuh, olipa pitkä postaus! Toivottavasti saitte tästä jotain irti! :)