Cara Membuat Tab Menu jQuery

Screenshot dari tutorial ini seperti yang terlihat di atas.
Nah, untuk membuatnya, langkahnya sebagai berikut :

1.   Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini
      dan paste di atas kode </head>,
      lalu simpan template anda.

01	<style type="text/css" media="screen">

02

<!--

03	BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }

04	H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}

05	DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}

06	TEXTAREA { width: 80%;}

07	FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }

08	LEGEND { color: #ccc; font-size: 120%; }

09	INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }

10	LABEL { display: block; margin-top: 10px; }

11	IMG { margin: 5px; }

12

13	UL.tabNavigation {

14	list-style: none;

15	margin: 0;

16	padding: 0;

17

}

18

19	UL.tabNavigation LI {

20	display: inline;

21

}

22

23	UL.tabNavigation LI A {

24	padding: 3px 5px;

25	background-color: #ccc;

26	color: #000;

27	text-decoration: none;

28

}

29

30	UL.tabNavigation LI A.selected,

31	UL.tabNavigation LI A:hover {

32	background-color: #333;

33	color: #fff;

34	padding-top: 7px;

35

}

36

37	UL.tabNavigation LI A:focus {

38	outline: 0;

39

}

40

41	div.tabs > div {

42	padding: 5px;

43	margin-top: 3px;

44	border: 5px solid #333;

45

}

46

47	div.tabs > div h2 {

48	margin-top: 0;

49

}

50

51

#first {

52	background-color: #f00;

53

}

54

55

#second {

56	background-color: #0f0;

57

}

58

59

#third {

60	background-color: #00f;

61

}

62

63

.waste {

64	min-height: 1000px;

65

}

66

-->

67

</style>

68

69	<script src="http://jqueryfordesigners.com/wp-content/themes/j4d/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>

70	<script type="text/javascript" charset="utf-8">

71	$(function () {

72	var tabContainers = $('div.tabs > div');

73	tabContainers.hide().filter(':first').show();

74

75	$('div.tabs ul.tabNavigation a').click(function () {

76	tabContainers.hide();

77	tabContainers.filter(this.hash).show();

78	$('div.tabs ul.tabNavigation a').removeClass('selected');

79	$(this).addClass('selected');

80	return false;

81	}).filter(':first').click();

82

});

83

</script>

KETERANGAN :

Gantilah ketiga warna background tabnya

pada kode #first {, #second { dan #third {

dengan warna yang Anda sukai.

4.   Rancangan -> Tambah Gadget
      dan pilihlah HTML/JavaScript

5.   Copy kode berikut lalu pastekan
      ke dalam kontennya :

01	<div class="tabs">

02	<ul class="tabNavigation">

03	<li><a href="#first">First</a></li>

04	<li><a href="#second">Second</a></li>

05	<li><a href="#third">Third</a></li>

06

</ul>

07

08	<div id="first">

09	<p>Kalimat 1 Anda letakkanlah di sini</p>

10

</div>

11

12	<div id="second">

13	<p>Kalimat 2 Anda letakkanlah di sini</p>

14

</div>

15

16	<div id="third">

17	<p>Kalimat 3 Anda letakkanlah di sini</p>

18

</div>

19

</div>

20	<div class="waste"></div>

KETERANGAN :

Masukkan kalimat apa saja yang Anda inginkan

pada kode Kalimat 1-3 Anda letakkanlah di sini.

Selamat mencoba, good luck!