MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

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.

<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 sukai.

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!


1 comments:

diPLEK-MAHO mengatakan...

FOLLBACK GAN FOLLOW ME PLISSS

Poskan Komentar