Si Biru Menubar Keren untuk Blogger

Tweet

Si Biru Menubar Keren untuk Blogger - Haloo teman-teman, seperti yang saya tulis sebelumnya mengenai "Si Itam Menubar keren untuk Blogger", namun kali ini saya akan menuliskan Si Biru Menubar Keren untuk Blogger yang pastinya cukup keren untuk blog/situs Anda. Jadi tunggu apa lagi, simak saja!

Cara Menerapkan Si Biru Menubar Keren untuk Blogger:

1. Buka akun blogger Anda.
2. Masuk ke menu edit HTML
3. Cari kode dibawah ini:

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas:

#si_biru {
 width:800px;
 background:#166bea;
 border-bottom: 5px solid #993300;
 border-top: 1px solid #e14d09;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #si_biru ul {
 float: left;
 width: 100%;
 }
 #si_biru li {
 float: left;
 list-style-type: none;
 }
 #si_biru li a {
 background:#166bea;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #si_biru li a:hover {
 background:#002660;
 color: #fff;
 }
 #si_biru li li a {
 background: none;
 background-color: #0d56c4;
 border: 1px solid #0d408d;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #si_biru li li a:hover {
 background: none;
 background-color: #166bea;
 }
 #si_biru li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #si_biru li:hover ul {
 left: auto;
 }  

    5.  Lalu cari kode dibawah ini:

<div id='content-wrapper'>

    6. Tepat diatasnya pastekan kode dibawah ini:

<div id="si_biru">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="http://d-copy.blogspot.com/">Menu 5</a></li>
</div>

      7.  Ganti "#" dengan URL yang Anda ingingkan

      8.  Save template Anda.

Maka, demikianlah artikel Si Biru Menubar Keren untuk Blogger, semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.