Skip to main content

Membuat Menu Navigasi Bro!

Bro kali ini bagaimana caranya buat ngebuat navigasi. Contohnya kayak dibawah ini. Simak yoo!!





Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>



/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}


/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}


Masih pada halaman Edit HTML kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.


<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>



Kalo udah selesai disimpan so tinggal liat hasilnya. Oh iye hampir lupa loe loe pada bisa menyesuaikan latar sama textnya sendiri.



Kalo mau nambah menu tinggal di edit sendiri. Wokeeh!! Selamat mencoba
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Scroll Pada Blog Archive

Bagi kalian yang udah ngeblog bertahun - tahun lalu terus di blognya ada widget archivenya, pasti akan muncul sangat panjang kebawah bila di pilih. Nah, dengan ini kita bisa ngebuat scroll pada archive kita. Jadi hemat tempat deh. Bagi yang suka hemat - hemat bisa dicoba lah ini. Kalo demen yang boros - boros yaaaa, buat pengetahuan aja broo :D Moongggooooo.. . . .. . ... Cara Membuat Scroll Pada Blog Archive (Arsip Blog) 1. Login ke Blogger. 2. Di halaman Dasbor, kita pilih Rancangan . 3. Kemudian pilih Edit HTML 4. Beri tanda centang pada Expand Template Widget 5. Cari kode berikut <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> 6. Kode lengkapnya adalah seperti ini <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/...
58 comments
Baca Lebih Lengkap Bro »

Momen Cewek Keliatan (tambah) Cantik

Kira - kira ada engga yaa cowok yang engga betah ngeliatin cewek cakep? Hmmm mungkin yaa ada aja sih, tapi gue langsung nge-judge kalo dia itu h*mo.... Aneh sekali cowok yang engga suka liat cewek cantik -__- ngomongin tentang lihat melihat, kalo kalian suka ngeliat cewe pas lagi ngapain? Cewek lagi nahan senyum kah? Ataaauuuuu cewek yang lagi nahan boker.... tapi perasaan gue engga pernah ngeliat cewek nahan boker.. yang bener bener kebelet banget. Penasaran.
11 comments
Baca Lebih Lengkap Bro »

Cerpen - Rasa Itu Adalah kamu

Dunia kadang bisa bekerja di luar kemampuan nalar kita. Sesuatu akan berubah bukan dari hal yang besar, tapi juga dari hal yang kecil seperti Rasa. 2005 Di sebuah restoran Jepang Aku duduk bersama temanku Tania. Dia cantik, putih, tinggi, manis, dan memiliki kepribadian yang baik. Kami selalu bersama dalam mengerjakan tugas kampus. Seperti sekarang ini. “Mana katanya tulisan lo bagus” sahut Tania “Iya nih, gue lagi banyak banget tugas” “Eh, Tania bagaimana skripsi lo?” “Bimooo, belum jadiii” dengan muka sedihnya. Tapi bagiku itu lucu “Loh, kenapa emang?” “Di revisi teruuss” “Oh, Yaudah” “Makan tuh sushinya” suruhku “Sumpitnya mana?”  “Hmm, mana yaa? Ya udah pake tangan aja” “Hmm, ya udah deh” Terlintas aku memikirkan hal yang mengejutkannya. Lalu aku menyampaikannya. “Eh, tania bagaimana kali nanti kita nikah?” “Iih, apaan sih lo. Kita kan temen” sambil melempar pulpen yang dia pakai “Iih, ya udah sih santai aja kan cuman bercan...
16 comments
Baca Lebih Lengkap Bro »