Koodausjeesejä

26.9.2013

Multa melko usein kysellään apua erinäisiin blogissa oleviin koodeihin, joten päätin nää suosituimmat/hyödyllisimmät kasata yhdeksi postaukseksi, joita niitä sitten voi vilkuilla. Koska tää on aika kuvapainotteinen postaus, kaikki ohjeet löytyy "Lue lisää"-linkin alta, ja ne on eritelty toisistaan tämmöisen sydänrivin avulla.

Mulla on Blogger englanniksi, eli jos teillä on eri kielellä, yrittäkää löytää vastaavat! Google on myös iso apu kun koodeja etsiskelee, miltei kaiken löytää aika helpolla sieltä. Toivottavasti näistä on jollekulle hyötyä :)



Miten keskittää banneri?


Ellei bannerisi ole yhtä leveä kuin blogisi sisältö sen alla, bannerin keskittäminen voi olla hyvä idea saadaksesi blogisi näyttämään vähän paremmalta. (Loin vain itselleni näkyvän esimerkkiblogin koodien esittelyä varten, siksi tossa lukee "no posts".)

Miten banneri siis keskitetään?


Ihan ensimmäisenä lataa bannerikuvasi ja varmista, että olet valinnut sitä ladatessasi "Instead of title and description", eli että se on blogin otsikon ja kuvauksen sijalla, ei alla. Yleisesti ottaen blogin nimi kannattaa kuvanmuokkausohjelmalla laittaa suoraan banneriin, eikä pitää sitä Bloggerin nimen automaattitekstiä - nimi bannerissa on paljon kivemman näköinen. Siis lataa bannerisi ja klikkaa oikeaa palluraa.

Sitten mennään Bloggerin ulkoasumuokkaukseen. Bloggerin etusivulta klikkaa blogisi nimen oikealla puolella olevaa valikkonuolta, ja valitse sieltä Template. Sitten valitse oranssi "Customise"-nappi. Sinulle aukeaa Template Designer.


Template Designerissä klikkaa vasemmalta Advanced, ja siitä avautuvasta valikosta Add CSS. Sieltä aukeavaan laatikkoon lisää seuraava koodi:



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

Ja paina sitten enter-nappia näppäimistöstäsi, tallenna, ja voilá! Bannerisi on keskitetty.



Miten keskitetään välilehdet?

Okei, tätä varten sinulla tulee olla välilehtesi asetettuna bannerin alle. Samalla lailla kuin ylemmän jeesin Template Designeriin mennessä, avaa etusivulla blogin nimen oikealla puolella oleva valikko, mutta valitse sieltä nyt Layout. Eteesi aukeaa allaoleva näkymä. Lisää Pages-niminen gadget, joka siis on blogisi välilehdet/sivut. Niitä voi olla useampi, kuten huomaat niin täällä on nyt Etusivu, Sofia, Shiri ja Lue nää!


Kun olet lisännyt Pages-gadgetin, varmista, että se on bannerin allapuolella, kuvassa näkyvässä kohdassa siis. Gadgetteja voi liikutella ihan vaan klikkaamalla ja vetämällä, eli liikuta se paikalleen, jos se ei siinä ole.

Sitten mennään Template Designeriin, kuten ylläolevassa jeesissä, ja etsitään taas Add CSS-laatikko. Jätä erillisten koodien välille ainakin yksi rivi tyhjää, jos siis esim. keskitit myös bannerin niin paina pari kertaa sen jälkeen enteriä ennen tämän koodin lisäämistä. Lisää sitten laatikkoon allaoleva koodi:



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

Paina taas enteriä, ja voilá taasen, nyt myös bannerin alapuoliset välilehdet on keskitetty.



Kuinka muuntaa jokainen postausotsikko kokonaan capsiksi?

Mullakin oli ennen kaikki postaukset KOKONAAN TÄLLEE CAPSEILLA KIRJOTETTU, kunnes vaihdoin fontin kaunoon ja se ei näyttänytkään enää hyvältä. Välillä näkee, että ihmiset tekee otsikot tälläisiksi ihan kirjoittamalla otsikot caps lockilla, mutta siihen on helpompikin keino, joka ei aiheuta sitä, että otsikot näyttää vähän hölmöiltä esim. Facebookissa tai Bloglovin'-listoilla.


Mene taas, niinkuin aiemmissa jeeseissä, etusivun valikon kautta Template-kohtaan. Tällä kertaa valitse kuitenkin aukeavasta ikkunasta harmaa nappula, jossa lukee Edit Html. Eteesi aukeaa ikkuna, jossa näkyy hirveästi koodia. Klikkaa koodia kerran, niin että vilkkuva kirjoitusviiva ilmestyy sinne, ja paina sitten Ctrl+F, tai miten tahansa saat koneellasi hakulaatikon aukeamaan. Hae sitten hakusalla post h3 ilman mitään välimerkkejä.

Sinun pitäisi nyt löytää sieltä tämännäköinen koodinpätkä:



.post h3{margin:0 0 3px 0;padding:0;font-family: Arial, Verdana;font-weight:bold;color:#392105;font-size: 24px; text-align: center; text-transform:normal;}

Muokkaa koodia vain yhdestä kohtaa. Tuossa, missä lukee text-tranform:normal, muokkaa sanan normal tilalle uppercase. Älä muokkaa muita kohtia (paitsi että hei, jos haluat keskittää postauksien otsikot, varmista että koodissa lukee text-align: center kuten yllä näkyy) äläkä poista/lisää välimerkkejä tai välejä. Koodin tulisi siis näyttää muokkauksesi jälkeen tältä:



.post h3{margin:0 0 3px 0;padding:0;font-family: Arial, Verdana;font-weight:bold;color:#392105;font-size: 24px; text-align: center; text-transform:uppercase;}

Tallenna muutokset, ja noin, otsikot ovat nyt KOKONAAN ISOLLA!

11 kommenttia :

  1. Millä ohjelmalla teet bannerit ja muokkaat kuvat?

    VastaaPoista
  2. Ostitko photoshopin vai latasitko? (Mallibanneri on muuten tosi hieno!)

    VastaaPoista
    Vastaukset
    1. Paljon tuo photari makso ja mistä? :D

      Poista
    2. Sain lahjaks, en tiedä yhtään :D googlettamalla varmaa löytyy

      Poista
  3. Hehe, täähän tuli kuin tilauksesta, kun just eilen muokkasin ulkoasua ja meni vähän sormi suuhun, miten uusi entistä pienempi banneri saadaan keskitettyä. Kiitos siis! :)

    VastaaPoista
  4. Vitsi miten kiva postaus! :) varmasti paljon hyötyä monelle :P oli pakko tulla viel kiittämään siitä bannerista, ja sanoomaan et nyt löytyy tuolta miun blogin sivupalkista linkkikin sun blogiin (:

    - http://kukakeksirakkauden.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Oi miten isolla :'D ei kestä ihana, kiitos linkistä :)

      Poista
  5. Jeee, tää on kyl sikahyödyllinen, koska sain noi mun sivut keskitettyy ja oon happy! :)

    VastaaPoista