Cara Membuat Menu Navbar di Blogger

Cara Membuat Navbar Menu Blogger  ini menyesuaikan tema draft blogger yang dipakai mas habe seven, sehingga takcolongke dari http://bdlab.blogspot.com dengan beberapa modifikasi dan digoreng di atas wajan tanpa kompor dan sate tanpa tulang :halah:
Biar tidak bolak balik masuk edit html terus munggah mudhun , menggak menggok memasang css dan li uli uli *menghindari error kalau ada buntut yang ketinggalan', wis anak smpku jadikan satu saja stylenya sekalian biar gampang

Tahapan Panduan Membuat Navbar Menu Blogger,

 lumayan untuk update posting wkwkwk

1. Kode CSS Membuat Menu Navbar Blogger
kagem kangmas habeseven,Salin kode berikut ini, semuanya

<style>
/* alkatro.com dolanan css */
@charset utf-8;
.alkatronav-outer{height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMxjYwh0pTJ9kZsWn6gNZfiWQRPqayAZvTSls_jTQQqpAdb7U2zD2EYPx56vNr9fc-sjElOPLt3SxB62TZRsu4F0nPr4M9verV0AgE6HQFVL_sfbjnX7yzM3g8s2N923xcY91UwY5Xdp8i/s1600/alkatro-nav.gif);padding:0}
.float-left{float:left}
.float-right{float:right}
.alkatronav .divider{display:block;font-size:1px;border-style:solid;border-width:0}
.alkatronav .divider-vert{float:left;width:0;display:none}
.alkatronav .item-secondary-title{display:block;cursor:default;white-space:nowrap}
.clear{font-size:1px;height:0;width:0;clear:left;line-height:0;display:block;float:none}
.alkatronav{position:relative;zoom:1;margin:0 auto}
.alkatronav a,.alkatronav li{float:left;display:block;white-space:nowrap}
.alkatronav ul{left:-10000px;position:absolute;z-index:10}
.alkatronav,.alkatronav ul{list-style:none;margin:0;padding:0}
.alkatronav li{position:relative}
.alkatronav ul ul{z-index:20}
.alkatronav ul ul ul{z-index:30}
.alkatronav ul ul ul ul{z-index:40}
.alkatronav ul ul ul ul ul{z-index:50}
li:hover>ul{left:auto}
#alkatronav ul{top:100%}
#alkatronav ul li:hover>ul{top:0;left:100%}
#alkatronav a{color:#FFF;font-family:Trebuchet MS, Arial, sans-serif, Helvetica;font-size:14px;text-decoration:none;font-weight:700;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-kTs5IMknbgECeNl53aRVJEB5BrCcy8W0aeARjoPHoE2cBXUWZJFSC9FJIUcJsgine-P_yl-tr7C306pKdWDwhX8O3FfFX9AlCHndQEz7BjXMv1RTWnGudaZfJU8IWdCgpV5rRUtdELE/s1600/item-primary-bg.gif);background-repeat:no-repeat;background-position:top;margin:10px 0 0;padding:7px 17px 7px 18px}
#alkatronav a:hover{color:#6C3600;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-kTs5IMknbgECeNl53aRVJEB5BrCcy8W0aeARjoPHoE2cBXUWZJFSC9FJIUcJsgine-P_yl-tr7C306pKdWDwhX8O3FfFX9AlCHndQEz7BjXMv1RTWnGudaZfJU8IWdCgpV5rRUtdELE/s1600/item-primary-bg.gif);background-repeat:no-repeat;background-position:center}
#alkatronav div,#alkatronav ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_PhVbd3m4xoEiFFb7Fut4YRLphpoNSnUlA3B-Emizrxf1tZs_0C0vh9XAB1JaCd-nTBllWSuI7nqZIAFpNwE_DHEkgHY80j7Yt3n9XUON4TCRcU0hN4FsHqxC59mJU6Js6eOvcYLtfjR/s1600/item-secondary-container-bg.jpg);background-repeat:repeat-x;background-color:#F90;border-bottom:1px solid #CA6500;margin:0;padding:10px 4px}
#alkatronav div a,#alkatronav ul a{background-color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCAuk_jJe-_-crTqplwuQQrenKeW0ddz_0BPIkcKagSyeTWZ_l1zFPXg8kZU4UsiuhT36LMBdyDEXy4wJqfw9t-NMsuxAyHwrVjwVikoEXD1mryS-4V147Zhk8nN_0zOd0WiH68SSpXYH/s1600/item-secondary-bg.jpg);background-repeat:no-repeat;background-position:0 22px;font-size:11px;width:149px;border-style:none;border-width:0;margin:0;padding:3px 10px 3px 6px}
#alkatronav div a:hover,#alkatronav ul a:hover{background-color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCAuk_jJe-_-crTqplwuQQrenKeW0ddz_0BPIkcKagSyeTWZ_l1zFPXg8kZU4UsiuhT36LMBdyDEXy4wJqfw9t-NMsuxAyHwrVjwVikoEXD1mryS-4V147Zhk8nN_0zOd0WiH68SSpXYH/s1600/item-secondary-bg.jpg);background-repeat:no-repeat;color:#C00}
#alkatronav .item-secondary-title{cursor:default;color:#6C3600;font-family:Arial, Trebuchet MS, Arial, sans-serif, Helvetica;font-size:11px;background-repeat:no-repeat;font-weight:700;padding:4px 0 3px 7px}
#alkatronav .divider-horiz{border-top-width:1px;border-color:#C16100;margin:5px}
#alkatronav .divider-vert{border-left-width:1px;height:15px;border-color:#AAA;margin:4px 2px 0}
.alkatronav div a,.alkatronav ul a,.alkatronav ul li,.alkatronav li a{float:none}
</style>

