sunnuntai 17. marraskuuta 2013

Kuvat ilman kehyksiä ja postauksen allekirjoitus kuvalla

Tässä postauksessa lyödään kaksi kuva-aiheista kärpästä yhdellä nopealla iskulla: otetaan Bloggerin kuvien ympäriltä pois turhat kehykset ja liitetään joka postauksen loppuun kuva. Kummatkin operaatiot ovat niin nopeita ja helppoja, että siinä ei kauaa nokka tuhise.

Kehykset pois kuvista

Jos lataa sen kummempia kikkailematta kuvia Bloggerilla,  kuvia saattapi koristaa kaunis - tai kauhea - kehys. Voi olla, että kuvasi näyttäisivät paremmilta ilman tuota reunusta koristamassa niitä: sommittelu olisi kohdillaan, ilmeesi olisi normaali, asusi olisi viimeistä huutoa ja kilojakin olisi karissut se muutama.

No ei nyt sentään. Kehys on todellakin mahdollista poistaa. Sen puuttuminen voi siis miellyttää silmääsi enemmän, kuin kehyksellinen versio kuvasta. Loput edellä mainitut muutokset jäävät kuitenkin sinun kontollesi!

Kehyksellä
Ilman kehystä

Kehyksen heivaaminen on helppoa kuin heinänteko (mikä sinäänsä on hämäävä ilmaisu, koska nykyihmiselle heinänteko on varmasti työläs ja vaikea operaatio). Tee vain näin:

1. Varmuuskopioi blogisi.

2. Siirry Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja syötä seuraava koodi kenttään:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}


3. Paina vielä kerran enteriä koodin syöttämisen jälkeen, jotta saat yhden rivin sen alle.

4. Klikkaa Käytä blogissa oikeasta yläreunasta ja mene blogiisi ihastelemaan, kuinka kaikki kehykset ovat kaikonneet.


Allekirjoita postaus kuvalla

Harjoittelimme oman allekirjoituksen laittamista jokaisen blogipostauksen loppuun täällä. Samalla sain kuulla, että osalla teistä allekirjoituksen virkaa toimittaa jokin kuva ja sen lisääminen joka postauksen loppuun on työlästä. Kuvalla allekirjoittaminen onnistuu yhtä näppärästi, kuin nimmarinkin rustaaminen. Sen voi siis automatisoida hyvinkin sutjakasti. Kas näin:

1. Valitse kuva, jolla haluat allekirjoittaa postaukset ja tee siitä sopivan kokoinen.

