HTML en CSS codes │TIPS


Ik krijg vaker en vaker de vraag hoe je bevoordeeld iets moet centreren of hoe je een dropdown menu moet maken. In dit artikel leg ik je vanalles uit hoe je je blog mooier en beter kunt maken. Lees je mee?



Hoe haal je de kadertjes rond je foto's weg?
——————————

Op mijn vorige blog had ik allemaal foto's met kadertjes rond en lelijk vond ik dat! Maar toen had ik niet echt gezocht naar codes om dat te verwijderen (ik wist totaal niks van html en css codes dus ja) maar nu ik weet hoe ik het moet verwijderen, vind ik mijn blog net iets leuker. 

Allereerst ga je naar de homepage van blogger // sjabloon // aanpassen // geavanceerd // CSS toevoegen en dan voeg je in het witte gedeeelte deze code in:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}


Dan slaag je hem nog op en weg zijn de randjes rond je foto's.


Hoe maak je een dropdown menu? 
——————————

Super handig zo'n menu! Hier de stappen om hem te maken:

Homepage van Blogger // Pagina's // Nieuwe pagina ( dan maak je verschillende pagina's zoals bevoorbeeld met titel: ABOUT, dan schrijf je wat over jezelf en dan slaag je hem op. De HOME pagina moet je NIET doen) // Indeling // In Cross-Column voeg je een gadget toe // Pagina's // Vink je je pagina's aan en verander je 'Startpagina' in bevoorbeeld HOME. Als je wil kan je zo nog altijd veranderen door erop te blijven klikken en te verschuiven.

Opslaan en dan heb je op je blog een dropdownmenu.



Dingen centreren
—————————

Zo voeg je ze in:

Homepage Blogger // Sjabloon // Aanpassen // Geavanceerd // CSS toevoegen


Post-title centreren

.post-title {text-align:center;}


Blog header centreren

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align: Center ;}


Gadget/widget centreren

.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2 {text-align: center;}


Read More centreren

.jump-link {

text-align: center;

}


Sidebar centreren

.main-inner .column-left-inner, .main-inner .column-right-inner {text-align: center;}


Post datum centreren

.date-header {text-align:center;}




Ik hoop dat ik jullie een beetje heb geholpen en het goed hebt uitgelegd en als jullie willen, komt er ook nog een tweede deel van! Als je iets niet snapt, treuzel niet om het te vragen, ik bijt niet!



4 opmerkingen:

  1. Wat handig, ik ben dol HTML tutorials. Zonder ben ik echt hopeloos.

    BeantwoordenVerwijderen
  2. Superhandig, die uitleg. Ben zelf niet heel goed in codes dus dit is dan wel handig :-) En het is eindelijk gelukt om die lelijke randen weg te krijgen!

    BeantwoordenVerwijderen
  3. Ik heb ook nog een vraagje, hoe moet je je dropdown menu centreren?

    BeantwoordenVerwijderen