3. lokakuuta 2013

HTML-KOODEJA

Multa kysellään aika usein html-koodeista ja sain idean että voisin koota niistä postauksen. Kaikki koodit eivät toimi kaikissa bloggerin malleissa, nämä on vaan ne mitä ite oon käyttäny vuosien varrella. Tällä hetkellä mulla on käytössä yksinkertainen malli, ennen oli Picture Window. En edes muista mitä kaikkia muutoksia olen tähän malliin tehnyt, mutta tässä ylipäätänsä hyödyllisiä koodeja teille.

Postauksen otsikon keskittäminen:
MalliMukautaLisäasetuksetLisää CSS
.post-title {text-align:center;}

Postauksen otsikon varjostaminen:
MalliMukautaLisäasetuksetLisää CSS
Lisää allaoleva teksti sinne, ensimmäinen pikselimäärä kertoo kuinka kaukana varjostus on itse tekstistä sivusuunnassa, toinen kertoo kuinka kaukana varjostus on pystysuunnassa, kolmannessa pieni luku=terävä ja vahva varjostus, iso luku=pehmeä ja laaja varjostus
h3.post-title{ text-shadow: #000 1px 1px 6px; }

Postauksen päivämäärän keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.date-header { text-align:center; }

Bannerin keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
#Header1 { width:TÄHÄNBLOGINLEVEYSpx;margin:0 auto}

Ylhäällä olevien linkkien keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Sivulaatikoiden otsikoiden keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.sidebar .widget h2 { text-align: center; }

Postauksen alla olevien tekstien (tunnisteet yms) keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.post-footer { text-align:center; }

Jakonappuloiden keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.st-post-footer-buttons { text-align: center!important; }


Kaikkien widgettien keskittäminen:
MalliMukautaLisäasetuksetLisää CSS 
.widget {text-align: center;}

Kuvien välissä olevan rakosen pienentäminen:
MalliMuokkaa HTML-koodiaEtsi sieltä sellainen kohta kuin: 
.post-body img, .post-body .tr-caption-container {
Sen löytää painamalla Ctrl pohjassa ja samaan aikaa F ja aukevaan etsintälaatikkoon kirjoitat post-body ja se maalaa sinulle tuolla nimellä löytyvät kohdat. Tämä kohta näyttää mallista (ja koodailun määrästä) riippuen hieman eriltä. Mutta veikkaan että teillä näkyy siellä seuraavanlainen kohta: padding: $(image.border.small.size); poistatte siitä tuon $(image.border.small.size); ja laitatte tilalle 1px; ja lopputuloksen tulisi näyttää tältä:
.post-body img, .post-body .tr-caption-container {
padding: 1px;
}

Kuvien ympärillä olevan reunuksen poistaminen:
MalliMukautaLisäasetuksetLisää CSS 
.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;
}

Jos ylläoleva ei toiminut kokeile seuraavaa:
MalliMuokkaa HTML-koodiaEtsi sieltä sellainen kohta kuin  ja poista kokonaan  tekstipätkä: 
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Jos tulee mielee jotain muita koodeja mitä haluaisitte tai jotain muuta blogin ulkoasuun liittyvää mieleen niin laittakaa ihmeessä kommenttiboxiin. Pyrin auttamaan niin paljon kun osaan vaan, ja mainikaa ihmeessä jos ette saa jotain toimimaan!

Tosiaan hei kun mulla on toi kuvien kopioinnin estävä koodi niin kommentit saa kopioitua maalamalla tekstin mitä haluat kopioida ja painamalla CTRL ja samaan aikaan C pohjassa, se on siis pikakoodi kopio-toiminnolle, sitten CTRL ja V on liitä-toiminto :)