2. Lataa kuva johonkin netin kuvapalveluu, kuten Bloggerin Picasatilille tai vaikka Photobucketiin ja nappaa kuvan suora linkki kuvapalvelusta (se http:// -alkuinen).

3. Varmuuskopioi blogisi.

4. Siirry Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja heitä kenttään seuraava koodi:

.entry-content:after {
content: url(tähäntuleekuvasiosoite);
margin-left: 250px;
}

5. Muista laittaa kohdassa 2 saamasi kuvan osoite sille varattuun kohtaan. 


6. Esikatsele alapuolella avautuvassa näkymässä ja tallenna klikkaamalla Käytä blogissa.

(7. Jos haluat kuvan asettuvan jompaan kumpaan alareunaan, muuta koodista 250 haluamaksesi ja katso esikatselusta miten kuva asettuu.)

Valmista tuli!

Kuva ilmestyy jokaisen postauksen loppuun, myös vanhojenkin. Jos kaipaat apua esim. Linkwithiniä käyttäessä, niin kurkkaa se aikaisempi postaukseni.

39 kommenttia:

  1. Kirjoitustyylisi on niin mainio! Nauran täällä itsekseni mainioille letkautuksillesi! Olet taitava niin kirjoittamaan ja imaisemaan ajatuksiasi ja samalla opetat meitä lukijoita monilla käytännöllisillä vinkeillä ja teet sen mielnkiintoisesti ja opettavasti! Olet ihan huippu!! :)

    VastaaPoista
    Vastaukset
    1. Kiitos Jenna! Nämä ohjeet olisivat varmaan kauhean puisevaa luettavaa, jos ei vähän värittäisi tekstiä :)

      Poista
  2. Ihanaa, että löysin tän blogin! Mulla ei oo kauheesti vielä lukijoita, joten toivon että näistä sun vinkeistä ois apua :)

    http://tittapo.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Toivotaan näin! Kyllä niitä lukijoita ajan myötä tulee.

      Poista
  3. Ei ole totta, tämä postaus tuli kuin tilauksesta! Tuskailin näiden kehysten kanssa koko viikonlopun ja päätin olla tekemättä mitään täydellisen sössimisen pelossa! Joten KIITOS! <3

    VastaaPoista
  4. hei ihanaa kiitos :) mä pidän laihdutusblogia omalla pärställäni varustettuna ja oon miettiny miten noita kehyksiä kuvista pystyy muuttelemaan :D satuin sinun blogiin sitten eksymään, eli kiitos tästä neuvosta :)

    -hanna-

    http://laihdutusmatka2014.blogspot.fi/

    VastaaPoista
  5. satuin törmäämään blogiisi :) Ihan sinänsä ihanaa että oon alkanu omalla pärställäni varustettuna kirjoittamaan laihdutusblogia ja miettinyt noiden kuvien erilaisia asetteluja joten tällainen tietopostaus helpottaa meikäläisen elämää :D joten kiitos :)

    -hanna-
    http://laihdutusmatka2014.blogspot.fi/

    VastaaPoista
  6. Kiitos tästäkin postauksesta! Oon saanut kyllä paljon hyödyllisiä vinkkejä sun blogista kaikkeen:) Ulkoasuakin on tullut fiksattua kivasti!

    VastaaPoista
    Vastaukset
    1. Ollos hyvä. Ulkoasussa riittää kyllä aina työmaata!

      Poista
  7. Kiitos tuosta koodista jolla saa kehykset heivattua mäkeen. Nyt voi taas laitella blogiin transparent-taustalla olevia kuvia kun ei tule kehys pilaamaan :)

    VastaaPoista
  8. kiitos näistä vinkeistä! :) toimi mulla! :D

    VastaaPoista
  9. Mä olen aina halunnut päästä niistä valkosista kehyksistä eroon ja nyt vihdoin ja viimein pääsin, iso kiitos tästä!! :D

    VastaaPoista
  10. Kiitos tästäkin ja oot huippu auttaja. nyt on kehykset poistettu.

    Blogissani menossa hyväntekeväisyys joulukalenteri, jos kiinnostaa..kaikki tuotto menee hyvään.

    VastaaPoista
    Vastaukset
    1. Ole hyvä! Täytyypä tsekata tuo kalenteri.

      Poista
  11. Ei toimi, olen yrittänyt varmaan jo vuosikausia heivata ne kehykset pois, ei onnistu.

    VastaaPoista
    Vastaukset
    1. No onpa omituista. Onkohan sinulla sitten jokin erikoisempi teema?

      Poista
  12. Iso kiitos tästä postauksesta. Yrittelin tuskallisesti itse selvittää css-tyylejä ja html-koodeja, mutta en saanut selville, miten olisin ne valkoiset reunukset poistanut. Yksinkertaistahan se lopulta oli, kun laittoi oikean koodin oikeaan paikkaan. Kiitos!

    VastaaPoista
    Vastaukset
    1. Jotkut jutut ovat yllättävän yksinkertaisia :)

      Poista
  13. Mitä kun mulla on siinä jo valmiiksi se lyhyt koodi jolla saa bannerin keskelle jne... Mitä sille koodille tapahtuu?

    VastaaPoista
    Vastaukset
    1. Sille ei tapahdu mitään, vaan se jatkaa toimintaansa, jos et koske siihen. Laita tämä koodi seuraavalle riville ja anna siellä olevien koodien vain olla :)

      Poista
  14. Ookoo. Blondi kertaa: jätän koodin paikalleen lokeeroonsa. Painan väliin tyhjän rivin, ja lisään alle tämän koodin? Menikö oikein, pääsinkö läpi? ;)

    VastaaPoista
    Vastaukset
    1. Juuri näin! Pääsit läpi seuraavalle levelille :D

      Poista
    2. Ou jess! Meikkis tuulettaa ;)

      Poista
  15. Jes, vihdoin kaikkien vihaamat kehykset ovat poissa! KIITOS!!!! <3

    VastaaPoista
  16. Kiitos tuhannesti tästä vinkistä! Nuo kehykset häiritsivät kovasti esimerkiksi silloin, kun lisäsin kuviin niiden leveyttä pidemmän kuvatekstin, jonka vuoksi sitten tietysti myös kehykset seurasivat tekstin leveyttä ja joka kuvassa oli karmean näköiset ja aivan eri kokoiset kehykset. Hyh! (Tietty tekstiä olisi voinut koittaa rivittää jotenkin hienosti, mutten osannut sitäkään.)

    Blogisi on varsinainen aarreaitta, täällä on hyviä vinkkejä ja ihan yksinkertaisesti myös hauskaa luettavaa. Jään joka kerta kaivelemaan arkistoja!

    VastaaPoista
    Vastaukset
    1. Kuulostaa siltä, että tämä vinkki tuli tarpeeseen :D Ja mukavaa, että viihdyt!

      Poista
  17. Heippa! Mihin kohtaan koodia tuo kehyksettömyyskoodi lykätään?

    VastaaPoista
  18. Anteeksi äskein kysymykseni, luin ohjeesi ilman aivoja. Ei kannattane julkaista moista kysymystä ollenkaan. :)

    Kiitos hyvästä ohjeesta, nyt ei kehyksiä enää ole.

    VastaaPoista
    Vastaukset
    1. Hups, julkaisin :) Ei se niin vaarallista ole, jos ei meinaa heti löytyä. Tärkeint on, että onnistui kuitenkin :D

      Poista
  19. Aivan mahtavaa että neuvoit nuo kehykset pois!! Olen etsinyt kaikkialta, ja en osannut otaa niitä html koodin kautta, tästä oli hyötyä :) Lisäksi kerrot ohjeet hyvin ja selvästi:)

    VastaaPoista
    Vastaukset
    1. Kiva kuulla ja hienoa, että onnistuit!

      Poista
  20. Kiitos tuhannesti ohjeistasi! Tein molemmat operaatiot blogilleni, mutta nyt ongelmaksi muodostui se, että postauksen loppuun tarkoitettu kuva (sydän) menikin nrelaten alapuolelle. Yritin fiksata asiaa tekemällä ulkoasuasetuksissa oman HTML/JavaScript-gadgetin, jonka asetin nrelaten yläpuolelle, mutta ei toimi. Mitä luulet, miten saisin sydämen kirjoituksen loppuun, ennen nrelate-gadgettia?

    VastaaPoista
    Vastaukset
    1. Heipsan! Kurkkasitko jotämän jutun loppuosan? Siellä on koodi, jolla niiden paikkaa voi vaihtaa.

      Poista
    2. No kiitosta taas tuhannesti! Homma on nyt kunnossa :)

      Poista
  21. Mallina on Simple ja kun koitan käyttää tuota koodia niin ei vain toimi, siis kehykset eivät lähde mihinkään, ovat ihan samanlaiset kuin ennen koodin lisäämistä :/

    VastaaPoista
  22. Täällä sama ongelma... Kehykset eivät lähde vaikka koodi oikein..

    VastaaPoista
  23. Kiitos ohjeista :) Klikkaan itseni lukijaksesi - mainio blogi!

    VastaaPoista