Langsung ke konten utama

Membuat Menu Navigasi Horizontal

Membuat Menu Navigasi Horizontal

Blog yang bagus itu harus didukung oleh navigasi yang mudah dan tepat. Sekarang kita akan belajar membuat menu navigasi horizontal. Itu tu, menu yang biasanya ada di header blog, ada home,about me dan lain-lain. Dengan menu navigasi yang pas akan membuat pembaca mudah untuk melacak apa yang ada di blog kita.

Cara Membuat Menu Navigasi Horizontal
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 ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:


/*-- (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}



7. Kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut di bawahnya: 


<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>



9. Kita dapat menganti kode warna sesuai dengan template blog kita, dan Simpan Template jika sudah selesai.
10. Untuk menambahkan menu yang ada di navigasi horintal, kita klik Elemen Halaman. Lihat gadget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.


Untuk menempatkan navigasi di atas apabila tidak ada gadget di header anda, silahkan baca disini

Komentar

  1. kalo div id='outer-wrapper'><div id='wrap2' gak ada gmana gan....:)]

    BalasHapus

Posting Komentar

Silahkan berkomentar kepada sobat blogger semua. Diharapkan komentar yang berkaitan dengan isi dari blog ini. Terima Kasih.



TULISKAN KOMENTAR DI BAWAH!!!

Postingan populer dari blog ini

Tips Latihan Memperbaiki Tulang Punggung Belakang Bungkuk

Beberapa kebiasaan yang tanpa Anda sadari bisa menjadi faktor seseorang memiliki postur tubuh yang kurang cantik. Sehingga ini membuat penampilan Anda menjadi kurang cantik dan terkadang membuat Anda menjadi malu dan tidak percaya diri.
Postur tubuh yang buruk ini biasanya disebabkan oleh cara duduk yang salah, sering membawa tas berat, tidur dengan bantal tinggi, sering menggunakan sepatu hak tinggi atau kelebihan berat badan. Dengan postur tubuh yang buruk akan menimbulkan beberapa efek seperti sakit pinggang, nyeri pada punggung dan juga mudah lelah.
Ini semua bisa Anda perbaiki dengan latihan ringan untuk menjadikan penampilan kembali menarik dan membuat Anda percaya diri, sbb tips-tipsnya:

Pertama. Melakukan beberapa latihan peregangan (streching) secara teratur untuk membantu melebarkan bahu sehingga tidak condong ke depan dan dapat meningkatkan fleksibilitas.

Kedua. Latihlah berdiri dan duduk dengan posisi tulang belakang lurus serta letak pundak dan bahu yang tegak dengan kedua tela…

Menambah Font Style pada MS Office

Menambah Font Style pada MS Office | Font-font pada Ms Office, misalnya Word, Powerpoint, dan Excel memiliki berbagai macam Font Style. Namun, font style bawaan mereka terlalu sedikit dan monoton atau terlalu simpel. Jadi, jika ingin membuat dokumen dengan font style yang lebih stylish kita harus menambahkannya sendiri. Bagaimana caranya? Caranya cukup mudah.



Pertama download dulu font style nyadisini.
Karena file nya berbentuk .RAR maka harus di ekstrak terlebih dahulu.Buka foldernya, kemudian Select all dengan cara menekan tombol CTRL+A pada keyboard, lalu copySelanjutnya, klik start pada windows>Control Panel>Paapearence and Personalization>FontLalu paste file tadi di situ. SELESAI!!! Anda dapat mengeceknya dengan membuka MS Offici. Font ini akan otomatis tersimpan pada windows, jadi sebenarnya tidak hanya menambah font style pada Ms Office saja, namun juga akan menambah font style pada setiap program yang menggunakan teks. Misalnya Photoshop. Corel, dan lain-lain...

Cara Melacak Nomor Handphone (No. HP) Seseorang

Jika kamu sering dimisscall orang, di isengin orang MARAH! Kamu bisa mengecek lokasi mereka, mendeteksi di daerah mereka tinggal, kota penelpon kita . .
Silahkan pakai HLR Lookup Search

Nah disitu kita tinggal memasukkan no telepon yang mau kita lacak lalu klik search.
Berikut Daftar Operator yang dapat dideteksi : 1. Telekomunikasi Selular [Kartu Halo, Simpati, Kartu AS] 2. Indosat (Cellular) [IM3, Mentari, Matrix] 3. Indosat (Fixed) [Starone] 4. Excelcomindo Pratama [XL] 5. Hutchison CP Telecommunications [Three] 6. Natrindo Telepon Seluler [Axis] 7. Bakrie Telecom [Esia] 8. Telekomunikasi Indonesia [PSTN, Flexi] 9. Mobile-8 Telecom (Cellular) [Fren] 10. Mobile-8 Telecom (Fixed) [Hepi] 11. Smart Telecom [Smart] 12. Sampoerna Telekomunikasi Indonesia [Ceria] 13. Pasifik Satelit Nusantara [Byru]
NB: Kelemahan HLR Lookup yaitu : lokasi yang dapat dilacak hanya lokasi pendaftarannya saja. Jadi kalo pemilik HP uda lari ke tempat lain ya nda bekal ketemu deh
Hasil deteksinya pun Sangat Akurat.

Ini adalah has…