torstai 5. maaliskuuta 2015

Blogin ulkoasun muokkaaminen: lisää väliä välilehtien väliin

Välilehtien asentelu ja viilailu ovat selkeästi monen bloggarin sydäntä lähellä. Ja ei ihme, sillä välilehdet näyttävät pääsääntöisesti hyviltä ja ne tekevät blogista heti jotenkin ammattimaisen oloisen. Joskus välilehdet olisivat todella hieno lisä blogiin mutta niitä ei olisi kuin muutama vain. Pari, kolme välilehteä näyttävät kuitenkin hulluilta ilman pientä kikkailua, jota on tarjolla tänään. Jos sinulla on vain muutama välilehti, tiedät ehkä sen, että ne tuppaavat olemaan yhdessä supussa bannerin alle aseteltuna ja yhteen reunaan kasautuneina. Olet ehkä joutunut keksimään tikusta asiaa ja lisäämään turhanpäiväisiä välilehtiä, jotta ne asettautuisivat nätisti ja tasaisesti ruudulle. Tänään siis teemme lehtien väliin hajurakoa, jotta sinun ei tarvitse keksiä lisää välilehtiä ulkoasun nimissä, vaan saat ihan kaksikin välilehteä aseteltua harmonisesti bannerin alle. Olkaapa hyvät:

Lisää väliä välilehtien väliin

1. Ota varmuuskopio varmuuden vuoksi.

2. Mene Malli -> Mukauta -> Lisäasetukset -> Lisää CSS 

3. Lisää seuraava koodi omalle rivilleen: 


.tabs-inner .PageList li a {padding-left:10px; padding-right:10px;}
 

4. Muuta 10-luvut sopiviksi esikatselun avulla. Left on tietenkin paljonko tilaa välilehden nimen vasemmalle puolelle jää, ja right oikealle.

5. Tallenna, kun näkymät ovat hyvät!

Vastaavasti jos haluat jostain syystä pienentää välilehtien nimien väliä, pienennä lukua.

Toivottavasti välititte tästä välilehtien väli -postauksesta! 