2. Kode HTML Menu
kemudian selanjutnya kode script yang dibutuhkan adalah script HTML nav bar  ini 
<div class="alkatronav-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1U_w_PVZUhFPPMetJBqx7fvKiIIN-4YKZjetruAQENGn188mQP33l55JxrJAECc_rBBfc393iQUPUkjCAkrZuQl5n_IuSHb12MgHDbrwr7CMSTvNJI1un1zbxuk7I7GwhQH89JlwFD79N/s320/kiwo.gif" alt="alkatro.com" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliRqx7LQ4st9my9cPZpVWqfGvD2w6ph6HkVdY8d30c3nBvX5uoVQ4xytihjkFp_xcM_S1qE6t1pODon_vffe12zGFB9mNp74ExknvFqWj-eU23cwah3MED_eJZ_cl9035YAiCPWfsuBOk/s320/tengen.gif" alt="alkatro.com" class="float-right" />
<ul id="alkatronav" class="alkatronav">
<li><a href="/">HOME</a></li>
<li><a rel="nofollow" href="/search/label/Renungan">Renungan Fajar</a></li>
<li><a rel="nofollow" href="/search/label/hiburan">Hiburan Segar</a></li>
<li><a rel="nofollow" href="/search/label/sate">Sate Klathak</a></li>
<li><a rel="nofollow" href="/search/label/sate">Sate Klathak</a></li>
<li><a rel="nofollow" href="/atom.xml?max-url=500">Daftar Isi</a></li></ul></div>

3. Menuju ke Elemen Halaman
Login ke blogger
Design / Rancangan -> Page Elements
klik 'add a gadget' bin tambah gadget yang berada tepat di bawah kotakan header
Pilih HTML/Javascript
terus templokanlah kode yang sudah disalin di point pertama dan kedua  hehe; jadi paste kode CSS dan di bawahnya taruh sekalian script HTML Menu di situ terus Save

Contoh Penampakan
Sementara dapat dilihat di http://rakutien.blogspot.com ada di bawah header
Keterangan:
Text berwarna biru silahkan diganti dengan link yang diinginkan, bisa link label atau link artikel tertentu
Sate Klathak , pokoknya kata yang anaksmpku warnai merah  monggo disesuaikan dengan  ayat-ayat cinta pemikat sukma wakakak
4. Ambil Sarung
Udah saatnya Jumatan tow? atu uwa iga.. kabuuur