Pas het kopgedeelte van uw Blogger.com-blog aan
In de laatste zelfstudie hebben we de sectie Links voor uw Blogger aangepastTM weblog. Nu zullen we de koptekst bovenaan de blog aanpassen. De koptekst bevat de titel en beschrijving van uw blog. We gaan het lettertype of lettertype voor de tekst wijzigen en een gekleurde achtergrond toevoegen.

Net als in de vorige tutorial zullen we deze verbeteringen aanbrengen door enkele regels van de HTML-code van de sjabloon te wijzigen. Klik op het tabblad Sjabloon in het menu boven aan de pagina om naar het gedeelte Huidige sjabloon bewerken te gaan. U vindt de HTML-code voor de sjabloon in het onderstaande vak. We zullen een paar wijzigingen aanbrengen in de CSS-stijlcode. (Volg de onderstaande link voor meer informatie over Cascading Style Sheets.) Blader door de code totdat u het gedeelte Koptekst binnen de CSS-stijltag bereikt. Zoals u kunt zien, is de stijltag erg lang en bestaat het koptekstgedeelte van de stijltag uit zes delen.

  1. @media allemaal
  2. @media handheld
  3. #Blog Titel
  4. # blog-titel a
  5. # blog-titel a: hover
  6. #Beschrijving

  • Het eerste deel van de code (@media all) bepaalt de kenmerken van de koptekst, inclusief de breedte, marge en randgrootte. Het tweede deel (@media handheld) neemt deze kenmerken over van het eerste deel en verandert ook de breedte van de koptekst in 90 procent voor handheld-monitoren. Omdat we de nieuwe achtergrondkleur willen gebruiken die in beide instanties wordt gebruikt, voegen we in het eerste deel (@media all) een coderegel toe voor de achtergrondkleur. Deze nieuwe coderegel is hieronder vetgedrukt. In het onderstaande voorbeeld hebben we een lichtgrijze kleur gebruikt, maar u kunt elke gewenste kleur gebruiken.

    @media all {
    #header {
    achtergrondkleur: # EFE3EF;
    ...

  • Vervolgens zullen we het lettertype voor de titel wijzigen in het populaire, casual vormgegeven lettertype Comic Sans MS. Natuurlijk kun je elk lettertype gebruiken dat je maar wilt. De volgende drie delen van de CSS-code van het sjabloon (# blog-titel, # blog-titel a, # blog-titel a: hover) bepalen de kenmerken voor de titel van de blog. Het eerste deel bepaalt de algemene kenmerken en de andere twee delen bepalen het uiterlijk van de tekst wanneer deze als hyperlink functioneert. Om het lettertype of lettertype van de titel voor alle instanties in te stellen, voegen we de CSS-code voor de lettertypefamilie toe aan het eerste deel (# blog-titel). Omdat onze lettertypenaam spaties bevat, moet deze ook tussen aanhalingstekens worden geplaatst ("comic sans ms").

    #Blog Titel {
    font-family: "comic sans ms";
    ...

  • Ten slotte zullen we werken aan de CSS-code voor de beschrijving van uw blog (#description). Dit is het laatste deel van de oorspronkelijke zes. Zoals u hieronder kunt zien, wordt alle CSS-code die de lettertypekenmerken voor de beschrijvende tekst beheert, samen op één regel vermeld. Het enige wat we hoeven te doen is "komische sans ms" aan de voorkant van de lijst met lettertypen toevoegen, waardoor Comic Sans MS het standaardlettertype voor de beschrijvende tekst wordt.

    #Beschrijving {
    ...
    font: 78% / 1.4em "strip zonder ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    ...
    }

Wanneer u klaar bent, klikt u op de knop Voorbeeld om een ​​voorbeeld van uw wijzigingen te bekijken en sluit u dat browservenster om terug te keren naar de vorige webpagina. Klik op de knop Sjabloonwijzigingen opslaan. Wanneer u het bevestigingsbericht ziet dat de wijzigingen zijn opgeslagen, klikt u op de knop Opnieuw publiceren. Om te controleren of uw blog is bijgewerkt, klikt u op het tabblad Blog weergeven in het menu boven aan de pagina. Mogelijk moet u de webpagina van uw blog vernieuwen om de wijzigingen te zien.





Schermafbeeldingen herdrukt met toestemming van Google Inc. GoogleTM, BloggerTM en BlogSpotTM zijn geregistreerde handelsmerken of handelsmerken van Google Inc. in de Verenigde Staten en / of andere landen.