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

28 kommenttia:

  1. Ei toimi. Mistä johtuu?

    http://polkuapitkineteenpain.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Ikävä kyllä en pääse katsomaan blogisi lähdekoodista ongelman mahdollista syytä, koska olet laittanut blogiisi sen right click disabled tms. jutun :/

      Poista
  2. Hei mulla olis kysymys, ei tosin liity tähän mutta kumminkin. Mulla on jo hetken ollu toi kustomoitu navipalkki blogissa, tää mistä säkin olit postauksen viimeks tehny. Mitenköhän saisin linkkien väliin valkoiset pystyviivat? Siis erottamaan niitä linkkejä. Onko jotain koodia millä borderin saa vaan sisäväleihin vai pitääkö mun erikseen estää se sitten siitä reunimmaisesta?'

    http://www.goodvibesblogi.blogspot.fi/

    VastaaPoista
  3. Osaisitkohan neuvoa miten suosituimpien tekstien kuvat saisi pyöreiksi ja niihin numerot? Hyviä ohjeita blogissasi ja olen itsekkin montaa käyttänyt :)

    VastaaPoista
    Vastaukset
    1. Kiva, että on ollut apua! Suosituimpien tekstien kuvat saa pyöreiksi tällä koodilla:
      #PopularPosts1 img{
      border-radius: 50px;
      padding:px;
      }

      Poista
    2. Numeroiden saaminen on vaikeampi juttu, teen niistä joskus ihan oman postauksen :)!

      Poista
    3. Kokeilin tota koodia, jola saa suosituimpien tekstien kuvat pyöreiksi ja toimi mutta, blogissamme on useampi "suosituimmat postaukset" kohta, viikon luetuimmat, kuukauden luetuimmat ja kaikkien aikojen luetuimmat. Koodi toimi vain kuukauden luetuimmat kohdassa? miten saisin toimimaan kaikissa kolmessa kohdassa?

      www.uskomattomiaunelmia.blogspot.fi

      - Niina

      Poista
    4. #PopularPosts2 img{
      border-radius: 50px;
      padding:px;
      }

      &

      #PopularPosts3 img{
      border-radius: 50px;
      padding:px;
      }

      koitas noilla :-)

      Poista
  4. Tiedätkö onko koodia millä kuvan saisi piiloon eli kun siitä kuvasta sitten painaa niin pääsee kattoo kuvan. Ei herkille tarkoitettu kuva. Yritin kattoo googlesta,mutta en löytäny mistään.

    VastaaPoista
    Vastaukset
    1. Ööö siis pääsisi jollein toiselle sivustolle(ko?). Auttaisikohan tämä:
      http://blogikoodeja.blogspot.fi/2013/10/kuvagadget-josta-paasee-johonkin.html
      Kopsaa tuolta tuo gadgetiin tarkoitettu koodi ja jos siis haluat lisätä kuvan postaukseen, lisää tuo postauksen luonnoksen HTML-osioon :-)

      Poista
  5. Tiedätkö mitään koodeja wordpressiin?

    VastaaPoista
    Vastaukset
    1. Wordpress on mulle täysin vieras paikka enkä tiedä yhtään, onko siellä samat metodit koodeissa kuin täällä :c Kannattaa varmaan googletella!

      Poista
  6. Moikka! Mulla on ongelmia välilehtien ylimääräisten viivojen kanssa. Käytin tän postauksen ( http://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html ) koodeja niin sain noi viivat linkkien välistä ja alta pois, mutta tohon ylös ja sivuille jäi tollanen harmaa viiva. Miten sen saisi pois? :(

    Myös se oli ärsyttävää, että kun vaihdoin sivun taustakuvan niin koko blogin värimaailma muuttui. Argh, pystyykö sitä jotenkin estämään... ?

    Kiitos tästä blogista, olen saanut paljon apua postauksistasi!

    http://punainenvaltakunta.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Hei!
      Kokeile ongelmaasi 1) näitä koodeja:
      .tabs-inner .section:first-child {
      border:none;
      }
      .tabs-inner .section:first-child ul {
      border:none;
      }

      Ja ongelman 2) voi välttää lisäämällä taustakuvan manuaalisesti. Tässä koodi siihen:
      body {
      background: url(TÄHÄN KUVAN HTTP-OSOITE);
      }

      2)-kohta edellyttää kuitenkin sitä, että olet ladannut taustakuvaksi haluamasi kuvan johonkin online-kuvapalveluun (flickr, photobucket jne.)

      Poista
    2. Kiitos paljon! Ensimmäinen kohta toimi! Kokeilen tuota taustakuva juttua ensikerralla kun vaihdan sen taas. Kiitos avustasi :)

      Poista
  7. Heippa!

    Mulla on ollu jo pitkään blogissani semmoinen ongelma että kun klikkaa blogin arkistoista jotain kuukautta tai kommentti osiota tekstin alle ilmestyy musta viiva enkä saa sitä pois. CSS kohdasta olen koittanut katsoa mutta en sitä ole sitä kautta pois saanut. Osaisitko sanoa miten voisin tuon viivan ilmestymisen estää? :)

    Olen saanut tosi paljon apua sun blogista ja toivoisin että voisit tässä asiassa minua auttaa :)! Hyvää kesää sulle :)



    http://flowingspace-iris.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi Iris! Kokeile tätä koodia:
      a:hover{
      text-decoration: none;
      }

      Hyvää kesää sinullekin :-)!

      Poista
  8. Moikka! Miten saisin tasattua blogin tekstin molemmista reunoista? yritin etsiä ohjetta blogistasi mutten löytänyt. Kiitos jo valmiiksi jos pystyt auttamaan :)

    http://juli-aaa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Mooi! Tekstin voi tasata tällä koodilla:
      .post-body{
      text-align: justify;
      }

      Poista
  9. Moikka! Kyselisin jos tietäisit koodia, että miten saan blogitekstiä levennettyä kuvien kanssa samaan leveyteen?

    VastaaPoista
    Vastaukset
    1. Tsekkaa, oisko tästä postauksesta apua:
      http://blogikoodeja.blogspot.fi/2015/01/tekstin-ja-kuvien-alkaminen-samasta.html

      Poista
    2. Se ei valitettavasti toimi... Jos ehdit käydä katsomassa mun blogia jossain vaiheessa niin näet miten teksti käyttäytyy?http://theworldofnon.blogspot.fi

      Poista
    3. Okei, en oo iha varma, toimiiko tää sun ongelmaasi, mutta kokeile tätä koodia:

      .post{
      width: 1300px;
      }

      ja muokkaa lukua 1300 :)

      Poista
  10. Öö mulla ei toiminu muutako sillain päin kun laitoin koodit niin että kun sanoit että ei näin vaan näin, niin laitoin niin kun ei saanut laittaa niin toimi.. :D Jos tajusit :)

    VastaaPoista
    Vastaukset
    1. Okei, hassua tosin mutta kerran sait toimimaan niin :D

      Poista
  11. Kokeilin tuota pyörähdys-koodia ja laitoin sen aivan ohjeiden mukaisesti CSS:ään. Tallensin ja kävin katsomassa, mutta someikonit olivat edelleen paikoillaan. Mistä voisi johtua? :/

    Mistä johtuu myös se, että olen laittanut monta koodia CSS:ään ja tallentanut joka kerta, mutta nyt kun menin laittamaan tuota kyseistä koodia, niin nyt se palkki oli aivan tyhjä? :o Muokkaukset ovat kuitenkin säilyneet blogissa, mutta jostain syystä uudet muokkaukset eivät enään toimi. Tämän someikoni-jutun lisäksi yritin laittaa niitä nuolia "Uudempi teksti" ja "Vanhempi teksti -linkkien kohdalle.

    Toivottavasti ymmärsit ja osaisit edes jotenkin auttaa, laitan vielä blogin linkin tähän alle. :-)

    https://adaemmimaaria.blogspot.fi/

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)