HTML en CSS #6 menubalk boven aan toevoegen en customizen (top menu bar) Blogger lay-out

11 januari 2016




 Ik kreeg laatst de vraag hoe ik mijn pagina's boven aan mijn blog had gezet in plaats van op de standaart blogger plaats, ik ben zelf lang hier naar op zoek geweest en heb het gevonden en vandaag laat ik het aan jullie zien! Kijk je mee?


Ga naar Blogger-->sjabloon-->HTML bewerken en zoek deze code op:

</head>

Plak dan onderstaande code direct(!!) onder </head>

<style>

#wctopdropcont{
  width:1400px;
  height:35px; (pas deze aan om de hoogte van de menubar te veranderen.)
  display:block;
  padding:0;
  margin:0 0 22px 0;

 z-index:100;
top:0px;
left:0px;
 position:fixed;
    box-shadow:1px 1px 1px  #F0F0F0;
-moz-box-box-shadow:1px 1px 1px  #F0F0F0;
-web-kit-box-shadow:1px 1px 1px  #F0F0F0;
-goog-ms-box-shadow:1px 1px 1px  #F0F0F0; (wil je geen schaduw onder de menubar? Haal dan deze vier box-shadow lijnen weg.)
background:#ffffff; (verander de kleur van je menu-bar door hier een andere kleurcode in te vullen.)
}

#wctopdropnav{
  float:center;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:325px; (kies een ander getal om de afstand van je links in de menubar kleiner of groter te maken)
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:35px;
  margin:0;
  padding:0

}

#wctopdropnav li a, #wctopdropnav li a:link{
  color:#666; (de kleurcode voor de letters. Deze kun je ook veranderen. Mocht je zwarte letters willen, zet hier #000 neer.)
  float: center;
  display:block;
  margin:0;
font:14px Georgia; (verander het lettertype en de grootte van het lettertype in de menubar tot het helemaal naar jouw smaak is.)
  padding:7px; (hiermee kan je de afstand tussen de links veranderen.)
  text-decoration:none;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
  color:#66AAFF; (dit is de kleur van de letters als je met je muis op de link staat. Kun je veranderen, als je wilt.)
  padding:7px; (hier kan het beste hetzelfde cijfer staan als de padding-code hierboven).

}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 13px; (grootte van het lettertype in het dropdown-gedeelte. Wat is dropdown? Als je met de muis over ´categorie├źn gaat komen alle opties gelijk tevoorschijn.  Wil je dit niet? Laat de code dan gewoon en verander hier niks aan.)
background:#fff; (achtergrond van het dropdown-gedeelte.)
  color: #888; (kleur van de links in het dropdown-gedeelte).
  width: 70px; (breedte van het dropdown-gedeelte.)
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
  color: #CC309A; (de kleur van de link in het dropdown-gedeelte als je er met je muis op gaat staan.)
}

#wctopdropnav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
  left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
  position:static
}
#wctopdropsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>

  <div id='wctopdropcont'>
     <div id='wctopdropnav'> (Vul hier de links in die je in het menu wilt. De 'home', 'about', etc. kun je ook veranderen naar jouw wens. Haal het dan weg en zet er neer wat je wilt.)
         <ul>
           <li><a href='vul hier een link in'>Home</a></li> 
           <li><a href='vul hier een link in'>About</a></li>    
           
           <li><a href='vul hier een link in'>Contact</a>
         
           </li>
    <li><a href='#'>Categories</a>
              
             <ul>
                  <li><a href='vul hier de link van de categorie in'>Fashion</a></li>
                  <li><a href='vul hier de link van de categorie in'>Lifestyle</a></li>
                  <li><a href='vul hier de link van de categorie in'>Beauty</a></li> (je kunt er natuurlijk nog meer toevoegen. Wil je het dropdown-gedeelte niet gebruiken? Verwijder dan deze links, ik heb dit bijvoorbeeld ook weggelaten maar omdat anderen dit misschien wel willen heb ik het er toch nog bij gezet)
    
               </ul>
           </li>
           <li><a TARGET='_blank' href='vul hier een link in'>Twitter</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Bloglovin'</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>YouTube</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Lookbook</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Instagram</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Pinterest</a></li> (geen Twitter? Dan kun je deze lijn verwijderen. Heb je nog een ander social media kanaal wat er niet bij staat, dan kan je je eigen link toevoegen)

         </ul>
      </div>

      <div id='wctopdropsoc'>
         
      </div>
   </div>

Gelukt? Klik op 'preview' en kijk of het allemaal goed is gegaan. Onthoud: alle dingen die tussen haakjes staan (die ik er dus bij geschreven heb) die moet je eerst weghalen anders werkt de code niet. Lukt het niet helemaal of heb je nog vragen dan mag je ze altijd stellen in de comments. Het is slim dat je voor je alles opslaat even op voobeeld klikt om te zien of het allemaal goed is gegaan, ik heb ook eerst een beetje lopen prutsen omdat het niet lukte maar na een beetje oefenen kom je er wel uit en het leuke is: je kan hem helemaal designen naar jou smaak, lettertype, kleur, grootte, je kan het allemaal veranderen!

3 opmerkingen

  1. Super bedankt <3 Deze serie is super fijn ;)

    BeantwoordenVerwijderen
  2. Super bedankt <3 Deze serie is super fijn ;)

    BeantwoordenVerwijderen
  3. Haii! Zou je miss kunnen uitleggen hoe je dat 'My instagram' doet? En hoe je in plaats van lees oudere berichten die nummers hebt gedaan? Dankje <3

    BeantwoordenVerwijderen

Latest Instagrams

© Inspiregirll. Design by Fearne.