Cara Membuat Menu Bar Keren 2013 Part 1

Hai sobat blogger, tutorial kali ini kita akan membahas menu bar yang cukup keren dan simpel untuk Anda gunakan yang diberikan dengan nama Si Itam Menu Bar Keren dan Simpel untuk Blogger. Simak & lakukan 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.

Anda baru saja membaca artikel yang berkategori Tutorial Blogger dengan judul Cara Membuat Menu Bar Keren 2013 Part 1. Anda bisa bookmark halaman ini dengan URL http://predator-technology.blogspot.com/2013/07/cara-membuat-menu-bar-keren-2013.html. Terima kasih!

Ditulis oleh: VeRZaW#021 - 5 July 2013