Hello there guys,

I want to ask,

How to change shop into tabs


Or examples like the one Atlanta "Shop Coin" have...

I know they already asking me about the tutorial,this is:

I know there is a tutorial,i have readed the tutorial carefully

I already paste it and correct it,but when i open tab 2 and tab 3,my forum not responding!!

How to be like the one Atlanta have?

Because my clients are waiting for me!

Can you help me please!?

Okay lemme try to do it first c:

Hello,

Do you mean is this tutorial?

http://www.csshelp.net/t119-turn-statistics-into-tabs-phpbb2-and-punbb-only

he almost mean something like that but..
you are asking same as atlanta have =_=

Code:

      <div id="tabs_container">
            <ul id="stabs">
                <li class="active"><a href="#tab1">Kotak Belanja</a></li>
                <li><a href="#tab2">Pets</a></li>
                <li><a href="#tab3">Username Design</a></li>
            </ul>
        </div>
        <div id="tabs_content_container">
            <div id="tab1" class="tab_content" style="display: block;">
<div class="coincopy">Copyright2013 By Atlanta forum, All right reserved.</div>
         <div class="kotakB">
<div class="syarat">Peraturan dalam pembelian :
<br>
&nbsp;&nbsp;&nbsp;*Kalian harus mempunyai cukup coin dalam membeli atau kami tidak akan melayani pesanan kamu.<br />
&nbsp;&nbsp;&nbsp;*Isi lah dulu judul barang yang mau kamu beli baru isikan bacaan Optional yang sesuai dengan pesanan kamu.<br />
&nbsp;&nbsp;&nbsp;*Berikan masukkan atau comment kamu jika kamu ingin mengisinya.<br />
&nbsp;&nbsp;&nbsp;*Kiriman kamu akan di tanggapi dalam waktu 48 Jam atau lebih.</div>
<form style="text-align:center;" id="quick_reply" name="post" onsubmit="return vB_Editor['text_editor'].prepare_submit(0, 0)" action="/posting.forum" method="post"><div id="textarea_content" style="clear: both; margin-left: 137px !important; width: 450px; height: 220px;"><textarea class="inputbox" id="text_editor_textarea" style="font-size: 1.2em; box-shadow: 0px 0px 2px black; resize: none; overflow: auto; height: 208px ! important;" name="message" rows="10" cols="50" editorid="text_editor">Judul Barang atau Code Barang :

Nama username yang ingin di tukar (Optional) :

Background Glitter yang lain (Optional) :

Warna Shadow yang lain (Optional) :

Komentar/Saran (Optional) :</textarea>
        </div>
        <br>
        <input value="reply" name="mode" type="hidden"><input value="76a25c7a79cedbfb6e47484a662b2998" name="sid" type="hidden"><input value="201" name="t" type="hidden"> <input name="post" value="Send" class="button1" onclick="confirm('Apakah anda yakin membeli barang ini?');" type="submit"></form></div>
            </div>
            <div id="tab2" class="tab_content">
<div class="coincopy">Copyright2013 By Atlanta forum, All right reserved.</div>

            <div class="badanAc">
<div class="judulA">Grooms~Code:04</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/groom10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Groom, pilih aku menjadi pet mu.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">One Eye~Code:05</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/one_ey10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">IiiIiii giGi putih giGiku Paling putih..</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Mata Gila~Code:06</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/lol_ha10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">AaaAaaaAA akuu gGillaA, Jadi jaanGan beliI aku yaa !.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">M. Jacklien~Code:07</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/jakson10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Aku gak mau ngomong lagi, tinggalkan aku !, tunggu beli aku dulu.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Cute Rock~Code:08</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/happy_10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Aku imut yee, paling imut loh di sini.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Blues Tounge~Code:09</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i39.servimg.com/u/f39/16/49/10/98/monste15.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Gua paling keren di sini jadi beli ane aja yee.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Ghost Hunter~Code:10</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i39.servimg.com/u/f39/16/49/10/98/monste16.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">zzz.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Box Head~Code:11</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i39.servimg.com/u/f39/16/49/10/98/monste17.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Aku si kepala bulat di sini ????.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Best Blue~Code:12</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i39.servimg.com/u/f39/16/49/10/98/monste18.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Hihihi beli lah ane aja boss.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Gumpy Glumply~Code:13</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i39.servimg.com/u/f39/16/49/10/98/monste19.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">I'm glumpy dumpy gumbs hahah.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Steel Rock~Code:14</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/rocky10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Whatt Are you Looking At !!.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Vipers Snakors~Code:15</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i49.servimg.com/u/f49/16/49/10/98/ulra10.png" />
</div>
<div class="penjA">
<div class="coinsA">120 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Tzz Tzz tzzztztzt tzzztzzt ZzzTZzz, BezZii SazZaa.</div>
</div>
</div>
</div>

            </div>
            <div id="tab3" class="tab_content">
<div class="coincopy">Copyright2013 By Atlanta forum, All right reserved.</div>
         
            <div class="badanAc">
