Membuat Menu Horizontal Gaya Woodmag Ipietoon

      Terus terang postingan ini saya buat karena iseng bingung mau posting apa lagi, temen nanya udah dijawab, tentang bikin menu horizontal, tapi ya iseng-iseng berhadiah (pahala) ni tutorial hampir sama sama yang sebelumnya. Tapi hasilnya dijamin beda!!
      Menu kali ini saya ajarkan yang bergaya woodmag seperti yang saya punya. Untuk membuatnya anda bisa menggunakan tutorial berikut:

1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
   
4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini pada template pembaca:
   b:section class='header' id='header' maxwidgets='1' showaddelement='no'   jika tidak ada bisa di coba dengan klik ctrl+f dan masukkan kata b:section class='heade
6. Biarkan angka 1, Jangan diganti dengan 2, Juga kata no jangan dirubah dengan yes 
7. terus dibawahnya ada kode: b:widget id='Header1' locked='true'  
8. Ganti true dengan false Terus save template 
9. Setelah itu kopi kode berikut

<div id='wrap'>

<div id='top-wrap'>
   <div id='navwrap'>   
    <div class='topnav'>
    <ul id='topnav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='URL'>NAMA</a></li>
<li><a href='URL'>NAMA</a></li>
<li><a href='URL'>NAMA</a></li>
<li><a href='URL'>NAMA</a></li>
    </ul>
        </div>

    </div>
<div id='navwrapright'>
<div class='topnavright'>
<ul id='topnavright'>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

<div id='nav'>
      <ul id='nav'>
       <li>
          <a href='URL' target='_blank'>NAMA</a>
          <ul>
            <li><a href='URL' target='_blank'>NAMA</a></li>
                <li><a href='URL' target='_blank'>NAMA</a></li>
          </ul>
        </li>
        <li>
          <a href='URL' target='_blank'>NAMA</a>
          <ul>
            <li><a href='URL' rel='nofollow' target='_blank'>NAMA</a></li>
            <li><a href='URL' target='_blank'>NAMA</a></li>
          </ul>
        </li>
        <li>
          <a href='URL' target='_blank'>NAMA</a>
          <ul>
            <li><a href='URL' target='_blank'>NAMA</a></li>
            <li><a href='URL' target='_blank'>NAMA</a></li>
            <li><a href='URL' target='_blank'>NAMA</a></li>
          </ul>
        </li>
        <li>
          <a href='URL' target='_blank'>NAMA</a>
          <ul>
            <li><a href='URL' target='_blank'>NAMA</a></li>
            <li><a href='URL' target='_blank'>NAMA</a></li>
            <li><a href='URL' target='_blank'>NAMA</a></li>
          </ul>
        </li>
        <li><a href='URL' target='_blank'>NAMA</a></li>
        <li><a href='URL' target='_blank'>NAMA</a></li>
        <li><a href='URL' target='_blank'>NAMA</a></li>
      </ul>
    </div>

   10.  Jangan lupa mengganti kode URLyang berwarna biru dan nama yang berwarna merah.
   11.  Paste dibawah kode

<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>

Kemudian untuk pengaturan kopi kode dibawah ini:

/*The top Menu*/


#top-wrap{
       margin:auto;
       padding:0;
       width: 980px;
       background:#1b1613;
}
#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a { font-weight:normal; font-size:11px; text-transform:uppercase; display:block;padding:15px;color:#a4a5a1;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}

#navwrapright {margin: 0px auto; width:400px; float:right; text-align:right;}
       .topnavright ul {list-style:none;margin:0;padding:0px;  float:right;}
       .topnavright li {float:left;margin:0;text-align:center;}
       .topnavright li a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYl9Zj1knNOzQpjNVDYSg5SQX2djxrUALqKusRxjGFPpxxIPpoHhdGvc6b1wUZAgmKEFjBjDkq48xH-zUYrk4FuGgmw7OLW4O4HSI9E17339cJ9BIHNv3P-4nvQcYv6PrFG8BFJuIoKuuy/s1600/rss.png) no-repeat left center; font-weight:normal; font-size:11px; text-transform:uppercase; display:block;padding:15px 10px 10px 20px;color:#a4a5a1;text-decoration:none;}
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}


