keskiviikko 13. huhtikuuta 2016

Ihana CSS - 5 lempparikoodia


Bloggerissa blogin ulkoasun kohentelu on mukavaa CSS-koodeilla. Niiden käyttö on paljon nopeampaa ja helpomaa kuin HTML-römpsyjen etsiminen ja muokkaaminen. Tässä on minun 5 lempikoodiani (1. kohdan linkistä löydät ohjeeni CSS-koodien lisäämiseen blogiisi):


blogi, bloggaaminen, blogiohjeet, blogi CSS, blogi koodaus, Kivempi blogi



1. Kehysten poistaminen blogikuvista

Minusta valkoiset kehykset blogikuvien ympärillä on tyhmän näköisiä. Minulle ne tuo vähän amatöörimäisen vaikutelman blogista. Siksi jo pari vuotta sitten TÄÄLLÄ kirjoitin miten ne poistetaan.


2. Navigaatiopalkki esiin 

Katsopas mitä tapahtuu, jos viet kursorin Kivemman blogin ihan yläreunaan: navigaatiopalkki tulee näkyviin. Minusta se on ihan turha olla näkyvillä kokoajan, mutta toisaalta se on liian kätevä kokonaan poistettavaksi. Siksi olin enemmän kuin vähän täpinöissäni, kun tajusin, että sen voi piilottaa! Tässä koodi:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


3. Otsikoiden värin muuttaminen

Tästäkin kirjoitin aikojen alussa TÄÄLLÄ.


4. Päivämäärän siirtäminen

Tässä toinen koodi, joka sai minut ihan svääreihin. Hassua kyllä, en ole sitä täällä suomenkielisessä blogissani käyttänyt. Mutta Mintspirationissa kyllä! Eli tällä koodilla voit siirtää postauksen päivämäärää lähemmäksi postauksen otsikkoa:

h3.post-title {
margin-top: -25px !important;
}
 


Voit muuttaa -25, jos et ole tyytyväinen.


5. Bannerin siirtäminen keskelle

Kivemman blogin headerissa on banneri, joka ei ole koko blogin levyinen. Ilman hienosäätöä, se olisi ihan vasemmassa nurkassa, eli näyttäisi omituiselta. TÄÄLTÄ löydät ohjeet.


Tässä pitkän pohdinnan jälkeen 5 lemppariani. Ehkä voisin jakaa lisää CSS-vinkkejä niin saisin kaikki ihanuudet mukaan...



Muista käydä linkkailemassa TÄÄLLÄ.


12 kommenttia :

  1. Ihanan helppo CSS ja ylistys teille, jotka ystävällisesti jaatte osaamistanne täällä blogimaailmassa <3
    CSS lokerossani on jo aika pitkä rimpsu erilaisia säätöjä, mutta onneksi sinne mahtuu lisääkin :) Nappasin tästä mukaani navigaatiopalkin piilottamisen. Super juttu!

    Kiitos paljon ja hyvää viikon jatkoa!

    VastaaPoista
    Vastaukset
    1. Ihana kuulla muista CSS-rakastajista :D Toivottavasti olet tyytyväinen navin poistamiseen :)

      Poista
  2. Hei kiitos näistä! Minua on ärsyttänyt navigaatiopalkki, joten nyt se lähtee! :D

    VastaaPoista
    Vastaukset
    1. Jes! Toivottavasti tuo mukavan sävähdyksen blogiin :)

      Poista
  3. Ihan mahtavia vinkkejä. Kiva, että jotkut osaa ja ennen kaikkea auttaa meitä osaamattomia! :)

    VastaaPoista
    Vastaukset
    1. Toivottavasti on hyötyä. Kiitos ja kumarrus ihanista sanoista :)

      Poista
  4. Kiitos Minttu! Tuota otsikon väriä voisin muuttaa vaikka ensi perjantaina, kun meinaan pistää oman linkityksen pystyyn. Apua!:D Postaus on valmiina, mutta mietin tuon inlinkizin käyttämistä(Nyt voi kyllä olla termit hieman hukassa)...Voiko se tehdä jo ennakkoon postaukseen? Tuota kehysten poistamista olen miettinyt monta kertaa. Ehkä teen sen samalla!:) Kiitos!<3

    VastaaPoista
    Vastaukset
    1. Voi tehdä ennakkoon. Laitat vaan alkamisajan ja -päivän mieleiseksi :)

      Poista
  5. Voi onneksi mä löydin sun blogin! Ihanaaaaa! Kiitos!!!

    VastaaPoista
    Vastaukset
    1. Ole hyvä! Mukavaa, että poikkesit :)

      Poista
  6. Luultavasti tellekin tulee apua näistä. Pitänee koittaa näistä jotain/joitakin joku päivä nii oppii css-koodien käyttöä bloggerissa.

    VastaaPoista
    Vastaukset
    1. Suosittelen! CSS-koodeilla on mukava leikkiä :)

      Poista

Olisin erittäin otettu jos jättäisit minulle kommentin :)