Membuat Navigasi Menu Blogspot

Website atau blog rasanya kurang lengkap jika tidak ada navigasi menu, karena navigasi menu inilah yang menjadi penunjuk jalan bagi visitor untuk mengakses halaman pada sebuah webste / blog. Untuk membuat navigasi menu pada blogspot tidaklah begitu susah, ikuti cara pembuatannya berikut ini;

1. Login ke account blogger.
2. Navigasikan ke 'Layout' (tata letak) » Klik pada tab 'Edit HTML'.
3. Cari kode ini => "]]></b:skin>".
4. Copy dan pastekan kode di bawah ini di atas kode "]]></b:skin>" ;

#menuanda-wrapper {
width: 100%;
height: 27px;
background: #5bb3fd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
border-top: 0px solid #669999;
padding-left: 0px;
margin-bottom: 9px;
overflow: hidden
}

#menuanda-wrapper h2 {
display: none
}

#menuanda, #menuanda ul {
padding: 0px;
margin: 0;
list-style: none;
font: normal 0.95em arial;
color:#ffffff;
}

#menuanda a {
display: block;
text-decoration: none;
border-right: 0px solid 669999;
border-left: 0px solid #d3e2e2;
color: #003366;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left; 
padding-left: 9px;
padding-right:9px;
padding-top:6px;
padding-bottom: 7px
}

#menuanda a.depan {
padding: 0px;
border-left: 0px none;
width: 90px;
height: 27px;
background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan:hover {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeOmJYJGciiLmDo42V9HJWKmV4k6aAdj-kVm9Y8spZu8f7KI643dUJVQhdSoolUoDAofDGQpPtE_q3R16mYgBrhq4hpdhYStl3oXtnbd7JKqPPA0Cjvyc36psT3f7G8gKWNxXXWVF2hY/s320/hover.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan em {
display: none;
}

#menuanda a.master {
font-weight: bold;
text-transform: capitalize;
}

#menuanda a.buntut {
padding: 0px;
border-left: 0px none;
border-right: 0px none;
width: 27px;
height:27px;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9l13HwbfZVw7OJsxM8bli2HipD1EiyF2r4bPVtHRSfmGJpiLMeJh4r6qhBDUPuEW4t4Wkl7FnNPwxMQ1ZpZYD12vSbQT8B3YZkYQMa-XMt3A-Mu8i6IQylb1-2VnO8LN6tR92lpj0z4/s320/back.gif') no-repeat;
}

#menuanda li {
float: left;
width: 9em;
}

#menuanda li.kanan {
float: right;
border-left: 0px none;
}

#menuanda li ul, #menuanda ul li {
width: 14em;
}

#menuanda ul li a {
color: #ffffff;
border-left: 0px none;
border-right: 0px none;
padding-left: 5px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px
}

#menuanda li ul {
position: absolute;
display: none;
background-color: #5bb3fd;
z-index: 200;
border-right: 1px solid #5bb3fd;
border-left: 1px solid #A8C4C4;
border-bottom: 1px solid #A8C4C4;
margin-left: -1px;
text-align: left;
}

#menuanda li:hover a, #menuanda a:focus, #menuanda a:active{
color: #5BB3FD;
background-color: #dde1e4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDZY2zVPT07oXB3nbDsnZvlH-WDiwCiJxbA9wk6qKTdkJkHOnIPkrAciAZBh2X8DnuG1y5VIO1uLj4Ow9xVa7RnNQo5XCdT-Ga99GsyMC6LphsZ1FXhYGRRJGdkikBGJHIvYKvomaPJM/s320/hover.gif');
background-repeat: repeat-x
}

#menuanda li:hover ul {
display: block;
}

#menuanda li:hover ul a {
color: #000000;
border-top: 1px solid #8A8484;
background-image: url('none');
}

#menuanda ul a:hover {
background-color: #ffffff!important;
color: #ff0000!important;
}

#menuanda li {
width: auto;
}

Beberapa point yang perlu anda modifikasi. Pertama tiga gambar backround navigasi menu untuk menggantikan background image di atas, masing-masing 'normal.gif', 'hover.gif', dan 'back.gif'. 'normal.gif' → background default sebelum ada kontak dengan mouse, 'hover.gif' → muncul ketika mouse di arahkan ke navigasi menu, 'back.gif' buatlah sama dengan 'normal.gif'. Gunakan software olah gambar seperti adobe photoshop atau sowtware semacamnya. Untuk gambar 'normal' dan 'hover' berukuran 1px x 27px, sedangkan 'back' 27px x 27px. Membuat gambar pada dimensi 1 x 27 px mungkin sedikit susah membuatnya, buat dahulu dimensi 27px x 27px waktu membuat gambar jika sudah selesai baru tentukan resize ukurannya menjadi 1px x 27px. Upload gambar ke blogger kemudian gantikan alamat url gambar di atas dengan url gambar yang baru saja anda upload.

#5BB3FD → Warna text hover pada menu
#dde1e4 → Warna background submenu
#000000 → Warna text normal submenu
#8A8484 → Warna garis pemisah antar submenu
#ffffff → Warna background hover submenu
#ff0000 → Warna text hover submenu