/* Navigation Menu
------------------------------------------------------*/
#nav {
        background:#372c24;
    width: 980px;
    font-size: 11px;
    color: #a79578;
    font-weight: bold;
    margin: 0 auto 0px;
    padding: 0px auto 0px;
}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 7px 10px;
}
#nav li a:hover, #nav li a:active {
        background:#f3f2e8;
        color:#372c24;
    margin: 0;
    padding: 7px 10px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #372c24;
    width: 150px;
    color: #FFF;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #372c24;
    border-left: 1px solid #372c24;
    border-right: 1px solid #372c24;
}
#nav li li a:hover, #nav li li a:active {
    background:  #a79578;
    color: #FFF;
    padding: 7px 10px;
}
#nav li {
    float: left;
    padding: 0;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#nav li ul a {
    width: 140px;
}
#nav li ul ul {
    margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}/*The top Menu*/


#top-wrap{
       margin:auto;
       padding:0;
       width: 980px;
       background:#1b1613;
}
#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a { font-weight:normal; font-size:11px; text-transform:uppercase; display:block;padding:15px;color:#a4a5a1;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}

#navwrapright {margin: 0px auto; width:400px; float:right; text-align:right;}
       .topnavright ul {list-style:none;margin:0;padding:0px;  float:right;}
       .topnavright li {float:left;margin:0;text-align:center;}
       .topnavright li a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYl9Zj1knNOzQpjNVDYSg5SQX2djxrUALqKusRxjGFPpxxIPpoHhdGvc6b1wUZAgmKEFjBjDkq48xH-zUYrk4FuGgmw7OLW4O4HSI9E17339cJ9BIHNv3P-4nvQcYv6PrFG8BFJuIoKuuy/s1600/rss.png) no-repeat left center; font-weight:normal; font-size:11px; text-transform:uppercase; display:block;padding:15px 10px 10px 20px;color:#a4a5a1;text-decoration:none;}
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}


/* Navigation Menu
------------------------------------------------------*/
#nav {
        background:#372c24;
    width: 980px;
    font-size: 11px;
    color: #a79578;
    font-weight: bold;
    margin: 0 auto 0px;
    padding: 0px auto 0px;
}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 7px 10px;
}
#nav li a:hover, #nav li a:active {
        background:#f3f2e8;
        color:#372c24;
    margin: 0;
    padding: 7px 10px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #372c24;
    width: 150px;
    color: #FFF;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #372c24;
    border-left: 1px solid #372c24;
    border-right: 1px solid #372c24;
}
#nav li li a:hover, #nav li li a:active {
    background:  #a79578;
    color: #FFF;
    padding: 7px 10px;
}
#nav li {
    float: left;
    padding: 0;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#nav li ul a {
    width: 140px;
}
#nav li ul ul {
    margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya.

Setelah itu paste dibawah kode pengaturan untuk tampilan header kira kira seperti dibawah ini: Perhatian tidak semua template blog sama kodenya jadi cari yang mirip OK!! Bisa dicari dengan memasukkan keyword "#header" tanpa tanda petik.

/* Header
-----------------------------------------------*/
#header-wrapper{
    width: 960px;
    color: #fff;
    margin: 30px auto 0;
    padding: 0px;
    overflow: hidden;
}
#header-inner {
    background-position: left;
    background-repeat: no;
}
.headerleft h1 {
    color: #FFF;
    font-family: Georgia, Times New Roman;
        font-size:40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.headerleft h3 {
    font-family: Lucida sans unicode,Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.headerleft .description {
    color: #ffffff;
    margin-left: 0px;
    padding-left: 20px;
        font-family:Georgia, Times New Roman;
        font-size:18px;
        font-style:italic;
        font-weight:bold;
}


.headerleft {
         width: 980px;
         float: left;
         margin: 0;
         padding: 0;
}
.headerright {
         width: 980px;
         float: right;
         margin: 0;
         padding: 0;
         font-weight: bold;
}

Pastikan kode header telah habis kemudian anda pastekan kode diatas

lalu save template.

Lihat hasilnya. 
Semoga berhasil dan sukses. 

Silahkan komentar dibawah bila anda gagal/berhasil,  juga bila ada yang ingin anda ditanyakan.