Untuk memudahkan pengunjung dalam mengunjungi blog, terkadang navigasi menjadi sangat mutlak dibutuhkan. Bahkan untuk sekarang ini bukan terkadang lagi tapi emang sudah harus diterapkan pada setiap blog atau situs terutama yang mempunyai tema yang banyak.
Nah.. kalo ini baru terkadang, terkadang atau malah sering kali Designer jarang membuat menu hierarki pada hasil deign an mereka. Jika antum sudah terlanjur memekai theme yang sekarang ini tapi tidak support menu hierarki, antum bisa coba cara berikut ini.
Note : Untuk menghindari kegagalan yang fatal atau error yang parah pada situs antum, baiknya antum mencobanya pada server lokal pada komputer antum.
Langsung aja menuju ke TKP :
(Dengan asumsi kita mencoba pada theme baru (membuat dari awal) pada mesin wordpress)
1. Buka Notepad dan tuliskan kode berikut, kemudian simpan dengan nama index.htm (index.php juga boleh)
<html>
<head> </head>
<body>
</body></html>
2. Buka Notepad kembali dan ketikkan kode dibawah ini, kemudian simpan dengan nama style.css
*{
border: 0;
margin: 0;
padding: 0;
}
body{
color: #000080;
background-color: #DCDCDC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
}
a{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: blue;
font-weight: none;
}
input,select,textarea{
border: #dddddd 1px solid;
font-size: 12px;
padding: 5px;
}
select{
padding: 0;
background-color: #A0522D;
}
li{
list-style: none;
}
/*========= Kelengkapan =========*/
.fix{
clear: both;
height: 1px;
margin: 0 0 -1px;
overflow: hidden;
}
/*========= LAYOUT =========*/
#halaman{
width: 960px;
background-color: #E6E6FA;
margin:15px auto;
border: 1px solid #CCCCCC;
}
/*========= Bagian Kepala =========*/
/*- Menu halaman atas -*/
#navigasi{
height: 30px;
background: url(‘images/head-bg.png’) repeat center center;
padding: 2px 0px !important;
background-color: #F0F8FF;
margin:15px 15px 0px !important;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
width: 930px !important;
}
#nav-kiri {
float:left;
display:inline;
width:600px;
}
#nav-kanan {
float:right;
display:inline;
width:330px;
margin:0px !important;
padding:0px !important;
}
/*- menu halaman-*/
#nav-halaman, #nav-halaman ul{
padding: 0;
float:left;
list-style: none;
}
#nav-halaman {
padding: 0;
font-size:13px;
float:left;
}
#nav-halaman a {
display: block;
padding-left:15px;
padding-right:15px;
}
#nav-halaman li {
float: left;
line-height:30px;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
}
#nav-halaman li a:hover {
background: url(‘images/head-hover.jpg’) repeat center center;
text-decoration: underline;
color:#0000FF;
}
/* menyembunyikan ul didalam li(menyembunyikan submenu */
#nav-halaman li ul {
position: absolute;
width: 13em;
left: -999em;
padding-top:1px;
}
/* memunculkan sub menu */
#nav-halaman li:hover ul, #nav1 li.sfhover ul {
left: auto;
background: url(‘images/head-hover.jpg’) repeat center center;
}
/* memberi box , background pada sub menu */
#nav-halaman li ul li {
background: url(‘images/head-bg.png’) repeat center center;
border-bottom:1px solid blue;
border-left:1px solid #dedbd1;
border-right:1px solid #dedbd1;
line-height:28px;
width:15em;
}
3. Tambahkan link kode berikut pada index.htm (kalo di wordpress header.php) antara kode <head> …..</head> .
<link href=”style.css” rel=”stylesheet” media=”screen, projection” type=”text/css” />
Note:
Kalo antum meng apply di wordpress langsung, abaikan langkah yang ketiga.
4. Tambahkan kode navigasinya pada body di index.htm , sebagai berikut :
<div id=”halaman”>
<div id=”navigasi”><!– mulai navigasi atas –>
<div id=”nav-kiri”></div>
<ul id=”nav-halaman”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Software</a>
<ul>
<li><a href=”#”>Free Software</a></li>
<li><a href=”#”>Game</a></li>
<li><a href=”#”>Wordpress</a></li>
</ul>
</li>
<li><a href=”#”>Hardware</a></li>
</ul>
<div id=”nav-kanan”> <!– menu untuk pencarian –>
</div>
</div> <!– akhir navigasi atas –>
<div class=”fix”></div>
</div>
Note:
Kalo untuk memanggil halaman pada mesin wordpress + ditambahkan tombol “home” gunakan kode sebagai berikut :
<?php /* If this is the frontpage */ if ( is_home() ) { ?>
<li><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>
<?php } else { ?>
<li><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>
<?php } ?>
<strong><?php wp_list_pages(‘sort_column=menu_order&title_li=’ ); ?> </strong>
</ul>
Kalo lancar, seharusnya akan menghasilkan menu sebagai berikut ( dengan menu background gambar) :
Untuk melihat hasilnya dari live demo, KLIK DISINI.
Untuk melihat file-file aslinya, silakan DONLOT DISINI .
Postingan hebat lainnya yang berhubungan :
- Cara Membuat Efek Teks Mengetik (Ticker Text) Pada Mesin WordPress
- Cara Mudah Membuat Fadding Marquee Text ( Efeks teks menghilang secara perlahan) Pada Mesin WordPress
- Cara Mudah Menampilkan Thumbnail Gambar di Postingan Pada Mesin WordPress
- Cara Membuat Scrollbar Box Warna Dengan Bantuan CSS (style.css)
- Cara membuat list-style dengan css
- Cara Mudah Membuat Blinking Text Dengan Bantuan CSS Theme
- Cara Membuat ScrollBar Box Dengan Isi Random Post
- Cara Mudah, Cepat, Tepat, Aman dan Menyenangkan Upgrade Mesin WordPress
Afwan, kalau untuk theme yang sdh ada sebelumnya, kode-kode di atas disisipkan di mana?
Syukron
Abu, Untuk theme yang antum pake saat ini, ntar ane coba meng apply nya. ane pelajari dulu struktur css nya dulu. syukron