torstai 9. lokakuuta 2014

Blogin otsikon keskittäminen

Bloggerissa oletusasetuksena on, että blogin otsikko on tasattu vasemmalle. Monet bloggaajat haluavat kuitenkin asettaa otsikon keskelle sivua. Tässä postauksessa annan ohjeet otsikon keskittämiseen.


Otsikko tasattu vasemmalle.


Otsikko tasattu keskelle.



1. Mene Bloggerin vasemmassa sivupalkissa kohtaan "Ulkoasu" ja valitse mallin suunnittelutyökalu.

2. Klikkaa vaihtoehtoa "Lisäasetukset" ja valitse aukeavasta listasta viimeinen kohta "Lisää CSS".




3. Kopioi seuraava koodi sisältökenttään:

#header-inner {text-align:center !important;}
#header-inner img {margin: 0 auto !important;}

4. Tallenna muutokset painamalla "Käytä blogissa".


HUOM! Jos keskität blogin otsikon, kannattaa myös sivujen otsikot keskittää, jotta ulkoasu näyttää huolitellulta. Otsikoiden keskittäminen onnistuu tällä koodilla, joka myöskin lisätään samaiseen CSS-editoriin:

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


Lopputulos näyttää siis tältä:


Otsikko ja sivut keskitettyinä.

17 kommenttia:

  1. kiitos tästä oli paljon apua

    VastaaPoista
  2. Vastaukset
    1. Kokeile painaa enteriä koodin jälkeen. Siitä saattaa olla apua.

      Poista
  3. Voi, en saa toimimaan, vaikka painan enteriä...

    VastaaPoista
    Vastaukset
    1. Yritätkö keskittää blogin otsikon vai postausten otsikot? Blogisi otsikkokuva näyttää olevan jo keskitetty ja siinä oleva teksti "Lasituvan miniatyyrit Lasitupa Miniatures" taitaa olla kirjoitettu suoraan kuvaan, niin tämä koodi ei vaikuta siihen :)

      Poista
  4. Hei!
    Kuinka saisin keskitettyä myös postauksen otsikon, enkä vain blogini otsikkoa?:) Kun saan kyllä keskitettyä blogin nimen, mutta pitääkö tuon postauksen nimen keskittämis linkki laittaa perään, vai erikseen?

    VastaaPoista
    Vastaukset
    1. Moi Sanni! Pahoittelut, että kesti vastata. Tässä on koodi postauksen nimen keskittämiseen. Tämä koodi menee kanssa sinne CSS-kohtaan.

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

      Jos haluat keskittää myös päiväyksen, se onnistuu tällä koodilla:

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

      Poista
    2. hei yritin tätä, mutta ei onnistunut postauksien otsikoiden keskittäminen :(

      Poista
  5. Moi! Kiitos hirveästi! Nyt noille tuli käyttöä:)
    Keskitin päivämäärän, ''sivut'' palkin (Jonka osasin tehdä itse, jee!) ja postauksen otsikon!
    Sun blogista on ollut kovasti apua, sillä on jopa oma paikka 'Suosikit' palkissa mun koneella!:) Jatka samaan malliin♥

    Jos haluut kurkata, mitä sain aikaiseksi niin mun blogi on:
    http://sanniijuliaa.blogspot.fi/

    VastaaPoista
  6. Jostain syystä minulla ei tuo postauksen otsikon keskittäminen onnistu :(

    VastaaPoista
  7. Helppoa ja vaivatonta, kun löytyy näin selkeät ohjeet!

    VastaaPoista
  8. Kiitos hyvistä ohjeista, tämä keskittäminen on ollut mielessä jo jonkinaikaa ja nyt osasin vihdoin tehdä sen blogiini tilkkujajalankaa.blogspot.fi =)

    VastaaPoista