MEMBUAT MENU ALWAYS ON TOP PADA WORDPRESS
Menu Always On Top adalah Menu Pilihan yang selalu berada pada posisi atas Website/Blog meskipun anda menggulung layar browser anda ke bawah, seperti Menu bar pada account Facebook kita.
Jika Blog anda menggunakan CMS standard, biasanya Menu bar tidak akan terlihat ketika anda menggulung browser ke bawah. Jika anda ingin tetap menampilkan menu tersebut pada posisi atas pada halaman Web Anda, maka anda harus sedikit memodifikasi Program PHP bawaan Theme anda.
Berikut langkah-langkahnya untuk CMS WordPress :
1. Bukalah program PHP yang berfungsi untuk menampilkan Menu Navigasi Blog anda, jika anda menggunakan WordPress, silahkan buka Header.php.
Caranya Loginlah ke Dashboard, Appereance, Editor dan pilih Header.php pada Frame bagian kanan (daftar program php)
2. Tambahkan script berikut di antara tag <HEAD> dan </HEAD>
<!– ALWAYS ON TOP LINKS MENU –>
<!– This goes into the HEAD of the html file –>
<script language=”JavaScript” type=”text/javascript”>
<!–
(document.getElementById) ? dom = true : dom = false;
function typeStart() {
if (dom) { document.write(‘<div id=”linksBox” style=”position:absolute; width:100%; left:0px; top:0px; visibility:visible”>’) } }
function typeEnd() { if (dom) { document.write(‘</div>’) } }
function placeIt() {
if (dom && !document.all) {document.getElementById(“linksBox”).style.top = window.pageYOffset + 0 + “px”;}
if (document.all) {document.all[“linksBox”].style.pixelTop = document.documentElement.scrollTop + 0}
window.setTimeout(“placeIt()”, 10); }
// –>
</script>
<style type=”text/css”>
<!–
a:hover.link {text-decoration: none; background-color: white}
a.link {text-decoration: none}
–>
</style>
3. Pada tag <BODY> tambahkan onLoad=”placeIt()” sehingga menjadi <body onLoad=”placeIt()”> atau lengkapnya menjadi <body onLoad=”placeIt()” <?php body_class(); ?> >
4. Selanjutnya, carilah tag yang menampilkan Menu Navigasi yang akan ditampilkan di atas, biasanya pada bagian ini..
<div id=”navigation”>
<div>
<?php if ( function_exists( ‘wp_nav_menu’ ) ) { // Added in 3.0 ?>
<?php wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_id’ => ‘dropmenu’,
‘fallback_cb’ => ‘revert_wp_menu_page’
)); ?>
<?php } else { ?>
<ul id=”dropmenu”>
<li id=”<?php if (is_home()) { ?>home<?php } else { ?>page_item<?php } ?>”><a href=”<?php bloginfo(‘url’); ?>” title=”Home”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=0&orderby=name’); ?>
</ul><!– DROPMENU END –>
<?php } ?>
…
</div><!– NAVIGATION END –>
Tambahkan di atas baris <div id=”navigation”> script berikut :
<script>typeStart()</script>
<table align=”center” border=”0px” width=”100%” cellpadding=”2″ cellspacing=”0″ style=”border: 0pt> <!– Editlah table sesuai dengan kebutuhan –>
<tr>
<td align=”center”>
Dan di bawah baris </div><!– NAVIGATION END –> Tambahkan perintah :
</td>
</tr>
</table>
<script>typeEnd()</script>
Simpanlah kembali Program Header.php dengan mengeklik Update file pada bagian bawahdan Refreshlah browser anda untuk melihat hasilnya.
Lakukan pengaturan tampilan warna, border dan posisi menu dari Program CSS (Stylesheet)nya pada bagian navigation.
Hasil dari Menu Always on top ini bisa anda lihat pada Menu Bar Blog saya ini 😉
Selamat mencoba…
