Cara Membuat Tab Menu jQuery

Screenshot dari tutorial ini seperti yang di atas. Untuk membuatnya, langkahnya adalah :

1.   Masuk ke Edit HTML.

2.   Cari kode </head>

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

<style type="text/css" media="screen">
    <!--
                BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
                H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
                DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
                TEXTAREA { width: 80%;}
                FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
                LEGEND { color: #ccc; font-size: 120%; }
                INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
                LABEL { display: block; margin-top: 10px; } 
                IMG { margin: 5px; }

                UL.tabNavigation {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                UL.tabNavigation LI {
                    display: inline;
                }

                UL.tabNavigation LI A {
                    padding: 3px 5px;
                    background-color: #ccc;
                    color: #000;
                    text-decoration: none;
                }

                UL.tabNavigation LI A.selected,
                UL.tabNavigation LI A:hover {
                    background-color: #333;
                    color: #fff;
                    padding-top: 7px;
                }
                
                UL.tabNavigation LI A:focus {
                        outline: 0;
                }

                div.tabs > div {
                        padding: 5px;
                        margin-top: 3px;
                        border: 5px solid #333;
                }
                
                div.tabs > div h2 {
                        margin-top: 0;
                }

                #first {
                    background-color: #f00;
                }

                #second {
                    background-color: #0f0;
                }

                #third {
                    background-color: #00f;
                }
                
                .waste {
                        min-height: 1000px;
                }
    -->
    </style>

        <script src="http://jqueryfordesigners.com/wp-content/themes/j4d/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':first').show();
                        
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>

KETERANGAN :

Gantilah ketiga warna background tabnya pada kode #first {, #second { dan #third {

dengan warna yang Anda kehendaki.

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

5.   Copy kode berikut lalu pastekan ke dalam kontennya :

<div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">First</a></li>
            <li><a href="#second">Second</a></li>
            <li><a href="#third">Third</a></li>
        </ul>

<div id="first">
<p>Kalimat 1 Anda letakkanlah di sini</p>
</div>

<div id="second">
<p>Kalimat 2 Anda letakkanlah di sini</p>
</div>

<div id="third">
<p>Kalimat 3 Anda letakkanlah di sini</p>
</div>
</div>
<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!