Sunday, December 14

HTML & CSS TIPS #5

Sunday, December 14

Vandaag leer ik jullie superhandige css basics! Om aan je layout wat kleine maar leuke dingen te veranderen. Zo kan je bijvoorbeeld een randje om je post titel creëren, of hij nu gestipt, dubbel of gestreept is, er zijn heel veel mogelijkheden. En het is helemaal niet zo abracadabra als het lijkt! Ik hoop dat ik jullie weer een beetje op weg help om css en html beter te snappen. Ben je benieuwd? Klik dan op lees meer!



Dit zijn hele basics tips, dus waarschijnlijk kent het grootste deel van jullie deze al, of juist helemaal niet. Ik weet dat ik geen 'expert' ben op dit gebied, en zo zie ik mezelf ook niet, maar toen ik net begon met bloggen op blogger wist ik echt niet dat dit allemaal bestond, en snapte ik uberhaupt de uitleg niet altijd. Nu wel hoor, trouwens. Maar daarom heb ik voor jullie deze tips en niet voor de pageviews of iets dergelijks (dat las ik ergens dat mensen dat vonden, en ik zou het heel erg jammer vinden als jullie dit zo zien)


Wat deze codes inhouden
Dit zijn codes waarmee je verschillende samenstellingen kan maken waardoor je een bepaald deel van je layout helemaal zelf kan 'customizen', hoe en wat? Dat zie je zo!


Voordat je begint
- Als eerste; sla ALTIJD je template op voordat je gaat coderen, je weet nooit wat er mis kan gaan!
- In blauw staan de codes, in rood staat het gedeelte dat je zelf moet bewerken en zelf kan kiezen.
- Als er OF staat, dan betekent het dat je tussen de aangegeven codes moet kiezen
- In Schuingedrukt staat de nodige uitleg erbij, die moet je natuurlijk weghalen, haha.
- Hex Kleur is een kleuren code, en HIER kan je allemaal verschillende kleurencodes bekijken!
- En ga er voor deze codes wel even voor zitten, dan kan je lekker alles uitproberen :)


De codes
Als eerste de dingen die je wilt bewerken. Stel je voor dat je de titels in je sidebar (links of rechts van je post) wil bewerken, dan gebruik je dus de code voor Sidebar titels als 'basis' en dan kan je later andere codes gebruiken om ze op je sidebar titels toe te passen!

Blog Post/Pagina titel = h3.post-title
Sidebar titels = .section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2 
Gehele sidebar = .main-innerh2 .column-left-inner, .main-inner .column-right-inner
Datum Header (datum boven de post) = h2.date-header
Blog post titel/ Link kleur = a:link
'Hover' Link kleur (wanneer je met de muis over een link heen gaat) = a:hover
'Visited' Link kleur (wanneer je al met de muis op een link hebt geklikt) = a:visited
Reacties Heading (Titel van 'reacties' onderaan je post) = .comments h4
Reacties Link (De link van 'reacties' onderaan je post) = .post-comment-link


En dit zijn de codes die je kan gebruiken om de bepaalde gedeeltes van hierboven te bewerken:


De achtergrond

background-color: #Hex Kleurencode ;
background: url (''Directe link voor je image'');

Het lettertype
font-size: nummer px;
font-family: de naam van je font;


De tekst

text-transform: lowercase OF uppercase OF capitalize ; (Je tekst allemaal in kleine letters, hoofdletters of de eerste letters van een woord als hoofdletter? Het hangt natuurlijk ook van je lettertype af trouwens)
text-align: left OF center OF right ; (het plaatsen van de tekst: links, gecentreerd of rechts? Bijvoorbeeld je de tekst in je hele sidebar centreren, zoals bij mij)


Tekst Decoratie

text-decoration: underline OF overline OF line-through ;

Randen (om titels etc)
border: Hoe dik je hem wil hebben px;
solid OF dashed OF dotted OF double OF groove OF ridge OF inset OF outset ;
#Hex Kleurencode (Welke kleur wil je je rand hebben)

Als je een rand maar aan een kant wil dan kan een van deze codes gebruiken i.p.v alleen 'border:'
border-left: OF border-right: OF border-top: OF border-bottem: (Links, rechts, boven, onder)



Een voorbeeld & toepassen



Een voorbeeld van een uiteindelijke code:



h3.post-title {border: 1px dotted text-align: center}


Dit is dezelfde code maar dan anders vormgegeven, de spaties en enters maken hier niet uit. Zorg wel dat je altijd open en sluit met '{}'. 

h3.post-title (algemene code voor de titel van je post)
{ (openen)
border: 1px dotted(een gestipte rand om de titel heen van 1px dikte)
text-align: center (de titel is gecentreerd)
} (sluiten)



En hier een voorbeeld van deze code: .comments h4 {border: 1px dashed}




