Heippa! Tänään kerron teille koodin, joka poistaa blogista navigaatiopalkin, mutta kun hiiren vie blogin yläreunaan navigaatiopalkin paikalle, se ilmestyy. Hah, olenpa hyvä selittämään näitä asioita :D
Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:
#navbar-iframe {
opacity: 0.0;
filter: alpha (opacity = 0, FinishedOpacity = 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
#navbar-iframe:hover {
opacity: 1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}
Koodi on "liukuva", eli navigaatiopalkki ei tule esiin töksähtäen, vaan transition-efektinä.
torstai 7. tammikuuta 2016
keskiviikko 6. tammikuuta 2016
Suosittujen tekstien (Popular posts) eteen numero
Heippa! Tänään kerron teille, miten saatte bloginne suositut tekstit numeroitua. Alla havainnollistava kuva.
Ihan ekaksi, sulla pitää olla Suositut tekstit -gadgetti blogissasi. Jos sulla ei sellaista vielä ole, mene Ulkoasu -> Lisää gadget -> Suositut tekstit. Sieltä sitten ruksitat itsellesi mieleiset vaihtoehdot.
Tämän jälkeen mene Malli > Mukauta > Lisäasetukset > Lisää CSS. Lisää alla olevat koodit (violetilla) boksiin. Äläkä pelästy, vaikka koodit näyttävät heprealta - avaan teille koodin kustomointimahdollisuuksia :)
#PopularPosts1 h2{
margin-bottom:0px;
font: 20px black;
font-family: corbel;
font-weight: bold;
text-align:center;
}
Nyt on kyseessä h2 eli gadgetin otsikko. Punaisella olevat arvot ovat otsikon fonttiin liittyviä: 20px on koko, corbel on fontti ja black on fontin väri. Voit muuttaa noita jokaista kohtaa, laittaa esimerkiksi 20px:n kohdalle 15px, muuttaa fontiksi handleen ja muuttaa värin heksakoodimuotoon (#). Täältä löydät värejä ja täältä bloggerin lukemia fontteja. Jos haluat boldata eli lihavoida otsikon, pidä tuo pinkillä värjätty rivi, mutta jos et halua boldausta, poista rivi koodista. Center taas kertoo, että otsikko on keskellä - jos haluat otsikon vasempaan reunaan, laita centerin tilalle left ja jos haluat sen oikeaan reunaan, laita centerin tilalle right.
#PopularPosts1 ul{
counter-reset:li;
padding:10px;
}
Tästä koodinpätkästä ei kannata mitään muuttaa, mutta jos haluat kokeilla, voit muuttaa paddingin arvoa 10.
#PopularPosts1 li{
width: 250px;
}
Voit muuttaa widthiä eli widgetin leveyttä mieleiseksesi.
#PopularPosts1 ul li{
position:relative;
display: block;
padding: 0.6em 0.2em 0.6em 2.1em;
margin: 0.5em 0;
background: #F3F3F3;
border-radius: 0.7em;
transition: all 0.3s ease-out;
}
Punaisella oleva heksakoodi on värikoodi, joka määrää widgetin taustan värin. Tässä esimerkissä #F3F3F3 vastaa vaaleanharmaata. Täältä voit lukea lisää blogin tekstin väreistä.
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: static;
top: 50%;
margin: -1.4em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 18px;
color: white;
background: black;
border: 0.2em solid #fff;
box-shadow: 2px 3px 5px grey;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left:0;
transition: all 0.3s ease-out;
}
Tämä koodi on itse "numeropallojen" kustomointia varten. Vihreällä olevaa numeron kokoa voi muuttaa: mitä isompi luku, sitä isompi numero. Colorin arvo white kertoo numeron värin, joka siis on tässä koodissa (ja postauksen alun kuvassakin näkyy) valkoinen. Boldattu black kertoo numeron taustan eli mustan.
#PopularPosts1 ul li:hover{
background: lightgrey;
color:white;
}
Tämä koodi kertoo, miltä gadget näyttää, kun hiiri viedään päälle. Ylhäällä oleva kuva havainnollistaa tätä hover-efektiä (ympäröity punaisella). Koodin sininen lightgrey kertoo siis, että hiiren vietäessä päälle tausta muuttuu vaaleanharmaaksi eli vähän tummemmaksi kuin koodin #f3f3f3. Punainen white taas kertoo, että itse teksti muuttuu mustasta vaaleaksi.
#PopularPosts1 ul li a{
font: 17px corbel;
color: black;
display:block;
min-height:25px;
font-weight:bold;
text-transform: uppercase;
}
Tämä koodi taas pätee itse gadgetin tekstien otsikkoon (esimerkkikuvassa esim. Sidebar kuvat muokkaus). Punaiset arvot (17px corbel black) kertovat taas fontista - voit siis muuttaa tekstien otsikon väriä, kokoa ja fonttia. Pinkki font-weight on taas sama kuin ensimmäisen koodin sama rivi, jonka voi siis halutessaan poistaa, mikäli ei halua boldausta tekstien otsikkoon. Text-transformin arvo uppercase taas kertoo, että teksti on kirjoitettu CAPS LOCKILLA. Jos haluat otsikon olevan normaali (Esiin tuleva navbar eikä ESIIN TULEVA NAVBAR), korvaa uppercase sanalla capitalize.
***
Tää oli tässä, toivottavasti tästä oli apua :)!
Ihan ekaksi, sulla pitää olla Suositut tekstit -gadgetti blogissasi. Jos sulla ei sellaista vielä ole, mene Ulkoasu -> Lisää gadget -> Suositut tekstit. Sieltä sitten ruksitat itsellesi mieleiset vaihtoehdot.
Tämän jälkeen mene Malli > Mukauta > Lisäasetukset > Lisää CSS. Lisää alla olevat koodit (violetilla) boksiin. Äläkä pelästy, vaikka koodit näyttävät heprealta - avaan teille koodin kustomointimahdollisuuksia :)
#PopularPosts1 h2{
margin-bottom:0px;
font: 20px black;
font-family: corbel;
font-weight: bold;
text-align:center;
}
Nyt on kyseessä h2 eli gadgetin otsikko. Punaisella olevat arvot ovat otsikon fonttiin liittyviä: 20px on koko, corbel on fontti ja black on fontin väri. Voit muuttaa noita jokaista kohtaa, laittaa esimerkiksi 20px:n kohdalle 15px, muuttaa fontiksi handleen ja muuttaa värin heksakoodimuotoon (#). Täältä löydät värejä ja täältä bloggerin lukemia fontteja. Jos haluat boldata eli lihavoida otsikon, pidä tuo pinkillä värjätty rivi, mutta jos et halua boldausta, poista rivi koodista. Center taas kertoo, että otsikko on keskellä - jos haluat otsikon vasempaan reunaan, laita centerin tilalle left ja jos haluat sen oikeaan reunaan, laita centerin tilalle right.
#PopularPosts1 ul{
counter-reset:li;
padding:10px;
}
Tästä koodinpätkästä ei kannata mitään muuttaa, mutta jos haluat kokeilla, voit muuttaa paddingin arvoa 10.
#PopularPosts1 li{
width: 250px;
}
Voit muuttaa widthiä eli widgetin leveyttä mieleiseksesi.
#PopularPosts1 ul li{
position:relative;
display: block;
padding: 0.6em 0.2em 0.6em 2.1em;
margin: 0.5em 0;
background: #F3F3F3;
border-radius: 0.7em;
transition: all 0.3s ease-out;
}
Punaisella oleva heksakoodi on värikoodi, joka määrää widgetin taustan värin. Tässä esimerkissä #F3F3F3 vastaa vaaleanharmaata. Täältä voit lukea lisää blogin tekstin väreistä.
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: static;
top: 50%;
margin: -1.4em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 18px;
color: white;
background: black;
border: 0.2em solid #fff;
box-shadow: 2px 3px 5px grey;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left:0;
transition: all 0.3s ease-out;
}
Tämä koodi on itse "numeropallojen" kustomointia varten. Vihreällä olevaa numeron kokoa voi muuttaa: mitä isompi luku, sitä isompi numero. Colorin arvo white kertoo numeron värin, joka siis on tässä koodissa (ja postauksen alun kuvassakin näkyy) valkoinen. Boldattu black kertoo numeron taustan eli mustan.
#PopularPosts1 ul li:hover{
background: lightgrey;
color:white;
}
Tämä koodi kertoo, miltä gadget näyttää, kun hiiri viedään päälle. Ylhäällä oleva kuva havainnollistaa tätä hover-efektiä (ympäröity punaisella). Koodin sininen lightgrey kertoo siis, että hiiren vietäessä päälle tausta muuttuu vaaleanharmaaksi eli vähän tummemmaksi kuin koodin #f3f3f3. Punainen white taas kertoo, että itse teksti muuttuu mustasta vaaleaksi.
#PopularPosts1 ul li a{
font: 17px corbel;
color: black;
display:block;
min-height:25px;
font-weight:bold;
text-transform: uppercase;
}
Tämä koodi taas pätee itse gadgetin tekstien otsikkoon (esimerkkikuvassa esim. Sidebar kuvat muokkaus). Punaiset arvot (17px corbel black) kertovat taas fontista - voit siis muuttaa tekstien otsikon väriä, kokoa ja fonttia. Pinkki font-weight on taas sama kuin ensimmäisen koodin sama rivi, jonka voi siis halutessaan poistaa, mikäli ei halua boldausta tekstien otsikkoon. Text-transformin arvo uppercase taas kertoo, että teksti on kirjoitettu CAPS LOCKILLA. Jos haluat otsikon olevan normaali (Esiin tuleva navbar eikä ESIIN TULEVA NAVBAR), korvaa uppercase sanalla capitalize.
***
Tää oli tässä, toivottavasti tästä oli apua :)!
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 :)!
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! :)
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
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