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

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

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

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);
}

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