Syalom sobat t'Net yang terkasih, kembali lahi yah dengan saya. Saat ini saya akan memberikan tips lagi nih tentang menu navigasi. Yang sebelumnya saya sudah pernah buat Cara membuat navigasi horizontal. Nah kali ini saya punya trik baru lagi untuk membuat menu navigasi horizontalnya. Kalau tidak salah kurang lebih tampilan dari menunya akan tampak seperti gambar di samping. Untuk itu tips ini berbeda style dari tips yang sebelumnya. Bagi sobat t'Net yang berminat untuk memilikinya segera di blog teman2, segera jalankan perintah di bawah ini.
Untuk menampikannya pada blog kita tentu kita harus melalui prosedur dulu. Yaitu sebagai berikut:
- Masuk ke Blogger dengan ID Sobat t'Net
- Pada Dasbor, pilih Pengaturan
- Kemudian pilih Edit HTML
- Cari kode seperti ini <head>
- Kemudian letakkan kode di bawah ini tepat di bawah kode <head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
- Setelah itu Letakkan kode di bawah ini lagi tepat di Atas kode ]]></b:skin>
.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Catatan:
Kode di atas adalah kode untuk modifikasi menu navigasinya. Silahkan anda ganti sesuai selera anda.
- Nah kalau sudah, silahkan dari kode seperti di bawah ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='KARTA JAYA (Header)' type='Header'/>
</b:section>
</div>
Catatan:
Jika anda mengkopi semua kode diatas, pencarian anda tidak akan berhasil, maka carilah kode yang mirip dengan kode warna merah di atas.
- Setelah anda menemukan kode di atas, silahkan letakkan kode di bawah ini tepat di bawah kode yag sudah anda temukan.
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
- Kemudian Simpan
- Setelah itu, pilih Elemen Laman
- Kemudian pilih Add a Gadget tepat di bawah Header blog kamu, seperti gambar di bawah. Jika tidak ada, silahkan and tempatkan dimana saja sesuai dengan selera anda.
- Kemudian pilih HTML/Java Script
- Lalu COPAS kode di bawah ini, dan tempatkan pada kolom yang disediakan. Tidak usah kasih judul Sidebarnya.
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://kartajaya25.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>
- Kemudian silahkan anda Edit bagian bagian Menunya.
Catatan:
1. Utuk tulisan berwarna BIRU silahkan anda ganti dengan menu yang anda sediakan.
2. Tanda # silahkan anda ganti dengan URL menu yang anda sediakan
3. Untuk alamat URL yang di atas, silahkan anda ganti juga sesuai menu yang telah teman sediakan
- Setelah itu Simpan
0 komentar:
Tak ada yang bisa saya berikan selain ucapan terima kasih karena telah memberikan apresiasi terhadap artikel-artikel KARTA JAYA WEB
Posting Komentar