En zo kan je de code toepassen: Ga naar Blogger dashboard > sjabloon > aanpassen > geavanceerd > css toevoegen > en voeg de code(s) toe!



Dit was alles!
Probeer lekker uit wat alles betekent en wat je wel of niet mooi vind, en als je vragen hebt kan je die altijd stellen hieronder in! Ik zal je proberen te helpen :)


Meer HTML tips tutorials kan je hier vinden:



Gebruik jij wel eens css?



Liefs,

Naomi

24 comments :

Wat lief dat je een reactie achterlaat en leuk dat je even kijkt op mijn blog! De reacties ouder dan 4 dagen worden gemodereerd :)

Liefs,

  1. JAA! Omg, leuk dat je dit weer hebt gepost! Je hebt zulke goede tips!
    Liefs,
    Val ❤️

    ReplyDelete
  2. Wauw! Geweldig tips! Ik ben gelijk aan de slag gegaan! Heb je nog een tip voor een goed font site (of waar je die fonts überhaupt kan vinden ;)
    Liefs

    ReplyDelete
    Replies
    1. Kijk eens op Google fonts! (http://www.google.com/fonts) Ontzettend veel mensen (zelfs de hele grote blogs) halen hun fonts daarvan af. De uitleg kan je daar vinden.
      Liefs,

      Delete
  3. Echt een superhandig artikel! Zelf heb ik een roze achtergrond wat ik al superlang wil veranderen naar wit en het lijkt zo'n klein stom ding maar het lukt me steeds niet :( Weet iemand wat ik kan doen?

    ReplyDelete
    Replies
    1. Ga naar sjabloon > aanpassen > geavanceerd > achtergronden > en verander alles naar wit!
      Liefs,

      Delete
    2. Thanks, maar heb ik ook al geprobeerd maar het werkt niet :(

      Delete
  4. Dit vind ik altijd zulke handige artikelen, thanks for sharing ^^ x

    ReplyDelete
  5. Ooh, nee. Ik wilde ook een gelijkaardig artikel posten over een paar dagen. Maar je bent me dus voor nu, haha. e hebt alles wel erg goed uitgelegd. (: Is het erg als ik het alsnog post? (Ik zal het wat aanpassen dan. (: )

    ReplyDelete
  6. Wat handig! Ik was net bezig met het veranderen van mijn blog (again, oops) dus dit kan ik nu zeker gebruiken! ♥

    ReplyDelete
  7. Erg handig weer! Ik ga me lekker met een kop thee achter mijn laptop gaan zetten ;)

    ReplyDelete
  8. Oh wat ontzettend handig dat je dit allemaal op 'n rijtje hebt gezet, you're my lifesaver hehe..<3
    X Emma

    ReplyDelete
  9. Aah wat een fijne post! Ik ga eens kijken of ik wat nieuwe dingen kan veranderen! Hoe doe je trouwens die sneeuwvlokjes? Ik ben zo lang uit al het bloggen geweest, ik ga even kijken naar je andere posts :)

    ReplyDelete
  10. Erg handig, ik kijk er vaak filmpjes over. Zo kun je van een gratis Blogger template makkelijk een professioneel uitziende blog maken :)

    ReplyDelete
  11. Super handige tips!
    Zeker voor mij, want jeetje wat ben ik atechnisch hihi
    Wat een leuke blog trouwens

    xoxo

    ReplyDelete
  12. Wat een goede tips, dit ga ik zeker een keer uitproberen!

    ReplyDelete
  13. Heel erg handig!! Ben namelijk best wel slecht met codes en dat soort dingen :')

    Love,
    Didem.

    ReplyDelete
  14. Wat een goede tips! Ik ga ze zeker eens gebruiken, bedankt!

    ReplyDelete
  15. Wauw supertips! Ik kwam op je blog en heb een aantal artikels gelezen ik vind je blog en je artikels natuurlijk echt superleuk om te lezen!
    X Anne-Lynn.

    ReplyDelete
  16. Hm, ik zou dit zo graag willen leren maar zelfs nu lijkt het nog Chinees voor me ;(

    ReplyDelete
    Replies
    1. Aaawh, wat jammer! Doe het gewoon met knippen en plakken, dat doe ik nu namelijk ook nog, haha. Je kan me trouwens alles vragen hoor!

      Delete
  17. Aaah dankjewel! Hier ga ik zoveel aan hebben!

    ReplyDelete
  18. Super handige tips. Ik ben het gelijk gaan proberen! Alleen weet ik niet wat ik verkeerd doe maar bij mij lukt het niet :(

    ReplyDelete
  19. Super bedankt voor je tips! HTML lijkt wel chinees, maar nu weet ik tenminste waar ik kan beginnen haha.

    ReplyDelete
© LKTH 2014-2015 | BLOG DESIGN BY Labinastudio