My Diary is blog Powered by Wordpress. Please subscribe to My Diary via the RSS Feed or Via Email.

Why are Navigation Menus Important?
It acts as the gateway to sections of the site you want your visitors/users to explore easly.
It aids as a visual sitemap when designed correctly.
It enhances usability of site and helps SEO when used correctly.

Membuat menu sangat penting jika Anda ingin mempercantik tampilan situs Anda disini gue coba memberi sedikit pengetahuan gue tentang membuat menu dengan memanggil file javascript, banyak theme premium menggunakannya sebagai contoh premium theme revolutiontheme karya Brian Gardner.
Berikut langkah langkah untuk membuat sebuah menu dengan javascript :
Pertama download script yang dibutuhkan yaitu :
Download script hover.js klik kanan lalu select all copy paste pada notepad lalu save dengan nama hover.js dan download taber.js setelah itu klik kanan lalu select all, copy paste script tersebut ke notepad lalu beri nama taber.js.
Setelah mendapatkan script how now you may upload to current theme used folder ke folder theme yang anda gunakan.
Langkah berikutnya adalah membuat file css. untuk filenya beri nama tab.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/*  Tab  Style start -------------------- */
 .tabberlive .tabbertabhide {
 display:none;
}
.tabber {	
}
.tabberlive {
 margin:0 5px;
}
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 font: bold 12px Arial, Helvetica, sans-serif;
}
ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}
ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 text-decoration: none;
}
/*---- tabbertab = the tab content---------------------*/
.tabberlive .tabbertab {
 padding:5px;
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}
/*tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

Kalian copy paste file css diatas ke dalam notepad lalu save dengan nama tab.css setelah itu upload file .css tersebut ke dalam folder theme yang anda gunakan upload css file to current theme used folder.
Setelah mendapatkan script .js dan .css anda edit theme anda pada bagian template header.php masukan scirpt berikut pada tamplate header.php add this to your theme section template the header.php :
Optionally, a temporary tag can be added right below the call for Java and css to keep the tabs closed on insert

1
2
3
4
5
6
7
8

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/taber.js"></script> 
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/hover.js"></script>

1

<link type="text/css" media="screen" rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/tab.css"  />

Bagaimana untuk meletakannya pada sidebar download div.txt ini, lalu kalian coba letakkan pada template sidebar.php dengan mengeditnya.Selamat mencoba !! :gg

Ini hanya contoh untuk selanjutnya kalian dapat menambahkan sendiri. Selamat mencoba mohon maaf kalo ada penyampaian yang salah gue hanya sekedar sharing pengetahuan dan kalo ada yang lebih tahu mohon bimbingannya.This of only examples henceforth you could try it. I only did this with the exercise and tried.