Jumat, 30 Maret 2012

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

14 komentar:

Fajar mengatakan...

sudah saya uprek mas... tapi kok malah kesannya lepas...ya... ndak menjadi soulmate...he.he.....

Redirect 404 Blogger mengatakan...

iya juga ya melayang di bawah header di atas awan wakakak,
alternatif lain,
kode HTML Menu navbar di langkah 2 dipotong terus dipindah ke xml
Edit XML , expand widget
letakkan di bawah tag <body
Save

contoh penampakan di rakutien yang di atas header
kabuur

Falah Mulyana mengatakan...

keren nih tutorial logger nya,,,,,,,, boleh nanti ane coba ni sobat

Falah Mulyana berkunjung di blog sobat untuk ber silaturahmi sebelum melakukan aktifitas seperti biasa nya,,,,,,,,,

Nice share sobat and happy blogging

BlogS of Hariyanto mengatakan...

terimakasih kawan sudah berbagi tutorial menarik ini :)

Fajar mengatakan...

siap sudah dicoba... dan berhasil..berhasil..berhasi...he.he.he..

Damar mengatakan...

mau nanya nih Mbah, kalo kita sering nemplokin CSS ke dalam HTML kita trus kita buang, kira-kira masih ada yang ndelik dan tercecer ndak ? maksudnya nggak terhapus semua ?

liberty reserve mengatakan...

@falah, @hariyanto; silahkan :)
@papinya fajar: kapan2 ane colongin yg navbar versi pak dj site xixixi
@kang djangkis : biasanya bersih kangmas;
makanya yg di contoh kulo templok di add gadget; biar kalo mo bongkar lagi :D

Unknown mengatakan...

ini cara membuat navbar terkeren mbah. njuk tulisan sate klatak itu bisa diganti ga hehe, maaf ne banyak tanya, soalnya cacing neng weteng jadi goyang goyang,hehehe

nice share..

admin mengatakan...

mengenai tulisan 'sate klathak', menurut mas iskaruji bisa mbah -seenaknya nyomot nama orang- wkwkwk
lha itu kan cuman href biasa seperti kalo tukeran link :D

anakesempe mengatakan...

Wow, betul2 jagoan script neh anak smp. Maksudna navbar kalo di anak es-em-pe yang isinya anak smp anak sma anak smk ya mas. Ato yang di paling atas?

Oya tentang ping.fmnya emang ngaruh ya mas untuk seo off page:-). Karena Itu cuma dolanan saja yang saya dapet dari ilmunya Bang Attayaya saja. :D

Dan blog dummynya jadi nggak keren, postnya kayak status fb doang, entah mungkin kalo bisa direvisi ama mas katro, mungkin lebih keren lagi ya. Hehe

Muhammad A Vip mengatakan...

anak smp sekarang pinter pinter ya, persis kaya aku dulu

admin mengatakan...

@anakesempe:
penampakannya seperti yang di atar header blog fajarmufti :D

ping fm aku kan requeeeest, jangan lempar gayus sembunyikan BBM wkwkwk
pernah bikin udah lupa semua akune dan nyambung pipone piye, ayo diposting mas :D

@mas avip: so sweet, yang jelas anak smp yang bikin posting diatas udah jenggoten mas hehehe

anaksmp mengatakan...

Udah diposting tapi kayaknya postingannya jawaban yang salah neh mas. Haha.

oya, kalo bingung atau malah nggak paham dengan postingan saya. Mas coba ke www.attayaya.net/2011/04/memunculkan-postingan-blog-ke-social.html, insyaallah disana lebih jelas Mas. Hehehe

Unknown mengatakan...

Udah diposting tapi kayaknya postingannya jawaban yang salah neh mas. Haha.

oya, kalo bingung atau malah nggak paham dengan postingan saya. Mas coba ke www.attayaya.net/2011/04/memunculkan-postingan-blog-ke-social.html, insyaallah disana lebih jelas Mas. Hehehe

Posting Komentar

terimakasih sudah mampir di blog cerita anaksmpku :)

Update Info Buku Gratis

BANK SOAL UN SMP SMU

Followers