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