<div class="judulA">Tukar Username~Code:01</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i80.servimg.com/u/f80/16/49/10/98/iphoto10.png" />
</div>
<div class="penjA">
<div class="coinsA">50 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Pilih menu ini jika kalian mau menukar username kalian, sertakan nama pilihan username baru kalian di kotak belanja.</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Username Glitter~Code:02</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i80.servimg.com/u/f80/16/49/10/98/iphoto10.png" />
</div>
<div class="penjA">
<div class="coinsA">100 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Ini bisa membuat username kalian berkelap-kelip seperti ini, [ <div style="display:inline;" class="glow">Contohdiusername</div> ].</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Username Shadows~Code:03</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i80.servimg.com/u/f80/16/49/10/98/iphoto10.png" />
</div>
<div class="penjA">
<div class="coinsA">110 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Ini bisa membuat username kalian memiliki bayangan pada bagian belakangnya seperti ini, [ <div style="text-shadow:0px 0px 2px black;display:inline;">Contohdiusername</div> ].</div>
</div>
</div>
</div>

<div class="badanAc">
<div class="judulA">Username Pelangi~Code:16</div>
<div class="itemA">
<div class="fotoA">
<img src="http://i80.servimg.com/u/f80/16/49/10/98/iphoto10.png" />
</div>
<div class="penjA">
<div class="coinsA">200 Coins</div><p class="onsaleA">On Sale</p>
<div class="descA">Menu ini akan bisa membuat username kalian terlihat seperti pelangi ;) [ <a href="/u0" style="display:inline;">usernamedisini</a> ]</div>
</div>
</div>
</div>

            </div>
        </div>

<style>
.logoC{
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid orange;
}
.itemA {
    height: 100px;
    clear: both;
    display: block;
    border: 3px solid rgb(98, 171, 213);
    z-index: 1000;
    width: 100%;
    box-shadow: 0px 0px 9px rgb(182, 223, 255) inset, 0px 0px 1px rgb(0, 0, 0);
    background: none repeat scroll 0% 0% rgb(180, 220, 255);
}
.fotoA img {
    float: left;
    height: 90px;
    margin-top: 5px;
    margin-left: 5px;
    width: 10%;
}
.penjA {
    height: 100px;
    text-align: justify;
    font-family: verdana;
    font-size: 14px;
    width: 88%;
    border-left: 3px solid rgb(98, 171, 213);
    float: right;
    overflow: auto;
    box-shadow: -2px 0px 0px rgb(50, 50, 50);
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(233, 208, 155);
}
.coinsA {
    font-weight: bold;
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px green;
    padding: 5px;
    color: white;
    text-align: center;
    text-shadow: 0px 0px 2px black;
    border-radius: 0px 0px 10px 0px;
    width: 140px;
    display: inline-block;
}
.descA {
    color: black;
    background: transparent;
    padding: 5px;
    height: 64px;
    font-weight: 700;
    line-height: 16px;
    text-indent: 12px;
    font-size: 12px;
}
.onsaleA {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    padding: 5px;
    font-size: 12px;
    text-align: right;
    border-radius: 0px 0px 0px 10px;
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(0, 139, 139);
    float: right;
}
.judulA {
    float: left;
    padding: 6px;
    background: none repeat scroll 0% 0% rgb(98, 171, 213);
    color: black;
    font-weight: bold;
    font-size: 15px;
    border-radius: 5px 5px 0px 0px;
    z-index: 999;
    box-shadow: 0px 0px 9px rgb(182, 223, 255) inset, 0px 0px 1px rgb(0, 0, 0);
    border-bottom: 2px solid orange;
    margin-bottom: 1px;
}
.badanAc{margin-bottom:10px;}
.glow {
        background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
    }
.syarat {
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(255, 0, 0);
    padding: 5px;
    color: white;
    font-weight: bold;
margin-bottom:20px;
}
        #tabs_container {
            border-bottom: 1px solid #ccc;
        }
        #stabs {
            list-style: none;
            padding: 5px 0 4px 0;
            margin: 0 0 0 10px;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 13px;
        }
        #stabs li {
            display: inline;
        }
#stabs li a {
    border-style: solid solid none;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 4px 6px;
    text-decoration: none;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    color: black;
    border-width: 1px 1px medium;
    border-color: grey;
    outline: medium none;
    background-color: rgb(238, 238, 238);
}
#stabs li a:hover {
    padding: 4px 6px;
    background-color: grey;
    color: white;
    font-weight: bold;
}
#stabs li.active a {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    font-weight: bold;
    color: white;
    background: none repeat scroll 0% 0% grey;
}
#stabs li.active a:hover {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    background-color: grey;
}
#tabs_content_container {
    border-width: medium 1px 1px;
    border-style: none solid solid;
    border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 10px;
    background: none repeat scroll 0% 0% grey;
    height: 380px;
    overflow: auto;
}
        .tab_content {
            display: none;
        }
.coincopy{
    float: right;
    font-weight: bold;
    color: white;
    font-size: 13px;
}

</style>
<script>        $(document).ready(function(){
            //  When user clicks on tab, this code will be executed
            $("#stabs li").click(function() {
                //  First remove class "active" from currently active tab
                $("#stabs li").removeClass('active');
       
                //  Now add class "active" to the selected/clicked tab
                $(this).addClass("active");
       
                //  Hide all tab content
                $(".tab_content").hide();
       
                //  Here we get the href value of the selected tab
                var selected_tab = $(this).find("a").attr("href");
       
                //  Show the selected tab content
                $(selected_tab).fadeIn();
       
                //  At the end, we add return false so that the click on the link is not executed
                return false;
            });
        });</script>

Thank you!

Btw,are this field like "#tab1" , "#tab2" ,and "#tab3" need to changed?What i mean:

"(MY FORUM URL)/#tab1" 

Are it's like that?Please help me once more

nah no need LOL

Oh..Are it's not changed,anyway?

That will answer my question properly

Thank you anyway,this thread is solved

Topic Locked + Solved