Beauty

Bordowe rozwijane menu pod nagłówkiem dla Bloggera

Demo

Umieszczanie kodu

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Szablon => Edytuj kod HTML szablonu.
3. Kliknij w okno edytora i wciśnij Ctrl + F.
4. W wyszukiwarkę wpisz:
</header>
5. Wciśnij Enter, by wyszukać znacznik.
6. Tuż nad wyszukanym znacznikiem wklej poniższy kod:

     <nav id='menu'>
      <ul>
        <li>
          <a href='#'>
            Start
          </a>
        </li>
        <li>
          <a href='#'>
            Tutoriale
          </a>
        </li>
        <li>
          <a href='#'>
            Szablony
          </a>
          <ul class='menus'>
            <li>
              <a href='#'>
                Blogger
              </a>
            </li>
            <li>
              <a href='#'>
                WordPress
              </a>
            </li>
            <li>
              <a href='#'>
                Strony www
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>
            Skrypty
          </a>
        </li>
        <li>
          <a href='#'>
            Dodatki
          </a>
          <ul class='menus'>
            <li>
              <a href='#'>
                Blogi
              </a>
            </li>
            <li>
              <a href='#'>
                Fora
              </a>
            </li>
            <li>
              <a href='#'>
                Strony
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>
            Blokotek.pl
          </a>
        </li>
      </ul>
    </nav>

<style>
#menu {
background-color:#C27779;
color:#fff!important;
height:55px;
width:960px;
margin:0 auto 5px;
}

#menu ul,#menu li {
list-style:none;
margin:0 auto;
padding:0;
}

#menu ul {
height:45px;
width:1155px;
}

#menu li {
float:left;
display:inline;
position:relative;
border-right:1px solid rgba(255,255,255,0.22);
-webkit-transition:background .25s ease-in;
-moz-transition:background .25s ease-in;
-ms-transition:background .25s ease-in;
-o-transition:background .25s ease-in;
transition:background .25s ease-in;
font-family:Arial;
font-weight:400;
font-size:16px;
color:#fff;
}

#menu a {
display:block;
line-height:55px;
text-decoration:none;
color:#fff;
padding:0 25px;
}

#menu li a:hover {
color:#fff;
background:#E6B1A4;
}

#menu input {
display:none;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
margin:0;
padding:0;
}

#menu label {
font:bold 30px Arial;
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center;
}

#menu label span {
font-size:12px;
position:absolute;
left:35px;
}

#menu ul.menus {
height:auto;
overflow:hidden;
width:180px;
background:#E6B1A4;
position:absolute;
z-index:99;
display:none;
}

#menu ul.menus li {
display:block;
width:100%;
font:13px Arial;
text-transform:none;
text-shadow:none;
}

#menu ul.menus a {
color:#333;
}

#menu li:hover ul.menus {
display:block;
}

#menu a.prett {
padding:0 27px 0 14px;
}

#menu a.prett::after {
content:"";
width:0;
height:0;
position:absolute;
top:23px;
right:9px;
border-color:#FFF transparent transparent;
border-style:solid;
border-width:6px 5px;
}

#menu ul.menus a:hover {
background:#C27779;
color:#FFF;
}
</style>
7. # zaznaczone na zielono zamień na linki.
8. Zapisz szablon.

Dostosowywanie

color:#fff!important; /* kolor czcionki */
background-color:#C27779; /* kolor tła menu */
width:960px; /* szerokość menu */

Instagram