BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Navigasi Bar Grid Focus By amanda

nav bar

Kalau ngga salah kemarin ada yang bertanya via SB cara membuat menu bar yang ada di blog ini, baik untuk bagian atas dan bawahnya.

Sebenarnya cara mudah untuk mengetahui cara memasang nav bar ( menu bar ) tersebut gampang banguet. kita tinggal donlot template grid focus dari tante amanda, kemudiaan buka file xml-nya via notepad atau dream wapper dan cari kode menu bar-nya.

Tapi kalau malas donlot template tersebut, baiklah saya akan jelasain  cara menambah menu bar grid focus tersebut.  sebenarnya ada dua cara , cara pertama langsung menambahkan-nya pada kode template html-nya. sedangkan  cara ke dua mengunakan widget Html.

Cara pertama :

Buka tab Edit Html , kemudian di atas kode ini.

]]></b:skin>

masukan syntax css menu ini.

/* tab navigasi  
-----------------------------------------------*/
ul.nav{list-style:none;background:none;padding: 0;
margin-left: 0;border-top:1px solid #ccc;
border-bottom:3px double #ccc;} .nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:#999;
text-decoration:none;display:block;
padding:5px 0 8px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:#999;
text-transform:lowercase;}
.nav li a:hover{background:#EFEFEF;
color:#ccc!important;width:95px;}
* html .nav li a:hover{background:#fff;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;
padding-right:5px;border-right:none;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;
display:block width:100px;padding-right:5px;
border-right:none;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover
{ background: transparent;color: #fff !important;}
.fix:after{content:".";display:block;height:0;clear:both;
visibility:hidden;}
.fix{display:inline-block;}
* html .fix{height:1%;}
.fix{display:block;}

Setelah itu cari kode ini.

<div id='header-wrapper'>  
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='cigazine (Header)' type='Header'/>
</b:section></div>

kemudian di bawahnya masukan kode ini.

<div class='nav'>  
    <ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link1<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link2<br/><span>Short Desc</span></a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/>
<span>Syndicate</span></a></li>
<li class='skip'><a href='#main' title='Skip to content'>Main<br/>
<span>Skip to content</span></a></li>
</ul></div>

* tanda # = ganti dengan alamat / url link  yang anda tuju.

Kemudian untuk menambah menu bar ini pada bagian bawahnya cari saja kode ini.

<div id='footer-wrapper'>

Di atas kode tersebut masukan kode ini.

<div class='nav' style='clear: both;'>   
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
</ul></div>

Cara keduaxxx :

malas nulisnya… mungkin kalau ada kesempatan di lanjutkan…

Page views this post: reader

53 komentar:

Anonymous said...

Wuih... bnya kali kodenya om... ini nyang kayak nav bar blog ini ya om... mau dong, Btw prakteknya nunggu cara kedua dulu lah. Bookmark dulu ya?

Anonymous said...

hohohoho...rajin euyyyy post begindang..wekekek..

oiya suhuuuu...tuh dipost juga..kemaren mo dunlut kok error servernya tante amanda yah..padahal pengen say hello..wekekek

yah gpp deh ama om amandanya kan dijelasin disindang...xixixi

suhuuu..saya save yah postingan ini..hihihi..mo otak atik ntar buat navigasi bar ;)

mantep pokoke tutorial suhu yang atu eneh..:)

Anonymous said...

makasih yah kang...pertanyaanku akhirnya di jawab juga nih ama komandannya suhu...hehehehe, masih ronda nih?. langsung yah kang aku mohon ijin untuk mengambil ilmunya.......

Diana Yusuf said...

ampun kang kok gag jalan yah, aku oon buanget nih setelah dimasukan ada perintah yang salahnya begini kang :

"Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor"

maksudnya apa yah kang?
aku gag ngerti pisan euy

Jaloee said...

@ Harry Pott

wew sorry bangeut.. sekarang dah di update tuh kode na.. mudah2an ngga ada ke salahan lagi

Anonymous said...

Suatu saat perlu dicoba neeh,..

Titi Resmiyati said...

Saya pakai kode ini. Pertama-tama saya DL templatnya Amanda, lalu saya ambil kodenya, lalu saya pasang di blog saya http://mak-nyus.blogspot.com. Saya ngak tahu apa yang punya marah apa enggaknya ya?

Cebong Ipiet said...

kalo bikin page baru gmn ya Kang
misal http://catalog-tutorial.blogspot.com/2008/10/navigasi-bar-grid-focus-by-amanda.html

kalo ky gt kan msti post baru

kalo bikin http://catalog-tutorial.blogspot.com/#navigasi

gt gmn ya?

haduh basa saya kok ribet

intinya menu baru ky di wordpress kan ada
#home
#about

gt kang

Zippy said...

Mw pake, tapi bingung mw buat menu bar paan, hihihi...

Kristina Dian Safitry said...

menarik sekali...daku lagi memikirkannya,apakah membuat ini gak ya?sangat menarik..ehm..mungkin seperti biasanya lah,bang.daku simpan dulu tutorialnya. siapa tahu suatu saat membutuhkannya.

Riri said...

duh suhu, ketularan penyakit males nulis nich... ayo bunda bantuin.... ( sok ngerti banget nich bunda hi.hi.hi)

Anonymous said...

wadoh mumet juga liatnya. Bookmark dulu aja. Abis kerja baru dipelajarin. Nice post,mas

Revarius said...

wah ilmu baru lagi dari sang suhu nih... kyknya enak buat di pake tu bro.. keren sih di template ini... tp sepertinya ga semua template cocok ya... tergantung keinginan juga... simpen dulu ah suatu saat di praktekin... oh ya suhu pertanyaanku uda di jawab blm kmrn??

Ade Sanusi said...

Perlu di Coba Nih.... Makasih Boz....

Anonymous said...

met sore.... numpang jiplak..he..he.., makasih tutornya

Anasku said...

iya neh kang.. keren bgt navigatornya.. nah ini kan bisa dibilang navigator menu yang sederhana dan gak perlu membutuhkan waktu yg lama untuk loading... dan saya harap kapan2 akang bisa membuat navigator menu yang stylish.. seep lanjut kang

Anonymous said...

keyennn kang, kang gimana kalo rubah warna header dan navigasinya..kang please ya.

Anonymous said...

makin mantap saja tutorrnya om, makin banyak yang minat ke sini :) seperti aku baru bangun langsung melek n di ajak kesini lagi