Membuat navigasi menu. Misal anda mempunyai navigasi menu antara lain terdiri atas;

1. Menu home
2. Menu posting dengan sembilan submenu posting
3. Menu lainnya ; menu-1 sampai dengan menu ke-6, maka kode html yang anda tuliskan akan terlihat seperti di bawah ;

<div id="menuanda-wrapper">
<ul id="menuanda">
<li><a class="master" href="http://bloganda.com/" title="Halaman Utama">Home</a></li>
<li><a class="master" href="#" title="Artikel">Posting</a>
<ul>
<li><a href="http://bloganda.com/" title="title Posting 1">Posting 1</a></li>
<li><a href="http://bloganda.com/" title="title Posting 2">Posting 2</a></li>
<li><a href="http://bloganda.com/" title="title Posting 3">Posting 3</a></li>
<li><a href="http://bloganda.com/" title="title Posting 4">Posting 4</a></li>
<li><a href="http://bloganda.com/" title="title Posting 5">Posting 5</a></li>
<li><a href="http://bloganda.com/" title="title Posting 6">Posting 6</a></li>
<li><a href="http://bloganda.com/" title="title Posting 7">Posting 7</a></li>
<li><a href="http://bloganda.com/" title="title Posting 8">Posting 8</a></li>
<li><a href="http://bloganda.com/" title="title Posting 9">Posting 9</a></li>
</ul>
</li>
<li><a class="master" href="http://bloganda.com/" title="title anda 1">tab 1</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 2">tab 2</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 3">tab 3</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 4">tab 4</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 5">tab 5</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 6">tab 6</a></li>
</ul>
</div>

Modifikasi nama menu, alamat url, dan title sesuai minat anda. Untuk mengaktifkan menu ini, pada 'Dashboard' blogger pilih "Layout" (Tata Letak) » "Page Elemen" (Elemen halaman) » "Add Gadget" (Tambah Gadget) » pilih "HTML/JavaScript". Copy dan pastekan kode di atas, simpan dan sesuaikan penempatannya.

Contoh di atas sub menunya hanya sampai dengan level 1, kalau mau lebih sampai 3 level misalnya, pakai cara ini (Style menunya horizontal):

ul#menuku-horizontal {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul#menuku-horizontal ul {
width: 160px; /* Lebar Sub Menu */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#menuku-horizontal ul ul,ul#menuku-horizontal ul ul ul {
top: 0;
left: 100%;
}

ul#menuku-horizontal li {
float: left;
display: inline;
position: relative;
}

ul#menuku-horizontal ul li {
width: 100%;
display: block;
}

/* Menu Utama */
ul#menuku-horizontal a {
border-top: 1px solid #353535;
border-right: 1px solid #353535;
border-left: 1px solid #353535;
border-bottom: 1px solid #353535;
padding: 6px;
float: left;
display: block;
background: #4c4c4c;
color: #ffffff;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-horizontal a:hover,ul#menuku-horizontal li:hover a,ul#menuku-horizontal li.iehover a {
background: #C8C3C3;
color: #000000;
}

/* Sub Menu Level 1 */
ul#menuku-horizontal li:hover li a,ul#menuku-horizontal li.iehover li a {
float: none;
background: #c8c3c3;
}

/* Sub Menu Level 1 Hover */
ul#menuku-horizontal li:hover li a:hover,ul#menuku-horizontal li:hover li:hover a,ul#menuku-horizontal li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover a {
background: #c8c3c3;
}

/* Sub Menu Level 2 */
ul#menuku-horizontal li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-horizontal li:hover li:hover li a:hover,ul#menuku-horizontal li:hover li:hover li:hover a,ul#menuku-horizontal li.iehover li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 3 */
ul#menuku-horizontal li:hover li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-horizontal li:hover li:hover li:hover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-horizontal li:hover ul ul,ul#menuku-horizontal li:hover ul ul ul,ul#menuku-horizontal li.iehover ul ul,ul#menuku-horizontal li.iehover ul ul ul {
display: none;
}

ul#menuku-horizontal li:hover ul,ul#menuku-horizontal ul li:hover ul,ul#menuku-horizontal ul ul li:hover ul,ul#menuku-horizontal li.iehover ul,ul#menuku-horizontal ul li.iehover ul,ul#menuku-horizontal ul ul li.iehover ul {
display: block;
}

