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:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.post-title {text-align:center;}
Postauksen otsikon varjostaminen:
Malli→Mukauta→Lisäasetukset→Lisää 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:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.date-header { text-align:center; }
Bannerin keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
#Header1 { width:TÄHÄNBLOGINLEVEYSpx;margin:0 auto}
Ylhäällä olevien linkkien keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Sivulaatikoiden otsikoiden keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.sidebar .widget h2 { text-align: center; }
Postauksen alla olevien tekstien (tunnisteet yms) keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.post-footer { text-align:center; }
Jakonappuloiden keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.st-post-footer-buttons { text-align: center!important; }
Kaikkien widgettien keskittäminen:
Malli→Mukauta→Lisäasetukset→Lisää CSS
.widget {text-align: center;}
Kuvien välissä olevan rakosen pienentäminen:
Malli→Muokkaa HTML-koodia→Etsi 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;
}
.post-body img, .post-body .tr-caption-container {
padding: 1px;
}
Kuvien ympärillä olevan reunuksen poistaminen:
Malli→Mukauta→Lisäasetukset→Lisää 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:
Malli→Muokkaa HTML-koodia→Etsi 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 :)
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 :)
Näistä on apua, kiitti :) jotain koodeja oon jo löytänyt mutta nyt löysin loput mitä oon ettinyt!:)
VastaaPoistaEipä mitää (::
Poistanoita koodeja ei pysty kopioimaan tosta vaan tulee se "kuvien/tekstien kopiointi kielletty"- laatikko ja jokaisen kirjottamisessa erikseen ois aika homma... :p :)
VastaaPoistaVoi kopioida! Maalaat tekstin jas painat CTRL ja samaan aikaan C :) ja CTRL ja V on liitä toiminto :)
PoistaTosi 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ä! :)
VastaaPoistaKiva hei! Ja paina CTRL+C niinkun edellisessä kommentissa neuvoin :)
PoistaAa, kiitti paljon! :)
PoistaEipä mitään :)
PoistaTässä kyselisin apua picture window malliin. Minulla on linkkiluettelossa tuommoiset harmaat katkoviivat jokaisen välissä, joten tiedätkö miten saa pois? :)
VastaaPoistaHei en nyt ainakaan heti keksinyt miten ja oon vähän kiiressä leffaa menossa katsomaan, mutta katon huomenna jospa keksisin miten ne saa pois :)
Poistaoi 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..?:)
VastaaPoistaJoo, eli laita tämä koodi sinne samaan CSS-koodin lisäyspaikkaan ;)
Poistaimg: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;
}
oon niin huono näissä; pitääkö mun ottaa jotain välejä pois tmv? XD
PoistaEip, kunhan kopioit tarkasti koko koodin ettei joku merkki jää puuttumaan :)
PoistaMul toi ei suostu toimii :oo
PoistaHmm varmaan johtuu sitten mallista, mulla on siis tää yksinkertanen malli ja mulla se kyllä toimi kun testasin :o
PoistaVoiks noi CCS-koodit laittaa vaa peräkkäin sinne laatikkoo vai pittäks jokaine koodi laittaa sinne eriksee? :D Jos tajusit xd
VastaaPoistaJa tosi kiva ku laitoit näit koodei tänne, kiitoss!! :)
Eipä mittään! Ja voi laittaa ihan peräkkäin :)
Poistamulla on mac niin ei toimi toi ctrl + c ... voisitko mitenkään poistaa vaikka hetkeks noita?
VastaaPoistaOtan pois sen loppuviikoksi :)
Poistamiten voi keskittää blogin tekstin alla olevat toiminnot esim. like ja dislike ? :)
VastaaPoistaTuolla on hyvin selitetty kuvien kanssa! :) http://bloggerpulmia.blogspot.fi/2012/07/miten-keskitan-toiminnot.html
Poistavoisitsä joskus kun kerkeät niin kertoa että miten blogiin saa ton ettei voi kopioida su tekstejä ja kuvia? :)
VastaaPoistaTietysti, 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 :)
PoistaEn saanut keskitettyä noita ylhäällä olevia linkkejä vaikka kuinka yritin, johtuuko se mallista?
VastaaPoistaJohtuu varmaan mallista, sillä ainakin yksinkertaisella mallilla toimii ihan hyvin :)
PoistaOkei, kiitos nyt kuitenkin! :)
Poistaosaatko sanoo, ku laitoin ton widgettien keskittämis koodin, ni kaikki muu paitsi blogiarkisto keskitty.. miten sen blogiarkistonki sais keskitettyä?
VastaaPoistaHmm, 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ä! :)
Poistaok, kiitos! :-)
Poista