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

54 kommenttia:

  1. Tästä blogista on ollut tosi tosi tosi paljon apua! :) ♥ Sitä saa ihan uutta puhtia kirjoittamiseen kun blogi on sen näköinen kuin mitä itse halusi! Eli kiitos tästä ^^

    ♥ Sini | myblog-bysini.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Kiitos paljon, Sini! :) Hienoa, että tästä on ollut näin paljon apua!

      Poista
  2. Moikka! Olen muutamia juttuja yrittänyt blogiini saada/poistaa sieltä, mutta en vain onnistu millään kokeilemalla koodillani ja joitain muutettavia koodeja ei vain löydy HTMLstä? Haluaisin blogin alaosasta ne harmaat pallerot ja katkoviivan pois mutta tämä koodi ei toimi:

    .blog-pager {
    background: none;
    }

    Haluaisin myös keskittää sivugadgettien otsikot, ne on oudosti oikeassa reunassa? Tämä koodi ei toimi:

    .sidebar h2{
    text-align: center;
    }

    Olisin superkiitollinen jos osaisit auttaa! ♥
    http://m-stay-fresh.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Hei Marianne! HTML:stä pitäisi kyllä löytyä kaikki koodit, oothan availlut nuolia ollessasi Mallissa?
      Se, ettei lisäämäsi koodit toimi, johtuu todennäköisesti siitä, että a) olet tehnyt muutoksia suoraan HTML-koodiin etkä CSS:n kautta > blogger suuttuu tästä :D, en tiedä syytä tai b) jokin lisäämäsi koodi on ollut virheellinen. Suosittelen kopsaamaan CSS-boksin koodit ja vaihtamaan / uudelleenklikkaamaan mallia, jotta pystyt taas käyttämään koodeja. Kommenttiin liittämäsi koodit nimittäin ovat atm toimivia.

      Poista
  3. Moikka! Ei liity tähän, mutta olisin kysynyt apua :) Minulla on sellaiset katkoviivat gadgeteissa, osaisitko sanoa miten saisin loppupään häipymään sekä oikealta että vasemmalta alaspäin "pyöreäksi" , samalla tavalla kuin http://www.lillivoitto.fi :) Alla koodi, joka nyt blogissani.

    .sidebar h2{
    border-bottom: 2px dotted grey;
    }

    VastaaPoista
    Vastaukset
    1. Terve Ano! Ei haittaa vaikkei liitykään ko. postaukseen - apua saa silti pyytää ihan mistä asiasta vaan, eri asia tosin on, osaanko auttaa mutta aina yritän :D!
      Ikävä kyllä, tällä välillä bloggaaja ehti muuttaa ulkoasuaan. Tarkoititko kuitenkin tämän postauksen kuvissa esiintyvää kikkaa? Sellaiset saat muuttamalla tätä koodia:

      .sidebar h2{
      background: -webkit-linear-gradient(top,pink,white);
      background: -moz-linear-gradient(top,pink,white);
      background: -moz-linear-gradient(top,pink,white);
      padding: 9px;
      }

      Muokattavaa ovat nuo sulkujen sisällä olevat värit, jotka ovat koodissa siis pink (alkaa ylhäältä, liukuu valkoiseks) ja white.

      Poista
  4. Yritin eilen sekä tänään muokata blogin css-koodia. Aijemmin lisäämäni koodit eivät kuitenkaan näy kentässä ja "käytä blogissa"-nappi ei toimi laisinkaan!
    Olenko ainoa tämän ongelman kanssa? Mistäköhän vika voisi johtua?

    VastaaPoista
    Vastaukset
    1. Vaikken blogin ylläpitäjä olekaan, niin ne aikaisemmin lisätyt css-koodithan ns. katoavat sieltä "mukauta-mallia" laatikosta ja ovat näkyvissä "muokkaa html-koodia" kohdassa.
      Itsellä tuo käytä blogissa nappi ei toimi silloin, jos en ole tehnyt mitään muutoksia, tähän yleensä auttaa se, että muokkaan hetkeksi blogin linkkien väriä ja vaihdan sen heti takaisin.

      Toivottavasti en selittänyt turhan epäselvästi.

      Poista
    2. Kiitos vastauksestasi, Emilia! Kyseessä voi myös olla lyhytaikainen bugi tai sitten joku ristiriidassa oleva virheellinen koodi.

      Poista
  5. Tartteen nyt nopeasti apua! Mä ns. "toin" mun blogin, koska luulin että olin pilannut sen, ja nyt mulla on KAIKKIA postauksia kaksi! En mitenkään osaa korjata virheitä, mitä teín :( http://tia-smilinglife.blogspot.fi

    VastaaPoista
  6. Tai siis _kaikki_ postaukset ja _kaikki_ kommentit ovat tuplaantuneet, en tyiedä mitä ethdä :( Ota yhteyttä s.postiin:

    tiairmeli00@gmail.com

    VastaaPoista
  7. Moikka! Mulla ei toimi bloggeriin ei yksikään koodi, minä laitan... Mistä tämä voisi johtua? Tallennan, ja siirryn blogin puolelle, mutta yhtikäs mikään ei ole muuttunut! Apu mahdollisimman pian, kiitos :)

    VastaaPoista
    Vastaukset
    1. Tää on tosi yleinen ongelma, ja siihen yleisin ongelma on tämä: HTML-koodia on muokattu joko virheellisesti tai oikein ja blogger on suuttunut. En tiedä, mistä suuttuminen johtuu, mutta suosittelen toimimaan näin: lisäät joko kaikki koodit suoraan HTML-koodista käsin tai uudelleenklikkaat / valitset Mallissa uuden mallin, jolloin aiempaan malliin tehdyt muokkaukset (samassa myös siitä aiheutuvat bugailut) häippäävät.

      Poista
  8. Voisitko tehdä ohjepostauksen jossa näytät miten tällaisen ulkoasun saa tehtyä? Laitan ulkoasun linkin tuohon alle. :)
    http://kootussaravissa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Olen pahoillani, mutten lähde neuvomaan, miten jonkun toisen blogin ulkoasun saa kopioitua yhtä hienoksi. Voin kuitenkin neuvoa yksittäisissä asioissa (esim. miten jokin hover-efekti on tehty). En usko, että bloggaaja, joka on nähnyt paljon vaivaa luodessaan bloginsa ulkoasusta uniikin ilahtuu löytäessään tismalleen samannäköisen blogin, jossa on käytetty blogin suorakopiointia. Mitä juttuja haluaisit oppia linkittämästäsi blogista? :)

      Poista
  9. Mahtava sivusto! Olen saanut todella paljon neuvoja täältä oman blogin muovaamiseen, suur kiitos! :)

    http://vellajakumppanit.blogspot.fi

    VastaaPoista
  10. Moi! Tietäisitkö miten bannerin alla olevan ylätunnisteen "kehykset" saa pois? Kiitos jos ymmärrät, tässä blogini. :-). Puoliveripuskailua.blogspot.com

    VastaaPoista
    Vastaukset
    1. Moi! Löytyiskö täältä ratkaisu ongelmaasi?
      http://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html

      Poista
  11. Moi! Onko sulla mitään koodia, jolla blogin välilehdet saisi lähemmäs banneria? Siinä on semmoinen ruma iso väli jonka tahtoisin pois!

    milajasydney.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Tässä olis:
      .tabs-inner .widget li a {
      margin-top:-20px;
      }

      Lukua -20 voi muuttaa :-)

      Poista
  12. Moi! Tää blogi on tosi kiva ja siitä on ollut paljon apua mulle :) Nyt mulla kuitenkin on pieni ongelma. Aluksi sain lisättyä koodeja normaalisti ja lisäsinkin aika paljon. Nyt on käynyt silleen, että vaikka laitan koodin CSS-kenttään, ei mitään muutosta tapahdu blogissani :( Ne aluksi laittamani kyllä toimii (kuten otsikon ja pvm keskittäminen yms..)

    pinjajapikker.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Kiva kuulla, että oot saanut täältä apua :)! Luultavasti sulla on käynyt niin, että joku lisäämistäsi koodeista ei toimi oikein, mikä taas torpeedoi koko CSS-boksin toimivuuden. Voi myös olla, että olet käynyt lisäämässä HTML-koodiin jotain, mistä blogger ei jostain syystä tykkää, jolloin se mitätöi oikeudet lisätä mitään blogiin CSS:n kautta. Sulla on siis kaksi vaihtoehtoa:
      a) lisätä kaikki koodit jatkossa HTML:ään (en suosittele, tää on niin riskialtis paikka etenkin aloittelijoille, myös kokeneemmillekin)
      b) valitset Mallissa uuden mallin / saman mallin, jolloin kaikki aiempaan ulkoasuun lisäämäsi muutokset häviävät ja koodeja pitäisi taas onnistua lisäämään. Vaikka tää viimeisin on tylsä vaihtoehto, se toimii lähes 99% näissä tapauksissa.

      Poista
  13. Hei ! En tiedä pistinkö tähän kommenttia tänään, mutta sain ongelman hoidettua (jotenkin, en tiedä miten) sähläämällä blogitekstin postaus päivämäärän kanssa. Miten lie sainkaan taas toimimaan :D

    VastaaPoista
    Vastaukset
    1. Moi! En ainakaan huomannut kommenttia, mutta hienoa, että sait ongelman itse ratkaistua :-)

      Poista
  14. Hei! :) Mulla on ollut jo kauan tämä ongelma. Elikkäs mun blogin oikeaan yläkulmaan tulee tuommoinen tummempi sininen raita joka liukuvärjäytyy pois. Muissa kulmissa sitä ei ole. Tietäisitkö mistä se johtuu ja kuinka sen saisi pois :) ookoononparelli.blogspot.com

    VastaaPoista
    Vastaukset
    1. Moi! Sulla on blogissa tällä hetkellä tällainen koodi:

      .header-outer {
      background: transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -400px;
      _background-image: none;
      }

      Laita toi koodi CSS-boksiin ja ota siitä toi koko transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -400px; pois, ja lisää siihen tilalle sama väri, joka sulla on tämä: #d6dee3

      Toivottavasti tästä on sulle apua! :)

      Poista
  15. Miten blogin taustalla olevan kuvan (sinulla tämä jossa on joulupukki,lumiukko yms. vihreällä taustalla) eli vähän niinkuin blogin taustakuvan saa sellaiseksi (koodilla), ettei se liiku jos esim. koittaa selata blogia alaspäin? Mulla nimittäin ei voi muuten sitä liikuttomattomaksi laittaa.
    http://anujaponit.blogspot.fi/ minun blogissa tarkoitan tota jossa valkoisella taustalla on punaisia sydämmiä. Jospa osaisit auttaa, nimittäin minua itseäni ainakin häiritsee toi, että se liikkuu selatessa blogia.. :)

    VastaaPoista
    Vastaukset
    1. Moi Anu :)! Se pitäisi ihan Mallin suunnittelutyökalusta onnistua hoitaa menemällä Taustaväri-kohtaan ja sieltä sitten otat sen ruksin "Vieritä sivun mukana" -kohdalta pois :)

      Poista
  16. Moikka! oon ny ajatellu alottaa bloggaamisen uudelleen uudenvuoden jälkeen ja haluan ulkoasun siihen mennessä olevan tiptop valmis :) Ja nyt sitten tänään oon yrittäny sitä vähän muokkailla, lisäämällä omia sosiaalisia medioita sivupaneeliin, mutta osaisitko kertoa että miten saan alkuperäisen gadgetin läpinäkyväksi eikä se sieltä alta typerästi pilkottaisi D: http://emilia-myway.blogspot.fi/ eli siis noita instagramin ja weheartin paneeleja tuossa reunassa ja niiden alla olevaa valkoista gadgettia, ja kyllä yritin sieltä lisäasetuksista laittaa gadgetin taustan yms niin läpinäkyväksi mutta se ei jotenki ota sitä käyttöön tai jotain ku ei se näköjään auta D: Kiitos paljon jo etukäteen jos osaat auttaa! <3

    VastaaPoista
    Vastaukset
    1. Hei! On mahdollista, että olet tällä aikavälillä ulkoasuasi muuttanut (vastaan nimittäin kk:n myöhässä, pahoittelut!), sillä someikoneja ei tuolla enää ole. Mutta jost tarkoitit gadgetien varjoja, ne saat pois tällä koodilla:
      .main-inner .widget {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0);
      }

      Poista
  17. Hei! Kun yleensä flicrin kautta laittaa blogiin kuvan, niin blogissa kuvaa klikattaessa ajautuu automaattisesti kuvan flickr sivulle. Miten tämän saisi estettyä niin, että kuvaa klikattaessa ei tapahtuisi mitään? Pahoittelut jos selitin huonosti asian. :/

    VastaaPoista
    Vastaukset
    1. Moi! Ymmärsin asian, selitit kyllä hyvin. Ongelmana on vain se, että Flickrin käyttöehdoissa on määrätty ko. asia, ja ellei mitään merkkiä Flickrin käyttämisestä kuvanjakopalveluna blogissa ole (edes klikkauksen muodossa), rikotaan Flickrin käyttöehtoja. Ikävä kyllä asiaa ei siis voi oikein kiertää omilla konsteillaan :(

      Poista
  18. Onglemani ei liity aiheeseen, mutta kun kaikki tietämäni blogit googlettaa, siihen tulee linkki etusivulle. Minun blogiini tulee vain linkki kahteen vanhaan postaukseen jotka kokeilin poistaa, mutta linkki jäi silti. Miten saisin blogini etusivun linkin kun nimen googlettaa? Olen ihan ulalla, olis mahtavaa jos asian voisi muuttaa! http://lapin-taikaa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Otin asiasta selvää, ja ymmärtääkseni juttu toimii täydellä automatiikalla, eikä siihen välttämättä voi itse vaikuttaa. Löysin kuitenkin pari nettisivua (joita en kuitenkaan ehdi sanasta sanaan lukemaan), joista saattaa olla jotain apua:
      http://www.webopas.net/listautuminen.html
      https://support.google.com/webmasters/answer/35624?hl=fi

      Poista
  19. Miten saisin bloistani automaattisesti pyöreiksi tuolleet kulmat?
    http://polkuapitkineteenpain.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi! Täältä löytyy:
      http://blogikoodeja.blogspot.fi/2013/10/blogin-kulmien-pyoristaminen.html

      Poista
  20. Koodi toimi, mutta samalla kuvan hyvä laatu katosi :/ Auttaisiko tähän jokin?

    VastaaPoista
    Vastaukset
    1. En osaa kyllä sanoa, koska itselläni kuvan laatu ei muutu tuolla koodilla yhtään :( Pahoittelen!

      Poista
  21. Oon kokeillut monesta eri blogista tohon sitä koodia, malli on simple, eikä mitään tapahdu :/

    VastaaPoista
    Vastaukset
    1. Siis tätä Flickr-kuvakoodia? Jos kaiken olet oikein tehnyt, niin pitäisi kyllä toimia. Jos linkkaisit blogisi, voisin katsoa lähdekoodista, onko sillä jotain tekemistä asian kanssa.

      Poista
  22. Hei mulla ois yks ongelma välilehtien kanssa. Haluisin taustan kokonaan valkoiseksi,mutta siellä on sellaset harmaat viivat rajaamassa. Oisko tähän olemassa minkäänlaista koodia? -Hätä ei ole mulla siis ensisijainen! :D

    VastaaPoista
    Vastaukset
    1. Moi Anniina! Lisää tän postauksen koodit CSS:ään:
      http://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html

      Poista
  23. Ja edelliseen blogin nimi anskukirjoittaa.blogspot.com

    VastaaPoista
  24. Onko normaalia että kun tallennan css koodin ja seuraavan kerran menen muokkaamaan niin mitään lisäämääni koodia ei enää ole?

    VastaaPoista
    Vastaukset
    1. Moi! Ei ole (tai oikeastaan on, koska usein tästä tullaan tänne juuri apua pyytämään :D), virheellistä se on. Syynä on luultavasti se, että HTML:ään on käyty tekemässä jotain joko oikein tai väärin, ja CSS boksi jostain syystä suuttuu tästä niin, ettei sinne laitetut koodit enää toimi / häviävät sieltä. Tähän on ikävä vaihtoehto: Klikkaat uutta / samaa mallia uudestaan, jolloin kaikki muutokset aiempaan malliin katoavat.

      Poista
    2. Mutta se tässä onkin, että kaikki css laitettu toimii edelleen, mutta koodia ei vain näy.. :( Minulla on monta testiblogia ja kaikissa koodit häviävät.

      Poista
  25. Tuhannet kiitokset sulle tästä blogista, ihan mieletön apu blogin kanssa! Aloin tossa pyörittelemään kuitenkin sellaista juttua, että onko mitään koodia millä saisi numeroitua nuo "kuukauden suosituimmat" yms. jutut tuolta sivulla olevasta gadgetista?

    VastaaPoista
    Vastaukset
    1. Kiitos positiivisesta palautteesta :)! On, se on tosin melko monimutkainen juttu, joten en lähde sitä tässä selittämään, vaan löysin Googlesta sivun, jossa homma kerrotaan. Teen tästä varmaankin jossain vaiheessa ihan oman postauksen.

      http://helplogger.blogspot.fi/2013/09/4-different-styles-for-popular-posts.html

      Noita koodeja kustomoimalla saa sitten oman näköisensä numerot sinne :)

      Poista
  26. Löysin tämän blogin kaverin kautta äskettäin, ja täähän on ihan mahtava! Tästä oli miulle tosi paljon apua, suurkiitos sinulle! :)

    VastaaPoista
    Vastaukset
    1. Ihana kuulla, kiitos paljon Hannele :)!

      Poista
  27. Moikka! Ensiksi kiitos sulle tästä blogista, oon saanut paljon apua! :) Ja sitten.. Jostain syystä aina kun poistan postauksessa mainitun koodin pätkän tosta flickr kuvasta, kuvan laatu laskee hurjasti. Todella ärsyttävää, koska flickr on aina ennen ollut se paikka, josta kuvat saa vietyä laadukkaina bloggeriin. Jos mouseover -efektiä ei poista, kuva näkyy yhtä laadukkaana kuin alkuperäinenkin. Mistä tällänen ongelma voisi johtua kun en oo huomannut muiden painivan saman ongelman kanssa? Kiitos jo etukäteen =))

    http://tt-boom.blogspot.fi/

    VastaaPoista
  28. moi! sain sun antamalla yhdellä koodilla blogini alareunasta pois ne pallerot, mutta saako niitä katkoviivoja pois millään? jos saa niin miten? :D ne on niin rumat... toivottavasti saan tähän jonkin näköisen vastauksen :) !

    lifewith-milla.blogspot.fi

    VastaaPoista

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