30 kommenttia:

  1. Näistä on apua, kiitti :) jotain koodeja oon jo löytänyt mutta nyt löysin loput mitä oon ettinyt!:)

    VastaaPoista
  2. Anonyymi3/10/13

    noita koodeja ei pysty kopioimaan tosta vaan tulee se "kuvien/tekstien kopiointi kielletty"- laatikko ja jokaisen kirjottamisessa erikseen ois aika homma... :p :)

    VastaaPoista
    Vastaukset
    1. Voi kopioida! Maalaat tekstin jas painat CTRL ja samaan aikaan C :) ja CTRL ja V on liitä toiminto :)

      Poista
  3. Tosi hyödyllisiä koodeja löyty, harmi vaan kun sulla on tuo kopioinnin esto (mikä on toki hyvä!) niin ei voi suoraan kopioida, mutta mitä pienistä! :)

    VastaaPoista
    Vastaukset
    1. Kiva hei! Ja paina CTRL+C niinkun edellisessä kommentissa neuvoin :)

      Poista
    2. Aa, kiitti paljon! :)

      Poista
    3. Eipä mitään :)

      Poista
  4. Tässä kyselisin apua picture window malliin. Minulla on linkkiluettelossa tuommoiset harmaat katkoviivat jokaisen välissä, joten tiedätkö miten saa pois? :)

    VastaaPoista
    Vastaukset
    1. Hei en nyt ainakaan heti keksinyt miten ja oon vähän kiiressä leffaa menossa katsomaan, mutta katon huomenna jospa keksisin miten ne saa pois :)

      Poista
  5. oi mä ainakin pääsin hyodyntämään noita otsikko koodeja, kiitos! ettet vaan sattuis tietää miten saa kuville niin, että hiiren laittaessa päälle se muuttuu mustavalkoiseksi..?:)

    VastaaPoista
    Vastaukset
    1. Joo, eli laita tämä koodi sinne samaan CSS-koodin lisäyspaikkaan ;)

      img:hover {
      -webkit-filter: grayscale(100%);
      z-index: -9999999999999999999999999px;
      -webkit-transition: all 0.9s ease-in-out;
      -moz-transition: all 0.9s ease-in-out;
      -o-transition: all 0.9s ease-in-out;
      -ms-transition: all 0.9s ease-in-out;
      transition: all 0.9s ease-in-out;
      }

      Poista
    2. oon niin huono näissä; pitääkö mun ottaa jotain välejä pois tmv? XD

      Poista
    3. Eip, kunhan kopioit tarkasti koko koodin ettei joku merkki jää puuttumaan :)

      Poista
    4. Anonyymi6/10/13

      Mul toi ei suostu toimii :oo

      Poista
    5. Hmm varmaan johtuu sitten mallista, mulla on siis tää yksinkertanen malli ja mulla se kyllä toimi kun testasin :o

      Poista
  6. Anonyymi5/10/13

    Voiks noi CCS-koodit laittaa vaa peräkkäin sinne laatikkoo vai pittäks jokaine koodi laittaa sinne eriksee? :D Jos tajusit xd
    Ja tosi kiva ku laitoit näit koodei tänne, kiitoss!! :)

    VastaaPoista
    Vastaukset
    1. Eipä mittään! Ja voi laittaa ihan peräkkäin :)

      Poista
  7. Anonyymi8/10/13

    mulla on mac niin ei toimi toi ctrl + c ... voisitko mitenkään poistaa vaikka hetkeks noita?

    VastaaPoista
  8. Anonyymi9/10/13

    miten voi keskittää blogin tekstin alla olevat toiminnot esim. like ja dislike ? :)

    VastaaPoista
    Vastaukset
    1. Tuolla on hyvin selitetty kuvien kanssa! :) http://bloggerpulmia.blogspot.fi/2012/07/miten-keskitan-toiminnot.html

      Poista
  9. Anonyymi12/10/13

    voisitsä joskus kun kerkeät niin kertoa että miten blogiin saa ton ettei voi kopioida su tekstejä ja kuvia? :)

    VastaaPoista
    Vastaukset
    1. Tietysti, eli meet Ulkoasu->Lisää gadget->Html/javascript ja blogger ei antanu laittaa koodia tähän nii lisäät tän linkin takaa löytyvän koodin sinne: http://pastebin.com/YM4FKjkL :)

      Poista
  10. Anonyymi6/5/14

    En saanut keskitettyä noita ylhäällä olevia linkkejä vaikka kuinka yritin, johtuuko se mallista?

    VastaaPoista
    Vastaukset
    1. Johtuu varmaan mallista, sillä ainakin yksinkertaisella mallilla toimii ihan hyvin :)

      Poista
    2. Anonyymi6/5/14

      Okei, kiitos nyt kuitenkin! :)

      Poista
  11. Anonyymi9/5/14

    osaatko sanoo, ku laitoin ton widgettien keskittämis koodin, ni kaikki muu paitsi blogiarkisto keskitty.. miten sen blogiarkistonki sais keskitettyä?

    VastaaPoista
    Vastaukset
    1. Hmm, mulla ne menee automaattisesti kaikki, mutta toisaalta mulla ei ookkaan blogiarkistoa näkyvissä täällä.. Kokeilla tämän ohjeen avulla: http://koodikielella.blogspot.fi/2013/07/yksittaisten-gadgetien-tyylimuotoilu.html :) Siinä on tarkasti ja hyvin selitty ja turha mun tähän on uudestaan alkaa selittämään tuota niin lue sieltä! :)

      Poista
    2. Anonyymi9/5/14

      ok, kiitos! :-)

      Poista