Latest Stories

Horizontal Menu Biasanya terletak di bawah header dan berfungsi untuk memudahkan pengunjung untuk menelusuri artikel di blog kita yang kita kehendaki. Contoh Horizontal menu seperti ini



Hehe.. langsung saja ia ke tutorialnya, lagi nggak bisa mikir nie, hehe. Disini saya akan memberikan tutorial tentang cara membuat Horizontal menu seperti horizontal menu yang ada di blog saya ini.

  1. Login ke account Blogger anda.
  2. Masuk ke tata letak dan edit HTML.
  3. Cari Kode ]]></b:skin>
  4. Copy pastekan kode berikut diatas kode ]]></b:skin> tadi.
/*  navbar
==================  */
#bg_nav {
    background: #000000;
    width: 660px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    overflow: hidden;
    }
#bg_nav a, #bg_nav a:visited {
    color: #FFFFFF;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }
#bg_nav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }
#navleft {
    width: 440px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
#navright {
    width: 200px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 6px 5px 0px 0px;
    }
#navright a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }
#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
#nav a, #nav a:visited {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #000000
    }
#nav a:hover {
    background: #6e6d6d;
    color: #FFFFFF;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    }
#nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
#nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 150px;
    }
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #333333;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    }
#nav li li a:hover, #nav li li a:active {
    background: #666666;
    padding: 7px 30px 7px 10px;
    }
#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }
#nav li:hover ul {
    left: auto;
    display: block;
    }
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
      5.  Lalu cari kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
6.  Setelah ketemu Copy pastekan kode berikut dibawah kode yang tadi.
<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.blogspottutorial.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>My Notes</a></li>
<li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
<li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>

</ul>
</div>
</div>

<div id='navright'>

<form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

    </div>

</div><!-- akhir bg_nav -->
7. Simpan template dan selesailah sudah .. hehe
Untuk kode yang berwarna merah diatas anda harus sesuaikan dengan template anda.
Contoh :
          #bg_nav {
          background: #000000;
           width: 660px; 
Kode yang berwarna merah tersebut bisa anda ganti dengan 990px, sesuaikan dengan template anda.

Semoga Berhasil..

Membuat Horizontal Menu

Categories:

4 Responses so far.

  1. duh pusing2...
    liat kode html kya gtuan...
    yang lebih simple ada g ya.....
    makasih

  2. kan itu cuma di copy paste duank, jadi gag usa dipikir berat".. hehe, ia ntr di postingan berikutnya tak buat yang lebih simple lagi..

  3. Reizsha says:

    Mas tanya, Header wrapper itu sebenarnya fungsi nya untuk apa mas?
    sorry ya banyak nanya, maklum masih pemula...

  4. yang nomer 5 itu gmna mksdnya?

Leave a Reply

You Comment i follow .. Silahkan isi komentar ^_^