HTML & CSS tips #1

zaterdag, augustus 01, 2015 |
Dit is iets wat ik al een hele tijd voor me uit bleef schuiven. Het schrijven van 'het lang verwachte' html&css artikeltje waarin ik uitleg hoe ik mijn read more button had gemaakt. (Oh, wat werd dat veel gevraagd, haha.) En ik beantwoord ook vragen die jullie me stelden in dit artikel. Geen idee of ik dit soort dingen vaker ga doen, maar ik krijg er gewoon kriebels van als mensen zeggen dat je met Blogger niks kan. Want guess what, ik heb mijn lay-out responsive gemaakt. Het kan. En ik help jullie graag op weg. (:

NOTE: Bij elke uitleg vind je twee optie's, een code die ik samenstelde (die je enkel nog hoeft te kopiëren en plakken) of een tweede waar ik uitleg hoe je hem zelf kan maken, zodat je hem in de toekomst nog wat meer 'jou' kan maken. Succes! (:


Hoe ik mijn read more knop maakte

Deze is eigenlijk vrij simpel, hier heb je enkel CSS voor nodig. Onderstaande code plaats je daar.
(Sjabloon→Aanpassen→geavanceerd→css toevoegen)


easy way

.jump-link {
font-size:20px;
text-transform:uppercase;
transition-duration: 2s;
text-align:center; 
padding-top: 40px;
padding-bottom: 15px;
font-family:'playfair display',serif;
font-size:20px; 
background-width:100px;
font-style:normal;
}

.jump-link :hover { 
font-family:'playfair display', serif;
font-size:20px; 
color:#a79b93; 
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 1px #a79b93 solid;
transition-duration: 1s;
}



customise it yourself
(De + moet je weglaten en vervangen door hetgene wat er staat geschreven (getal of dergelijke naar keuze) hetgene dat tussen /* */ staat, mag je laten staan. Dat is de extra uitleg.)


.jump-link {
font-size: + px; /* Deze is voor de grootte van je lettertype, gemiddeld is 'ie 14*/
text-transform: + ; /* Wil je je lettertype in drukletters, typ uppercase, wil je ze in kleine letters, typ dan lowercase */
transition-duration: + s; /* Dit zorgt ervoor dat als je over je read more button gaat, het langzamer tevoorschijn komt */
text-align: + ; /* wil je je read more button links, typ dan left, wil je hem in het midden; typ center, wil je hem rechts, typ right */
padding-top: + px; /* De afstand boven je read more button */
padding-bottom: 15px; /* De afstand onder je read more button */
font-family: + ; /* Het lettertype */
font-style: + ; /*wil je je letters cursief, typ italic, wil je ze gewoon, typ normal */
}

.jump-link :hover { /* dit stukje code zorgt voor hetgene wat er gebeurt als je over je read more button gaat met je muis */
font-family:'playfair display', serif; /* Kies een lettertype, je kan hetzelfde nemen als net of een ander, dat is wat je zelf het leukste vindt */
font-size: + px; /* De grootte van je lettertype */
color: + ; /* De kleur van je lettertype, kijk hiervoor op shamancolor.com */
padding-top: + px; /* deze volgende vier stukjes hoef je niet te doen als je geen rand rond je button wilt */
padding-bottom: + px;
padding-right: + px;
padding-left: + px;
border: + px +   + ; /* Deze is voor het randje rond je button, vul eerst een getal in voor de dikte van de rand, de tweede is voor de kleur en het derde dingetje is om je hem met bolletjes (dotted), in een lijn (solid) of in streepjes (dashed) */
transition-duration: 1s; /* ook hier weer voor de tijd die het erover doet om tevoorschijn te komen */
}


Ik heb me een beetje geïnspireerd op Kosmicfox.com qua vormgeving van deze afbeelding , credits naar haar dus. (:




"Ik vraag me eigenlijk af hoe je je profiel in de sidebar zo mooi met foto en tekst hebt gekregen.. Ik kan alleen maar een afbeelding óf tekst toevoegen."



1. Je gaat naar Indeling en je klikt op Gadget toevoegen.
2. Dan opent er een pop-up venster (zie linkerafbeelding) en klik je op HTML/Javascript
3. Klik dan op Rich text, nu kan je je afbeelding er gewoon in plakken (upload hem bv. eerst via Tinypic, zodat je kan kopiëren en plakken)
4. En daaronder kan je gewoon je tekst schrijven!


"Als er nog geen reactie's zijn staat er in mega letters geen opmerkingen, hoe kun je dit veranderen?"



Je gaat naar je CSS (Sjabloon→Aanpassen→geavanceerd→css toevoegen) en je plakt deze code daar.

.comments h4 {
font-size: 14px;
}

Je kan ook nog het lettertype aanpassen, in drukletters zetten enz. nu staat hij in het gemiddelde tekstgrootte. (:


Ik hoop dat jullie er wat aan hadden en hopelijk zijn er weer een aantal raadsels de wereld uitgeholpen. Mocht het toch nog ingewikkeld zijn of het lukt niet, laat het weten! Laat vragen achter in de comments, of stuur me een mailtje!

Liefs,
Britt

24 opmerkingen :

  1. Dank je wel dat je weer een HTML artikel hebt gemaakt, je legt zo fijn uit :)
    Ik heb de reactie tekst gelijk aangepast.

    BeantwoordenVerwijderen
  2. Alweer zo'n fijne uitleg! Dankjewel Britt, ik ga hier netzoals velen andere veel aan hebben :)

    BeantwoordenVerwijderen
  3. Hier heb ik echt geweldig veel aan! Ik heb nog nooit echt nagedacht over mijn blog heel geavanceerd te maken maar jij hebt me aan het denken gezet.
    Bedankt voor de geweldig handige uitleg!

    BeantwoordenVerwijderen
  4. Heel fijn dat je het zo haarfijn uitlegt. Er staat nu een nieuwe 'meer lezen' knop op mijn blog :)

    BeantwoordenVerwijderen
  5. Aaah, Brit ik zat hier echt op te wachten! Bedankt.

    BeantwoordenVerwijderen
  6. Dit zijn echt heel fijne artikels! Help je heel veel mensen mee ;) Super duidelijk uitgelegd :)

    BeantwoordenVerwijderen
  7. Dankjewel voor dit behulpzame artikeltje! Je legt alles heel duidelijk uit, Britt :)

    BeantwoordenVerwijderen
  8. Wat handig! Ik had ook nog een vraagje, hoe heb jij het gedaan dat je de datum van je artikel onder de naam van je artikel krijgt? En dat de categorie er dan ook bij staat?

    Liefs

    BeantwoordenVerwijderen
    Reacties
    1. Dat zal ik de volgende keer dan eens uitleggen!

      Verwijderen
  9. Dit is voor mij allemaal een beetje Chinees maar zeker en vast heel handig! Ik moet me er echt eens achterzetten want mijn blog heeft dringend een opfrisbeurt nodig!

    X Sara

    BeantwoordenVerwijderen
  10. Handig artikel, sommige dingen wist ik al, maar het is altijd leuk om hier meer over te leren!

    BeantwoordenVerwijderen
  11. Oeh heel erg fijn artikel dit!
    Heb je ook een code of iets om links in een artikel een aparte kleur te maken? Ik heb een template gedownload waardoor ik niks meer kan veranderen en maak nu telkens in de tekst zelf de kleur van een link roze. Voorheen ging dat automatisch..

    BeantwoordenVerwijderen
  12. bedankt voor dit artikel met goede tips, ik ga hier zeker aan werken. Ik kan niet beloven dat ik een wonder met html ben haha maar dit ziet er wel uit alsof ik hier ook tot in staat zou kunnen zijn :) bedankt voor de duidelijke uitleg!
    x

    BeantwoordenVerwijderen
  13. Oh echt superleuk artikel!
    Is dit ook te gebruiken voor wordpress? nee zeker:P?

    xoxo Faye van ByFaye.nl

    BeantwoordenVerwijderen
    Reacties
    1. Nee, helaas niet nee! Je kan de code's wel een beetje aanpassen en ze dan toepassen op Wordpress. Ik kan je ermee helpen als je dat wilt?

      Verwijderen
    2. Hier had ik zelf ook al problemen mee. Maar ik ben er nu wel achter hor je de tekst verandert maar zou niet weten hoe je er ook een mooie knop van kunt maken.
      -x- roos

      Verwijderen
  14. Wat een superhandig artikel dit! Je html en css tips blijven me maar echt verbazen. Liefs, Xxx

    BeantwoordenVerwijderen
  15. Fijn dat je hier een artikel over maakt! Het is dat ik een design heb laten ontwerpen waar een read more knop in verwerkt zit, maar anders had ik hier zeker iets aan gehad!

    BeantwoordenVerwijderen
  16. Wat leuk dat je ons de trucjes van het html'en leert! Ik ga er morgen zeker aan werken, want 100% tevreden ben ik nog niet met mijn lay-out! Ik mail je wel als ik nog een vraagje heb! ;)

    BeantwoordenVerwijderen
  17. Fijn fijn fijn, elke keer als ik weer zo'n artikel tegenkom kan ik mijn blog weer een klein beetje mooier maken! Ik snap er verder helemaal niets van! (snap ook niet waar mensen dit zo snel leren? Ik blog al 2,5 jaar...) Ik ga je volgende artikel nu doorlezen en even nauwkeurig opvolgen ;)

    BeantwoordenVerwijderen
    Reacties
    1. Ik ben er gewoon iets te veel mee bezig haha. (; Succes ermee als je vrageb hebt, je weet me te vinden!

      Verwijderen