Menambahkan menu-menu pages || modif themes default

kali ini, saya akan membahas tentang menu-menu, tujuannya ialah agar tampilan themes default ini terlihat lebih profesional :)

Cinta sejati tidak datang kepadamu,tetapi harus datang dari dalam dirimu. Julia Roberts

kali ini, saya akan membahas tentang menu-menu, tujuannya ialah agar tampilan themes default ini terlihat lebih profesional :)

Last Modif at July 7th, 2011

NOT RECOMEND
melanjutkan postingan sebelumnya tentang modifikasai 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 . . .

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “Menambahkan menu-menu pages || modif themes default”

  1. ga ada gambar contoh page nya ya, biar lebih jelas hasilnya spt apa

  2. didik says:

    ada video’a gk ? msih kurang jelas.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-