Navigator Menu Horizontal

Posted By anasku
Navigator Menu Horisontal adalah sederatan menu yang memanjang kesamping yang berguna untuk menunjukkan ke suatu halaman lainya di blog Anda. Misalnya Anda mempunyai Blog lain dan juga bertemakan berbeda dari blog Anda maka untuk menunjukkan pengunjung Blog Anda kita pasang menu horisontal ini, atau Anda mempunyai content yang lain di Blog anda dengan tema berbeda Anda perlu suatu navigator untuk menujukkanya.
Selain link dan banner yang menarik menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.
Nah jika Anda juga belum faham mengenai menu horisontal Anas akan kasih capturenya lihat dibawah

Nah dari keterangan diatas apakah Anda berminat Untuk membuatnya di Blog Anda..? kalau Anda berminat silahkan ikuti Cara dibawah

Langkah pertama yaitu log in ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML


Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda




.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}


Kalau Sudah Cari Code dibawah Ini




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


Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna merah saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>


Kemudian Simpan

Langkah kita belum selesai mari kita beranjak ke menu Layout
Nah dibawah Header pasti sudah ada tempat widget/gadget,

kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini



<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://tutorial-jitu.blogspot.com'>Tutorial Blog</a></li>
<li><a href='http://www.anasku.co.cc'>Ceritaku</a></li>
<li><a href='http://www.maynas.site40.net'>Sahabatku</a></li>
</ul>
</div>


Nah jika anda ingin mengubah tinggal edit code linknya dan jika ingin menambah tinggal tambah code yg berwarna biru dibawahnya

Gimana gampang kan.. silahkan bereksperimen jika ada pertanyaan silahkan isi komentar
sekian semoga bermanfaat
Artikel Terkait untuk "Navigator Menu Horizontal"


40 comments:

Tips Blogging said...

Pertamax plus...
Sep ne tutorialnya....

harry said...

keduawax.......okex......sip nih wah mas anasjago juga euy....coba ah......

Anasku said...

silahkan dicoba semoga bermanfaat bagi anda sekalian...

BAMBANG H said...

hoho..anas triknya gitu2 aja.. ada yang lain gak?

Anasku said...

@bambang H

hehe ada dunk pastinya bro.. tunggu aja.. :D

Remaliendha said...

Hai,, bagus banget postingnya..
sangat membantu, tapi gmn sie caranya spy jadi lbh keren?
maklumlah, aku bru bljr blogging, jadi agak bingung...

JoVie said...

ini yang banyak dicari Lho Nas...

- s L i K e R s - said...

Aduh saya ingin coba yang ini, tapi takut gagal.. Nanti berabe kode html-nya eror..

Triatma said...

makasi banyak ya ilmunya...?

all my life said...

terima kasih tipsnya bos

BACA SELENGKAPNYA said...

anas memang hebat ey................

kav said...

kerennnn....
matur nuwun

RAMKUR said...

Teng kyu Mister Anas....it tis wonderpull tutorial

Franky said...

saya sungguh berterimakasih atas kesediaannya mengajarkan berbagai cara & trik blog, kudoakan sukses terus yah

blue sky said...

tank you for informasion

Fatoni Arif said...

hello....aku mau tanya nich.
gimana ya caranya agar setiap kita klik link diblog kita selalu bisa membuka di tab yang baru...
tolong dijawab ya...
atau bisa dikirimkan ke
e-mail genjimayulee99@gmail.com
Trims..

nanangf said...

makasih infonya...
sukses sih, tapi warna font nya kok putih??
ada cara utk menggantinya ga?

epulsa said...

Sdh sy coba dan mmng bekerja dg baik. Good article..

www.alimuhammad_umar.comg said...

mas thanks banged nih....atas informasi`a....

Denny said...

salam kenal mas.. terima kasih atas tutorial diatas sekarang udah bisa buat link navbar seperti diatas

Kampanye Damai Pemilu Indonesia 2009 said...

thanks atas tutorialnya kang :)

bagus andrian said...

aku dah coba, tapi kok hasilnya sama aja sama vertical?? bner gak to???:s:S:S

Anasku said...

@bagus andrian.

mungkin lebar dari layout yang anda gunakan untuk menaruh menunya kurang lebar :D

win wonglio said...

Mantappp infonya tak coba dulu ya

Sidik said...

Bagus... dan saya udah mencobanya tapi ga berhasil. gimana dong?

Saya mau membuat navigator horizontal namanya "Mp3 Download" jadi saya aka membagikan koleksi Mp3 sama pengunjung, gimana caranya???

tips komputer said...

thx ilmunya

dipdop said...

manappp dAaahhh tutorialnya ...

Jayz said...

MANTAAAAAAAPP...
thanx tutorialnya bro

Jayz said...

Bro Cara masukin materi di Menu gmn caranya ?
jwb y ??

Belajar Blogger said...

Bagus... makasih

Rozy said...

makasih bro buat tipsnya....

wayan darte aseh said...

maksih mas,toritorial nya, sangat membantu. kunjungin blik ya mas. http://wayandharma-xp.blogspot.com

zickshare said...

Mantabb..makasih banyak.

PETRUKS_SUTEJO said...

BOZ,hasilnya jadi error tolong d bantu soalnya saya masih newbie! trims.
Saya cantumkankan alamat blog saya : " http://finoonline81.blogspot.com/ "

music improvisation said...

seepp, kita terapkann..

Taufiq Adi Nugroho said...

linkya kalau di klik kok kembali ke semula sih
seumpama itu linkya tips biar langsung ke tempat trik nya itu gimana?
saya klik itu masih saja ke tempat home nya :)
thanks
sorry newbie

ibnu said...

nice post gan, guna banget buat saya yang masih newbie

Obat Kanker Paru Paru Tradisional said...

memang sangat berguna isi keseluruhan blog ni bernmutu top markotop

Z3r0_0N3 said...

ini yang tak cari2 ...... nongol juga akhirnya...

obat kutil kelamin ampuh said...

bagus gan

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas