Membuat menu navigasi horizontal

Menu navigasi horizontal ini bisa ditambahkan pada blog anda jika pada blog anda belum memiliki, menu navigasi horizontal ini akan mempermudah dan memperindah tampilan blog anda dimata pengunjung, penambahan menu ini disarankan bagi blog anda yang belum memiliki navigasi horizontal.

seperti apa menu navigasi horizontal dengan CSS menu navigasi horizontal ini biasanya terletak tepat dibawah element header, anda bisa melihat pada tampilan blog ini! atau bisa langsung melihat demo menu navigasi yang akan dibuat disini, nah untuk menambahkan menu tersebut anda bisa menggunakan kode/script punya saya dibawah ini :

Cara membuat navigasi horizontal dengan CSS:

1. Login ke blogger

2. Klik Rancangan

3. Klik Edit HTML

4. Carilah kode ]]></b:skin> kemudian letakkan CSS berikut tepat diatasnya (tekan Ctrl + F untuk memper mudah pencarian)

ul#menu{

    margin:0;

    padding:0;

    list-style-type:none;

    width:auto;

    position:relative;

    display:block;

    height:36px;

    text-transform:uppercase;

    font-size:12px;

    font-weight:bold;

    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsKx_wtQn_xHuzKgJWlmXVxpa-t48bTNQ5xGoDVy-9X6QhDbfdvZ2PYN-IBthnC2LZ0JKVXB7EnapUtLSjzgpRkS9BAy5Q9JVLm2cKHCVXURt2Gb4aW3Kj5PU6bPjfv_aj6_XjsZH4P-Q/s320/OFF.gif") repeat-x top left;

    font-family:Helvetica,Arial,Verdana,sans-serif;

    border-bottom:1px solid #74b0c6;

    border-top:1px solid #74b0c6;

}

ul#menu li{

    display:block;

    float:left;

    margin:0;

    pading:0;}

ul#menu li a{

    display:block;

    float:left;

    color:#6d7078;

    text-decoration:none;

    font-weight:bold;

    padding:12px 20px 0 20px;

    height:24px;

    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cbXE-0tUUVOMta2Sk_twXVwkV71K4eqwAPGfU84Qud646UJ_kDsQL5b8VvPPlqoNflwiC2_q_MenbUbKmE-SwdVrJ8ZV-inku3Ej0XhxQn_MBDvC0QZcsGaG0rwlD7iTdvwcrSYVFgoA/s320/DIVIDER.gif") no-repeat top right;

    }

ul#menu li a:hover{

    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1j8dgVHY0-sXqCa53I9wHJ-3s3MYWfg37z988ltb17GhIGpF2wHlyl5tu_04yY_S0C314ZYzUcDJLl5KC2PVt2erCQNFXCp81n0T3N0F8fVRjEa-sBwl3Vyh1ORr9V4oFBUVloZpXdhO/s320/HOVER.gif") no-repeat top right;   

    }

5. Selanjutnya tuju bagian bawah cari kode seperti dibawah ini :

<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. Pastekan kode berikut tepat di bawah kode tadi "Langkah 5" :

<ul id=menu>

    <li><a href=http://blogspot.com title=>Home</a></li>

    <li><a href=http://templatemaxs.com title=>Free templates</a></li>

    <li><a href=http://spot-id.co.cc title=>Spot-id</a></li>

    <li><a href=http://zonablogger.com title=>Artikel Directory</a></li>

    <li><a href=http://www.techradar.com/ title=>Techradar</a></li>

</ul>

7. Rubahlah teks warna merah dengan URL milik anda

8. Jika sudah simpan template



Untuk menyesuaikan dengan tampilan blog anda rubahlah gambar dengan gambar yang sesuai warnanya dengan blog anda dibawah ini contoh gambarnya silahkan simpan dan edit menggunakan PhotoShop sesuaikan dengan warna tampilan blog anda, Kemudian uploadlah gambar tersebut, jika sudah diupload rubahlah teks berwarna hijau diatas "langkah 4" dengan URL gambar yang baru saja anda upload.

URL gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsKx_wtQn_xHuzKgJWlmXVxpa-t48bTNQ5xGoDVy-9X6QhDbfdvZ2PYN-IBthnC2LZ0JKVXB7EnapUtLSjzgpRkS9BAy5Q9JVLm2cKHCVXURt2Gb4aW3Kj5PU6bPjfv_aj6_XjsZH4P-Q/s320/OFF.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cbXE-0tUUVOMta2Sk_twXVwkV71K4eqwAPGfU84Qud646UJ_kDsQL5b8VvPPlqoNflwiC2_q_MenbUbKmE-SwdVrJ8ZV-inku3Ej0XhxQn_MBDvC0QZcsGaG0rwlD7iTdvwcrSYVFgoA/s320/DIVIDER.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1j8dgVHY0-sXqCa53I9wHJ-3s3MYWfg37z988ltb17GhIGpF2wHlyl5tu_04yY_S0C314ZYzUcDJLl5KC2PVt2erCQNFXCp81n0T3N0F8fVRjEa-sBwl3Vyh1ORr9V4oFBUVloZpXdhO/s320/HOVER.gif



Jika blog anda sudah memiliki menu navigasi ini sebaiknya tidak usah ditambahkan karena jika ditambahkan blog anda malah bisa kurang enak dilihat, jika ingin memakai menu diatas sebaiknya hapus dulu menu navigasi yang lama kemudian ganti dengan kode menu yang baru. Dikarenakan kode template pastinya berbeda-beda saya tidak bisa memberi tau persisnya sepertiapa persisnya kode menu milik anda, tetapi anda bisa mencarinya sendiri biasanya terletak dibawah kode header.