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

SMP - Sajak Memakai Pakaian

SMP - Sajak Memakai Pakaian

(3E 'DDG 'D1-EF 'D1-JE

'DR-NER/O DPDNQGP 'DNQ0PJR
CN3N'FPJR GN0N'
HN1N2NBNFPJRGP
EPFR :NJR1P -NHRDM
EPFPQJR HND'N BOHNQ)M
"EPJRFO

 Demikianlah sajak yang dikirimkan ke blog anak smp
Abstrak sekali artinya ..:)

Bagi sobat blogger yang berkenan,  mengirimkan artikel di blog anak smp, tidak ada keharusan tidak ada paksaan, untuk menghindari terjadinya eror coding, caranya adalah sebagai berikut:
1. tuliskan nama
2. email boleh diisikan bebas, misalkan : anakanakanak@yahoo.com
3. Judul: Judul Posting anda
4. Isi Posting : tuliskan atau salin 'sebagian text' posting sobat dengan format teks biasa (txt)
jika ingin menyertakan link, tuliskan di akhir isi posting.
karena dalam kiriman teks: kata  http://xxx.xxx akan terkonversi otomatis menjadi link alamat anda.
Contoh format penulisan:
selengkapnya di http://anaksmpku.blogspot.com/2010/08/anak-smp-on-info-buku-gratis.html

Moderasi diaktifkan untuk menghindari spam,





Terimakasih atas partisipasi anda. di Anak SMP on Blog