lauantai 18. lokakuuta 2014

Sivujen/ylävälilehtien keskittäminen

Jos sinulla on blogissasi sivuja joko ylävälilehtinä tai blogin sivupalkissa ja haluaisit keskittää ne, tämä alla oleva koodi on hommaan räätälöity (malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi):

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

55 kommenttia:

  1. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
    Vastaukset
    1. Hei! Joo, tässä koodi siihen, eli lisäät alla olevan tekstin CSS:ään:

      #ArchiveList {
      text-align: center;
      }

      Poista
  2. miten http://osjmblogi.blogspot.fi on saanu anonyymien kommenttien kuvist tollasii ?

    VastaaPoista
    Vastaukset
    1. Moi! Homma pitää suorittaa HTML-koodia muuttamalla kajoamatta CSS-osaan. HTML-koodia en ole pahemmin tutkiskellut enkä siihen mielelläni muutamien epäonnisten kertojen jälkeen mieluusti kajoaisi, mutta jos sä kuitenkin haluat, löysin täältä sulle ohjeet:
      http://helplogger.blogspot.fi/2012/05/how-to-change-default-anonymous-avatar.html

      Poista
  3. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
    Vastaukset
    1. Ei se tietenkään heti näy siellä. Vasta kun blogistasi tulee tarpeeksi suosittu ja googlattu, niin se näkyy siellä.

      Poista
  4. Moi!

    Mä oon niin kyllästyny Letter spacing-efektiin omassa blogissani, eli kysynkin siksi että miten sen saa POIS?

    Tosin mulla se on jossain html-koodien seassa... eikä css-koodi paikassa...

    Toivon että vastaat! :)

    VastaaPoista
    Vastaukset
    1. Moi! :)

      Jos siis olet letter-spacingia blogisi otsikossa käyttänyt, lisäämällä tän koodin mallin suunnittelutyökalun CSS-osaan pitäis kyseisen ongelman kadota:

      .post-title {
      letter-spacing: none;
      }

      Tuon pitäis toimia, ellet oo kajonnut blogisi HTML-koodiin!:)

      Poista
  5. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
    Vastaukset
    1. Moi Anni :-)! Selitit ongelmasi tosi hyvin ja linkitit vielä blogin, josta löytyi malliesimerkki - just tällästä toimintaa mä toivon, loistavaa! Meinaan tällänen toiminta helpottaa mun työtä :)!
      Tuolla alempana Saija U kerkeskin jo vastaamaan - kiitokset Saijalle ahkeruudesta! Kerron kuitenkin vielä vähän tarkemmin, jotta pääset varmasti kiinni asian ytimeen.

      Eli lähdetään siitä, että sä haluat bannerin, joka ikään kuin makaa oikean taustan päällä. Sulla siis pitää olla sellainen .png-muodossa oleva kuvatiedosto, jonka haluat laittaa banneriksi - jos siis haluat samantyylistä banneria kuin "Mandi ja Amancer" -blogissa, eli banneri ei oo suorakulmainen vaan ikään kuin eri muotoihin rajattu, eli bannerin tausta on transparent eli läpinäkyvä.
      Jos kuitenkin haluat säilyttää nykyisen bannusi ja saada sen ns. "liukumaan" taustan päällä, toimi näin:
      1. Mene mallin suunnittelutyökaluun.
      2. Vaihda malli Picture Window'ksi (suosittelen sitä ensimmäistä, jossa on sininen tausta).
      3. Lisää haluamasi tausta blogillesi.
      4. Tadaa, valmista!
      Ja jos haluat liukuefektin vahvemmaksi, kannattaa bannerin rajoja häivyttää esim. Gimpissä.

      Poista
    2. Kirjoittaja on poistanut tämän kommentin.

      Poista
  6. Hei, yritin käyttää blogissani koodia jolla saisi gadgetien väliä pienemmäksi sekä koodia jolla saa otsikon ja päivämäärän keskelle, muttei ne toiminut. Postauksen otsikko siirtyi mutta kaikki muu pysyi ennallaan. Osaisitko mitenkään auttaa? (:

    VastaaPoista
    Vastaukset
    1. Hei Elisa! En tiedä, mitä koodeja käytit, mutta testasin nämä vielä äsken toimiviksi:
      GADGETEIHIN:
      .widget {
      margin: 5px 0;
      }

      TEKSTIN OTSIKKO JA PÄIVÄMÄÄRÄ KESKELLE:

      .date-header {
      text-align: center;
      }

      .post-title {
      text-align: center;
      }

      Kannattaa kokeilla lisäämällä jokainen koodi yksitellen. Jospa nyt vaikka toimisi! Ainakin minulla nuo toimivat ja mallini on Simple, se valkoinen.

      Poista
  7. Anni Paakkari: Anteeksi että vastaan näin mutta saat bannerin taustan läpinäkyväksi vaihtamalla bloggerin muokata osiosta malleja;)

    VastaaPoista
    Vastaukset
    1. Ei mitään :) Apu on aina tarpeen! Kiitos vai (:

      Poista
    2. Tuo lähti vahingossa, mutta piti vielä lisätä, että itsellä on aika kiireistä elämä tällä hetkellä, joten muiden auttaminen täällä (jos vain itse osaa) on just hyvä juttu! Omalla kohdallani kun vastaamisessa saattaa venyä pitkä tovi :-D

      Poista
    3. *vain XD tulipa tästäkin taas sotku!

      Poista
  8. Voitko auttaa että miten kuvista saa isompia ja nuo valkoset reunat pois? www.adaleksandras.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi!

      Kuvista saa isompia jo itse bloggerissa postausta tehdessään. Kun olet ladannut kuvan postaukseen, klikkaa sitä. Kun klikaat kuvaa, ilmestyy vaihtoehtoja: esim. erittäin suuri tai alkuperäinen koko. Kuvan alkuperäistä kokoa voi muokata esim. paintissa (täällä tekemäni postaus siitä: http://blogikoodeja.blogspot.fi/2013/10/kuvan-koon-muuttaminen.html).

      Valkoiset reunat saa tällä koodilla pois:
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 0px;
      background: #ffffff;
      border: 0px solid #eeeeee;
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
      box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
      }

      Poista
  9. Moikka! Miten blogin postauksien alla olevan valkoisen taustan saisi alaspäin? Silleen jos on läpinäkyvä banneri, eikä halua tuota valkoista siihe taustalle:)

    VastaaPoista
  10. ^Ja pcture window mallissa keskiosan reunat menevät läpinäkyviksi, joten sitä en voi käyttää

    VastaaPoista
    Vastaukset
    1. Moi anonyymi! Myönnetään, että olen tyhmä ihminen - en välttämättä aina tajua yksinkertaisimpia asioita, vaikka ne selitettäisiin tosi hyvinkin. Näin kävi myös tällä kertaa. Pystyisitkö linkkaamaan blogiasi, jotta saisin punaisesta langasta kiinni?

      Poista
  11. moi! osaatko sanoa miten saisin gadgeteista (mun tapauksessa haluaisin lähinnä tosta posts - gadgetista) ne kaikki tekstit keskelle? meinaan siis että ei otsikoista, vaan siitä itse gadgetin teksteistä. en oikeen osaa selittää mutta jos viittisit vilkasta :)
    jennymarleena.blogspot.com

    VastaaPoista
  12. joo ja tosiaan mulla ei syystä tai toisesta noi CSS-koodit toimi ollenkaan...

    VastaaPoista
    Vastaukset
    1. Moi! Oot luultavasti jossain vaiheessa käynyt blogisi HTML-koodissa ja tehnyt jonkun muokkauksen, jonka seurauksena CSS-koodit eivät enää toimi. En tiedä, mistä tämä johtuu, mutta jos HTML:n kautta koodaus tuntuu vaikealta, CSS-muokkauksen saa takaisin siten, että menet mallisi suunnittelutyökaluun ja klikkaat jotain uutta mallia / tämänhetkistä malliasi uudestaan. Tämä ikävä kyllä hävittää kaikki aiempaan malliisi tekemät muutokset, mutta voi joissain tapauksissa olla sen väärti. Tätä tapaa suosittelen :)

      Jos et kuitenkaan halua tehdä mainitsemallani tavalla, koodit voi kuitenkin lisätä HTML-koodiin CSS-muotoisten koodien sekaan. Koodeja on muutama, koska esim. blogiarkisto tarvitsee oman keskityskoodinsa. Tässä koodit:

      .sidebar {
      text-align: center;
      }

      #ArchiveList {
      text-align: center;
      }

      Muistathan tarkistaa tuloksen aina ennen HTML-koodin tallentamista!! :)

      Poista
  13. Sain blogilleni ensimmäinen yhteistyökumppanin, ja nyt mun pitäisi tehdä sellainen yhteistyössä-palkki blogini reunaan. Miten siis saan tehtyä sellasen? Jotenkin gadgettien kautta ja näin, mutta kuvakin pitäisi siihen saada liitettyä? Blogini: http://munkynsiblogini.blogspot.fi/

    VastaaPoista
  14. voitko neuvoo miten gadgettien tekstin taustavärin saa tuolla tavalla eriväriseks niinku sulla on tollaset punaset tausta noilla gedgettien teksteillä..?

    VastaaPoista
    Vastaukset
    1. Moi! Tässä sulle koodi sellaiseen toimintoon:

      h2 {
      color: white;
      background: #B20505;
      }

      Toi colorin jälkeinen white on siis tekstin väri ja backgroundin jälkein heksakoodi #B20505 tekstin taustan väri :) Heksakoodin tilalla voi olla mikä vaan enkunkielin väri, esim. blue, jolloin #-merkkiä ei tarvita.

      Poista
  15. Onko Simple mallissa jotain koodia millä saisi tekstin taustalla olevan värin pois bannerin kohdalta? Tein läpinäkyvän bannerin ja se valkoinen väri paistaa ikävästi taustalta, kun tarkoitus olisi että taustana toimisi blogin oma taustakuva. Eli sen taustavärin pitäis alkaa siitä bannerin alta postauksien kohdalta. Vähän niinkuin esim. tässä blogissa http://lifewithfemma.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi! Simplellä ei taida olla tuohon tarkoitukseen hyvää mallia, joten suosittelen Picture Window'n sinistä mallia. Jos siis ymmärsin oikein, mitä tarkoitat :-D Janetella on käytössään Ethereal-malli eli Hento ote, mutta kätevintä hoitaa homma kotiin on mun mielestä Picture Window'lla. Mutta jos haluat leikkiä koodien kanssa, lisäämällä nämä koodit blogin CSS:ään (malli->mukauta->lisäasetukset->lisää css) saa ihan kivan lopputuloksen:

      .content-inner{
      background: transparent;
      }

      .main-inner{
      background: white;
      }

      Poista
  16. Moi! nyt tulee varmasti tyhmä kysymys mut miten saan mun ylävävilehtien reunoja pyöristettyy kivemman näköseks?
    (älkää siis ihmetelkö noinn tyhmää kysymystä mut oon alottanu blogin vast vähä aikaa sit enkä osaa muutenkaa mitää XD) mut tos on mun blogi= hevosetjaroosa.blogspot.com

    VastaaPoista
    Vastaukset
    1. Moi Roosa! Kuules, tyhmiä kysymyksiä ei olekaan :) Hienoa, että kysyit apua!
      Tällä koodilla saat pyöristettyä ylävälilehtien reunoja:

      .tabs-inner .widget ul {
      border-radius: 16px;
      }

      Eli laitat tuon koodin malli -> mukauta -> lisäasetukset -> lisää CSS:ään tuo yläpuolella oleva koodi :)
      Ja tota lukua 16 voit muuttaa - se määrää pyöreyden :)

      Poista
  17. tai miten saan muutenkaa tota mun blogii kivemman näköseks :D

    VastaaPoista
    Vastaukset
    1. Se riippuu ihan siitä, mikä on sun mielestä kivan näköstä :D esimerkiksi muiden blogeja selaamalla voi hakea inspistä oman blogin ulkoasuun, mutta täydellinen matkiminen pitää jättää pois - jotain sieltä ja jotain täältä, muttei saa kopioida koko ulkoasua joltain toiselta :)

      Poista
  18. miten saan blogissa sen koko keskiosan valkoiseksi että vaan reunoilla on väri?

    VastaaPoista
  19. http://tiiajamaistro.blogspot.fi/ tossa esimerkki :)

    VastaaPoista
  20. Toivon et vastaat koska täl asial on kiire

    VastaaPoista
    Vastaukset
    1. Moikka! En ole varma, ymmärsinkö ihan oikein pulmaasi, mutta jos ymmärsin, tuossa koodi, jolla saat ongelman ratkottua :D

      .content-inner{
      background: white;
      }

      Poista
  21. Kiitti! Sun blogista on ollu ihan hirveesti hyötyy ja apua! :))
    http://wilmauroraa.blogspot.fi/

    VastaaPoista
  22. moi! Tein jonkun muun blogin koodilla ton sivujen keskittämisen (en enää muista minkä blogin ohjeilla) nyt poistin koodin css-osiosta mutta sivut ovat vieläkin keskellä eivätkä sivussa. osaisitko auttaa miten saan ne taas sivulle? olisin kiitollinen jos vastaisit pian

    VastaaPoista
    Vastaukset
    1. Moi! Koska et linkannut blogiasi, en pääse lähdekoodista etsimään syytä ongelmaan. Epäilen kuitenkin, että lisäämällä alla olevan koodin saat probleeman toimimaan:
      .tabs-inner {
      margin-left: -51px;
      }

      Lukua -51 voi muuttaa :-)

      Poista
  23. Moikkamoi! Olen tässä pähkäillyt, kun mikään koodeista ei toimi :( Vaikka teen ihan mallin mukaisesti, mikään ei auta.. Aloitin juuri uuden blogin, sillä halusin poistaa edellisen blogini samanlaisten ongelmien takia, mutta teenköhän mä jotain väärin vai mitä. Kun mä näiden koodien kanssa sählään, onko jotain mitä mun pitäis erityisesti muistaa? Olisi ihanaa jos vastaisit ♥

    VastaaPoista
    Vastaukset
    1. Moi Lina! Jos olet mennyt muokkaamaan jossain vaiheessa HTML-koodia tai lisännyt blogiisi ristiriidassa olevia koodeja / koodeja jotka eivät toimi, ongelmasi on mahdollinen. Kannattaa tuossa tilanteessa kopsata mahdolliset CSS-poksin koodit ja klikata uutta mallia suunnittelutyökalussa, joka poistaa aiempaan malliin tehdyt muutokset. Tämä auttaa yleensä aina.
      Muistathan painaa enteriä koodien väliin? Etkä poista niistä mitään oleellista? :)

      Poista
  24. Moikka Ilona! Kiitos todella paljon blogistasi, siistä on ollut todella paljon hyötyä! :) Olen nyt muutaman päivän hionut sivustoani ja kohta olen viittä vaille valmis, muutama kysymys askarruttaa vielä. Eli eka kysymys kuuluukin, että miten saan välilehtieni instagram ja pinterest linkkini avautumaan uudella välilehdellä, kun nyt ne avautuu suoraan sivulle? Ja toinen kysymys, että miten saan välilehtieni katkoviivat pois että tausta olisi yhteneväinen? Ja sitten vielä, tää on jo ihan hienosäätöä, mutta saanko mitenkään tota sivupalkkini instagram gadgetiä ihan kehysten keskelle? Kiitos tuhannesti jo etukäteen. :) Blogini: http://lemondedezoja.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Kiitos itsellesi :)!

      VÄLILEHTIEN LINKIT AVAUTUMAAN UUDELLA VÄLILEHDELLÄ
      lisäät vain jokaisen koodissa olevan linkin jälkeen target="_blank". :)

      VÄLILEHTIEN KATKOVIIVAT POIS
      oisko tästä apua?:
      http://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html

      INSTAGRAM GADGET KEHYSTEN KESKELLE
      laitat koodin ig-gadgetin koodin alkuun ja loppuun < center > (yhteen kirjoitettuna) :)

      Poista
  25. Moi!
    En ole hyvä käyttämään bloggeria, joten ajattelin kysästä sinulta kysymyksen. Minulla on jo CSS-koodi siihen, että tekstin- ja päivämäärän otsikko keskittyy niin voinko vain heti perään lisätä uuden koodin niin, että se toimii? Yritin lisätä toisen koodin, mutta en tiedä pitääkö siihen jättää joku väli, että voi lisätä uuden CSS-koodin. Olen huono selittämään. :(

    tildahytonen.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moikka Tilda! Vastaan tälleen Ilonan puolesta, koska pidän itsekin koodailublogia! Mä itse laitan aika monta väliä, mutta suositeltu väli on vähintään 3 riviä :)

      http://www.blogineuvoja.blogspot.fi <-- Tossa olis, joka päivä tulee apupostaus, toivottavasti on apua :-)

      Poista
    2. Voi kiitos Tia avusta! Itse aina painan enteriä kaksi kertaa uuden koodin jälkeen siten, että kahden koodin väliin jää yksi väli :)

      Poista
  26. Hei!

    Tulen kysymään todella tyhmän kysymyksen, mitä tarkoitat keskittämisellä? :D

    -Ada Onlines

    VastaaPoista
  27. Mulla ei toimi toi koodi, vaikka kokeilin jättää montakin väliä toisesta koodista. Eikö se vain toimi mulla vai mistä se johtuu?

    VastaaPoista

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