Menambahkan menu-menu pages || modif themes default

NOT RECOMEND
melanjutkan postingan sebelumnya tentang modifikasai theme default

• cara menambah pavicon | modif theme default
• menampilkan sidebar di single post| modif theme dafault
• merubah ukuran badan post dan sidebar | modif theme default
• modifikasi bagian header | modif theme default

pada kesempatan kali ini, saya akan sharing tentang menu-menu, tujuannya ialah agar tampilan themes default ini terlihat lebih profisional heheheeee. seperti biasa basa-basi itu ngga perlu, ok langsung intinya saja ya. menu-menu yang saya maksud adalah menu-menu pages, seperti home|about|pages1|pages2|dll, menu-menu ini nantinya akan kita tambahkan dibawah header!

berikut cara menambahkan menu-menu pages

• masuk ke directory theme default . . .wp-content/themes/default
• buat file baru dengan nama style-untuk-menu-pages.css(ekstensinya [dot]css, bukan text)
• edit style-untuk-menu-pages.css
• kemudian copy style berikut

/********** start menu pages bawah header header *************/
#menu-menu-page{
clear:both;
float:left;
width:auto;
margin:15px 0px -10px 7px;
}
#menu-menu-page ul{
margin:0;
padding:0;
list-style: none;}
#menu-menu-page li{
border-top: 1px solid #9AFEFF;/*garis pinggir atas*/
border-right: 1px solid #9AFEFF;/*garis pinggir kanan*/
border-left: 1px solid #9AFEFF;/*garis pinggir kiri*/
list-style: none;
margin-right:4px;/*jarak kanan*/
padding:0;
float:left;
-moz-border-radius-topright:8px;/*stle ini hanya untuk firefox*/
-moz-border-radius-topleft:8px;/*stle ini hanya untuk firefox*/
}
#menu-menu-page li a{color:white;/*warna text*/
padding:10px 40px 0 40px;/*jarak dalam, atas 10px, kanan 40px, bawah 0 dan kiri 40px, silakan sesuaikan*/
height:31px;/*tingginya*/
float:left;
display:block;
background:#00FFFF;/*warna latar belakang*/
font:normal bold 20px times;/*style fontnya tebal, ukuran 20px, jenis font times*/
text-transform: capitalize;
-moz-border-radius-topright:8px;/*stle ini hanya untuk firefox*/
-moz-border-radius-topleft:8px;/*stle ini hanya untuk firefox*/
}
#menu-menu-page li a:hover, #menu-menu-page li a:active{/*ini style untuk ketika cursor melintas*/
color:black;/*warna txt*/
background:white;/*warna latar belakang*/
text-decoration: none;/**/
}
/********** end menu bawah header header *************/

• paste ke dalam style-untuk-menu-pages.css
• trus save/simpan

sekarang di dalam folder /theme/default ada 23 biji file((1 directory image, 1 screnshot.png, 1 paviconku.jpg, 3 style.css, 17 file.php), langkah selanjutnya ialah edit header.php

• cari </head>
• kemudian tambahkan eksternal link berikut tepat diatas </head>

<!-- start style css menumenu-->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-untuk-menu-pages.css" type="text/css" media="screen"/>
<!-- end style css menumenu-->

• abcdefghijklm . . . samapi z adalah alfabet
• cari lagi

<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr/>

• trus ganti menjadi seperti ini

<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
<div id="menu-menu-page">
<ul>
<li><a href="<?php bloginfo('url'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
</ul>
</div><div style="clear:both;"/>

• simpan/save
• lihat blog(pastikan themes yang active adalah themes default)

mohon diperhatikan dengan baik(jangan sampai salah)

script yang ini

<div id="menu-menu-page">
<ul>
<li><a href="<?php bloginfo('url'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
</ul>
</div><div style="clear:both;"/>

letakkan tepat di bawah

<div><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />(disini)

ketarangn pada style cssnya

• warna merah adalah value atau nilai, fungsinya anggap saja untuk merubah tampilanya
• warna biru adalah komentar css, abaikan saja
• untuk mengatur lebar tombolnya, edit valu bagian ini

padding:10px 40px 0 40px;/*jarak dalam, atas 10px, kanan 40px, bawah 0 dan kiri 40px, silakan sesuaikan*/

• css itu menyenangkan

bersambung . . .