Multa pyydettiin tämän postauksen linkkiefektiä kaikkiin linkkeihin, joten toteutin sen mielelläni! Tämä oli helpoimmasta päästä, sillä pohjakoodi oli valmiina. Kyseessä on siis KAIKKIEN LIINKKIEN liukuvärjäytyminen väristä toiseen hiiren vietäessä päälle, eli hover-efekti.
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
Liitä sinne alla oleva koodi:
a:link {
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}
a:hover {
text-decoration:none;
color: #c9c9c9;
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-o-transition: 1.5s;
}
Linkkiä voi ja kannattaa muokata, etenkin värejä, jotta ne sopivat oman blogisi värimaailmaan. HTML Color codeista lisää tässä postauksessa. Myös feidaantumisaikoja (transition) kannattaa muuttaa. Koodin ekassa osassa (a:link) transitionit kertovat, miten kauan linkillä kestää palata normaaliin väriin ja muotoonsa, kun hiiri on viety sen päältä. Koodin toisessa osassa (a:hover) transitionit taas kertovat, miten kauan linkillä kestää feidaantua haluttuun väriin ja muotoon, kun hiiri on viety linkin päälle.
Toivottavasti saitte jotain selvyyttä! :-)
xoxo, iltsu
moi!
VastaaPoistaonko sellaista koodia, jolla saisi gadgettien väliin erotusviivan? :)
näyttäisi niin paljon siistimmältä ja helppolukuisemmalta jos semmosen sais!
kiva muuten kun jaksat täällä neuvoa avuttomia ;D
Moi! Kyllä, tai ainakin kehittelin sellaisen juuri :D
PoistaKiitos kovasti! Auttaminen on mulle niin sydämenläheistä, että teen tätä enemmän kuin mielelläni :-)!
Mutta tässä linkki postaukseen, jossa olisi kyseinen koodi: http://blogikoodeja.blogspot.fi/2014/03/divider-eli-erotin-gadgetien-valiin.html
Toivottavasti tuosta on apua!
kiitos paljon! :)
PoistaMun blogissa CSS koodit ei jotenkin toimi. Vaikka laitan ne juuri noin kuin sinulla ja kopioin ne kokonaisina. Mutta mulla toimii htlm koodit mutta en osaa niitä oikein käyttää..
VastaaPoistaOkei, olet luultavasti jossain välissä sörkkinyt HTML:ää lisäämällä SINNE koodin pätkää, jonka myötä kaikki koodit mallin suunnittelutyökalun CSS:stä ovat kadonneet eivätkä sinne laitetut koodit enää toimi. Se ei yllätä, sillä CSS ikään kuin pitää mykkäkoulua, kun bloggaaja käyttääkin sen sijasta HTML:ää.
PoistaTietääkseni tähän ei ole muita keinoja kuin mallin kokonainen vaihtaminen = kaiken aloittaminen alusta (siis jos haluat koodit toimiviksi CSS:n kautta). Jos kuitenkin haluat käyttää HTML:ää blogin muokkauksesta, tulisi koodit lisätä HTML:n CSS-osuuteen ja sieltä pitäisi vielä etsiä sopiva alaotsikko (tässä käy apuna englannin kielen jalo taito), jonka alle lisää koodinpätkän. CSS-muotoinen osuus HTML:stä löytyy, kun painat ctrl & F -painikkeita yhtä aikaa pohjassa, jolloin joko sivun alareunaan tai HTML-pohjaan ilmaantuu ns. hakupalkki, johon voit liittää seuraavan: /* Content
Contentin avulla pitäisi löytyä CSS-osuus.
Siinä on vaihtoehtosi - muuta en tällä hetkellä valitettavasti osaa neuvoa :( Toivottavasti tästä oli kuitenkin jotain apua :-)! Plus hyvää kesää sinne!