23 kommenttia:

  1. Pitää käydä täälläkin kiittämässä sinua loistavasta blogista josta on ollut ihan hirveästi iloa tuon oman blogin väsäämisen kanssa.

    Mulla oli paljon sellaisia pieniä ärsyttäviä teknisiä ongelmia, joihin en ollut löytänyt ratkaisua, mutta sain ne kaikki korjattua! Tosin vieläkin on tehtävää vaikkapa näiden välilehtien kanssa. Ja erityiskiitos siitä, että neuvosi ovat niin helppotajuisia!

    Olin niin iloinen, että kehuin sinua postauksessanikin :)

    VastaaPoista
    Vastaukset
    1. Kiitos! Pienet jutut on juuri niitä ärsyttävimpiä :) En saanut postaustasi näkyviin mutta kiitos kuitenkin!

      Poista
    2. Ha, ja olin niin ylpeä, että osasin laittaa linkin :D. Pahoittelen!!! Vielä on oppimista. Mutta jos kiinnostaa niin blogin nimi on Saman otavan alla, löytyy linkki tuolta profiilistani…ja postaus "helppoja ohjeita bloggeriin"..

      Poista
    3. Kävin lukemassa. Kiva juttu oli, kiitos!

      Poista
  2. Moi, luen aina blogiasi silloin tällöin. Varsinkin, kun jotain pulmia ilmenee itselläni bloggerissa :) Kiitos mahtavista ja selkeistä vinkeistä. Nyt on kuitenkin niin, että minulla on pulma johon en löydä ratkaisua. Kysymykseni ei liity siis tähän postaukseen, johon kommentoin. Olen epätoivoinen ja siksi pyydän sinulta apua.

    Ongelma on sellainen kun jaan postaustani facebookissa kopioimalla linkin suoraan selaimesta, niin linkki näyttää väärän kuvan postauksen yhteydessä aina välillä. Mistä tämä johtuu ja voiko asian korjata? Kirjoitan leivonta-aiheista blogia ja jaan reseptejä foorumeilla facebookissa, milloin on tosi tärkeää että linkki ja kuva liittyvät toisiinsa kun ihmiset etsivät reseptejä. Välillä kun jaan donitsireseptiä niin linkki näyttää kuvan joulumuffineista, joten se hakee blogistani jostain syystä väärän kuvan.

    Saiko tästä mitään selvää? :)

    VastaaPoista
    Vastaukset
    1. Juu tiedän, mitä tarkoitat. Hyvin ärsyttävää. Itse olen ratkaissut ongelman sillä, että lataan suosiolla tällaiseen postaukseen erikseen haluamani kuvan. Eli linkin mukana tuleva kuva vain ruksista pois ja lataa koneelta haluamasi kuva tilalle. Aluksi näyttää siltä, että teksti katoaa jonnekin, kun kuvaa lataa, mutta kyllä ne molemmat näkyvät. Toivottavasti tästä sai selvää :)

      Poista
  3. Miten tollasia ns. kuvia saa tehtyä postaukseen? :D Tai missä tommosia voi tehdä, jos jollain ohjelmalla vaan tehty ja sit lisätty. Siis noi esim. tässä toi pinkin ympyrän sisällä oleva teksti ja sen vieressä oleva "lisää väliä välilehtien väliin" kohdat :)

    VastaaPoista
    Vastaukset
    1. Olen tehnyt kuvat Picmonkeylla. Kaikki fonteista ympyröihin on sieltä.

      Poista
    2. Mut miten ku en tajuu esim että miten tollasen ympyrän sisää saan väriä yms. Kaikkee oon kokeillut !

      Poista
    3. Itseasias sainki nyt tehtyä noita mutta miten saa sen siihen kirjotukseen ilman että siihen jää ns. reunat? se on se pallo valkosella taustalla, mutta saako sitä rajattua silleen että siinä on vaan tuo pallukka ja ennenkaikkea, miten...

      Poista
    4. Siis haluatko tehdä ihan samanlaisen, kuin minulla tuossa? Siinä pallukassa on kaksi väriä, mitkä pitää valita. Ulompi reuna, tässä tummemman punainen, on laitettu automaattisesti läpinäkyväksi. Jos et halua, että siinä on kahta väriä, eli tuo reuna, niin laita sisäympyrä ja reunaympyrä samalla värillä. Sitten on yksivärinen pallukka ilman reunaa :) toivottavasti autoin edes vähän!

      Poista
  4. Tää sun blogisi on kyllä erinomainen! :) Mitäs tiiät etsyn nuista pohjista? Pystyykö niitä muokkaamaan sit itse vielä? Eli lisäämään gadgetteja jne?

    VastaaPoista
    Vastaukset
    1. Voi kiitos! Suuri osa pohjista on hyvinkin mukautuvaisia eli saat lisättyä tai muutettua, mitä mielit. Eroja tietenkin on ja kuvauksessa kerrotaan aika hyvin, mitä voi tehdä. Jos se ei selviä kuvauksesta, niin ilmeisesti myyjät vastaavat hyvin kysymyksiin. Eli kun mieluinen pohja löytyy, niin kysymystä myyjälle!

      Poista
  5. Tää oli tosi hyödyllinen! Löytyykö täältä jostain vastausta siihen, miten nuo välilehdet saisi vielä keskitettyä?

    VastaaPoista
    Vastaukset
    1. Kuulemma lisäämällä CSS
      .PageList {text-align:center !important;}
      .PageList li {display:inline !important; float:none !important;}
      ja perään enteriä painamalla
      onnistuu. En kokeillut vielä itse.

      Poista
  6. Kiitos ihan hirveesti! Tosi hyödyllinen postaus ja yleensäkkin tää koko ulkoasun muokkaaminen -postaussarja!

    VastaaPoista
    Vastaukset
    1. Kiva kuulla! Ilmeisen suosittuja nämä jutut.

      Poista
  7. Tämä ei varsinaisesti liity tähän, mutta kyselen sitä, että miten saan alatunnisteessa näkymään kommenttien määrän? Nyt blogissani lukee vain "kommentit". Esim. haluaisin siinä lukevan "8 kommenttia" tms. Osaatko auttaa, kuinka saan muutettua sen?
    http://jennijanita.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Hmm.. normaalistihan se lukumäärä näkyy. Sinulla on tosin jokin muu teema, kuin simple. Oletko katsonut kaikki asetukset, että niissä ei ole mitään siihen viittaavaa? Jos löydän koodin, jolla sen saa, niin ilmoitan.

      Poista
  8. Kiitos tästäkin postauksesta, auttoi paljon. :3 Itse olen samaisen ongelman kanssa pähkäillyt, mutta kun olen melkoinen rähmäkäpälä noiden CSS-koodien kanssa, niin en ole mitään kunnollista saanut aikaiseksi. Varsin mahtava blogi sinulla~~!

    VastaaPoista
  9. Pystyisitkö millään auttaa, olisin kiitollinen pienestäkin avusta! :) Menetän hermot kohta, kun en miljoonista hakuyrityksistä löydä oikeaa vastausta.. Oon nyt aloittanut välilehtien lisäämisen bannerin alle ja sieltä löytyy nyt kaksi sellaista. Tällä hetkellä on ongelmana tuo rako välilehtien ja tekstin päivämäärän välillä. Saisinko sitä jotenkin suurennettua? Väli näyttävää tällä hetkellä todella ahtaalta. Blogi löytyy täältä: http://cosmeticland.blogspot.fi/

    Kiitos suuresti, jos sinulla on aikaa auttaa! :)

    VastaaPoista
    Vastaukset
    1. Sorry, en tuohon ongelmaan löytänyt ainakaan nopeasti vastausta!

      Poista