'border-top sampai dengan border bottom' → '1px solid' berarti ukuran ketebalan garis 1 pixel dengan tipe solid, '#353535' kode untuk warna garis.
Di bawahnya 'background:#4c4c4c' dan 'color:#ffffff' masing-masing merupakan penentuan warna untuk background menu utama dan warna teks menu utama (saya pakai warna putih/#ffffff).

Di bawahnya lagi '/* Hover menu utama */' pada bagian 'background dan color' masing-masing menentukan warna hover baik background maupun teks pada menu utama.

Dan yang terakhir '/* Sub Menu Level 1 */' menentukan background warna pada submenu level 1 dan '/* Sub Menu Level 1 Hover */' menentukan hover warna background pada sub menu level 1. Level 2 sampai dan level 3 pengertiannya sama dengan level 1.

HTML Code:

<ul id="menuku-horizontal">
<li><a href="http://tutorial7.blogspot.com/" title="Halaman Utama">Home</a></li>
<li><a href="#" title="Semua Posting">Posts</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Bisnis%20Online%20Dunia%20Maya" title="Cari Penghasilan Tambahan Dari Internet">Duit Online</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Blogger%20Dummies" title="Blogger Untuk pemula">Blogger For Dummies</a></li>
<li><a href="#" title="Pemrograman Web">Web Programming >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Cascading%20Style%20Sheets%20%28CSS%29" title="Cascading Style Sheets">CSS</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/HTML" title="Hyper Text Markup Language (HTML)">HTML</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PHP%20Hypertext%20Preprocessor%20%28PHP%29" title="PHP Hypertext Preprocessor">PHP</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Internet" title="Internet Tips">Internet</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Kabar%20dan%20Tips%20Lainnya" title="Kabar dan tips lainnya">Miscellaneous</a></li>
<li><a href="#" title="Microsoft Office">Microsoft Office >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Excel%202007" title="Microsoft Excel 2007 Tips">Excel 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PowerPoint%202007" title="PowerPoint 2007 Tips">PowerPoint 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Word%202007" title="Word 2007 Tips">MS Word 2007</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Search%20Engine%20Optimization%20%28SEO%29" title="Search Engine Optimization">SEO</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Windows" title="Windows Tips dan Trik">Windows</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/feeds/posts/default" title="Posts RSS">Posts RSS</a></li>
<li><a href="http://tutorial7.blogspot.com/feeds/comments/default" title="Comments RSS">Comments RSS</a></li>
<li><a href="http://www.blogger.com/profile/05899674811945754032" title="Tentang Saya">About Me</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/kontak.html" title="Kirim Email Ke Saya">Email Me</a></li>
<li><a href="#" title="Link Partners">Link Partners</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link-indonesia.html" title="Partner Links Indonesia">Partner Links Indonesia</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link.html">Partner Links</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/2009/04/sitemap.html" title="Peta Blog">Sitemap</a></li>
<li><a href="#">Owner Edit</a>
<ul>
<li><a href="http://www.blogger.com/post-create.g?blogID=780351826145379977">Brand New Post</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=5759422519225049811">Link Edit</a></li>
<li><a href="http://www.blogger.com/posts.g?blogID=780351826145379977">Posts View</a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=780351826145379977">Widget</a></li>
<li><a href="http://www.blogger.com/html?blogID=780351826145379977">HTML</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=8945225034979464711">Map</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=3728186818005253981">Upload</a></li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=780351826145379977">Option</a></li>
</ul>
</li>
</ul>

navigasi menu dengan style vertikal. Pakai kode di bawah ini:

ul#menuku-vertikal,ul#menuku-vertikal li,ul#menuku-vertikal ul {
width: 160px; /* Menu Width */
margin: 0;
list-style: none;
}

ul#menuku-vertikal li {
float: left;
position: relative;
width: 100%;
}

ul#menuku-vertikal li.iehover {
z-index: 1000; /* IE z-index bugfix */
}

ul#menuku-vertikal ul {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}

/* Menu Utama */
ul#menuku-vertikal a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-vertikal a:hover,ul#menuku-vertikal li:hover a,ul#menuku-vertikal li.iehover a {
background: #BBB;
color: #FFF;
}

/* Sub Menu Level 1 */
ul#menuku-vertikal li:hover li a,ul#menuku-vertikal li.iehover li a {
float: none;
background: #BBB;
}

/* Sub Menu Level 1 Hover */
ul#menuku-vertikal li:hover li a:hover,ul#menuku-vertikal li:hover li:hover a,ul#menuku-vertikal li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 2 */
ul#menuku-vertikal li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-vertikal li:hover li:hover li a:hover,ul#menuku-vertikal li:hover li:hover li:hover a,ul#menuku-vertikal li.iehover li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover a {
background: #666;
}

/* Sub Menu Level 3 */
ul#menuku-vertikal li:hover li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-vertikal li:hover li:hover li:hover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-vertikal li:hover ul ul,ul#menuku-vertikal li:hover ul ul ul,ul#menuku-vertikal li.iehover ul ul,ul#menuku-vertikal li.iehover ul ul ul {
display: none;
}

ul#menuku-vertikal li:hover ul,ul#menuku-vertikal ul li:hover ul,ul#menuku-vertikal ul ul li:hover ul,ul#menuku-vertikal li.iehover ul,ul#menuku-vertikal ul li.iehover ul,ul#menuku-vertikal ul ul li.iehover ul {
display: block;
}

Jika ingin menggunakan menu vertikal ganti kode widget <ul id="menuku-horizontal"> menjadi <ul id="menuku-vertikal">

Selesai, semoga bermanfaat...
:D