Subagya said...

yup grid fokus memang mantab, minimalis and cool

Aditya Kurniawan said...

Kang kalau mau membelah widget di sidebar menjadi 2 gimana???kayak punya mas anang...

Yudhi said...

Kang membelah header menjadi 2 gimana???

Yudhi said...

Kang gimana membelah header menjadi 2???

Anonymous said...

Sutet (Suhu template) yang atu ini emang mantaf trick dan tipsnya....

Kang jaloe.. buat tutor bikin blog lewat Dreamweaver donk....

Anonymous said...

wah paling asik buka-bukaan disini...tong kapalang kang! Salam

Yudhi said...

Kang pertanyan qu qo blum dijawab???

Anonymous said...

hahaaa.ada yg bilang sutet...gokil..
malah asik(*bacain koment orang2)...
dasar anak tak berguna..hehe...
biasa langsung control D..siangan dikit ekspansi nya..
kaboooor..
Yup !

Anonymous said...

wah.. di tunggu yg seri duanya...
sapa tahu agak simple dikit..OK?
Met pagi sobat

Junjung Purba said...

sayangnya rada berat tuh...

Anonymous said...

pa ga' berrat.. mas..

tapi tak coba dulu kalo manteb dan ndak berat baru di modif-midif dikit..

Anonymous said...

Templet neo bisa di pasangi kayak gini kang??

The Diary said...

widihhh... scriptnya panjang bener...

Bahauddin Amyasi said...

Thank's, banget mas ...

Anonymous said...

mana nih updatenya..? lagi sibuk ya kang B)

Anonymous said...

bro ini yaa,..ngga abis abis ilmunya,...!!

ipam nugroho said...

thnx udh berbagi ilmunya ya..

JoVie said...

kepenasaranku hilang sudah...makasih yah and lam manis selalu buat yang udah nanya di SB, bukan buat AKang Jaloee....hihix..kabooorrrr

Anonymous said...

Makasih kang Jaloe. Seinget saya, Gridfocus ini themenya wordpress ya?

Azwar said...

tak kehabisan ilmuya semakin hari suhu kita ini semakin jago

Anonymous said...

ditunggu bagian keduanya.......

Anonymous said...

mau nyobak juga akhh

Prima Kurniawan said...

mas jaloe, kalau munculin kode yang disorot ( yang ada bekgron biru tu lho ... ) seperti itu gm mas ? Tolong y ....

Anonymous said...

kang kalau bikin menu yang bisa menurun itu gimana ya?bahsanya kalau gak salah menu horizontal multi level tree??

Cibinong Online said...

alhamdulialh... berhasil.. tapi masih harus di edit2 dulu :-) makasih ya...

Jaloee said...

@ Nanang

thk jg atas kunjuganya

Anonymous said...

kang itu kalau ngerubah tinggi navigasinya yang mana ya...soalnya itu ketinggian navigasinya

Radith Prawira said...

kang, kalo mau naro search-box di sisi yg kosong antara RSS dengan MAIN itu gmn yh? saya udah coba letakkin kode gugel custom search saya diantara "...Syndicate[/span>[/a>[/li> dengan "[li class='skip'>[a href='#main..."

hasilnya kotak searchnya mucul tp tabrakan ama kolom RSSnya ( kiri atas ) dan garis batas bawahnya jadi ngejauh gt..

sekalian ama tutor cara mindahin file .js dan .txt ( yg buat kode slideshow widget dari alvaris falcon ) saya dah coba upload ke google pages saya tp hasilnya malah berantakan slideshow widgetnya

Tq kang sebelumnya ^_^

Jaloee said...

@ Radith

kalau mau mindahin file js na gampang boss.. buka saja url file js.. nanti kalau di fire fox minta di donlot.. kalau ngga nanti ke buka file js na copy paste script nya ke program notepad

Radith Prawira said...

kalo file .js-nya bisa didonlod kang..dan yg .txt saya copas ke notepad terus save dalam format .txt kan? 2 file itu dah saya upload juga ke google pages saya terus saya klik kanan, ambil "copy link location" dan paste/replace kode/alamat file yg ada sebelumnya kan?

bisa di save sih..tp abis itu hasilnya slideshow imagenya nda jadi "slide" ..tp "scroll" krn tiba2 muncul2 scrollbar >_<

--

dan ttg nyeleipin searchbox di sela2 RSS dan MAIN di navbar-grid ini gmn kang? :Peace:

Jaloee said...

@ Radith

iye bener... hmmmmm koq aneh yach.. tapi coba yg txt na di jadikan file js... save as file js

Radith Prawira said...

bisa sekarang kang.. kayanya yg kmrn2 google pages ane bermasalah.. yg slider.js diupload ke geocities yg sjquery.txt ke fileave.. mo mindahin data2 dari gugel pages nih.. hehehe

Anonymous said...

mbak klo download lwat broser apa

Jaloee said...

@ Anonymous

pake mozila juga bisa mba

BLOGGOA said...

kang pinjam postingannya yach......

cz tips ini aku pake dalam templateku........

makasih sebelumnya kang

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial