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 wkwkwk1. 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
