Oops! Sepertinya ada sedikit kesalahan ...

Halo 

Sakura mau nanya,gimana cara jika kita meng-klik tombol yang kita buat,akan menghasilkan sesuatu yang mau kita display di bawah tombol itu?

Misal,kakak bisa lihat tombol waktu di-hover jadi biru di forum kak Kitsune

[You must be registered and logged in to see this link.],scroll sampe bawah,ada widget namanya "Kuri",yang ada tulisan "Duel Academy Rangkings And Scores"

trus,sakura maunya waktu di-klik,akan menghasilkan sesuatu yang mau kita display di bawah button tersebut...

Misal ini nih: 

[You must be registered and logged in to see this link.]

Gimana ya caranya?

Utk html button yang waktu di-hover jadi biru itu Sakura tau

Makasih

Code button biru: 

Code:

<style type="text/css">

.pretty-table
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #a6a6a6;
  background: #303030;
  width:inherit !important;
}

.pretty-table caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table th, .pretty-table td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #a6a6a6;
}
.pretty-table td+td+td+td+td+td+td+td+td{ color: #f9f469; }


.pretty-table th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=row]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
{
  background-color: #464545;
  font-weight:bold;
  cursor:pointer;
}


.pretty-table2
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #a6a6a6;
  background: #303030;
}

.pretty-table2 caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table2 th, .pretty-table2 td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #a6a6a6;
}
.pretty-table2 td+td+td+td+td+td+td+td+td{ color: #f9f469; }


.pretty-table2 th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table2 th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table2 th[scope=row]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table2 tr.alt th, .pretty-table2 tr.alt td
{
  color: #2a4763;
}

.pretty-table2 tr:hover th[scope=row], .pretty-table2 tr:hover td
{
  background-color: #464545;
  font-weight:bold;
  cursor:pointer;
}


.button3 {
   display: inline-block;
   text-decoration: none;
   padding: 10px 15px !important;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   position: relative;
   font-weight: bold;
   
   
   height:50px !important;
   -webkit-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   background: #303030 !important;
   width:100px;
   color:#1E7DA6;
}

.button3:active {
   -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   top: 3px;
   padding-bottom: 7px;
   background: #1E7DA6 !important;
}
.button3:hover {
   background: #1E7DA6 !important;
   color:black;
}
</style>
<script>

function bubbleSort(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][5]) < eval(a[i+1][5])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][5]) == eval(a[i+1][5])) {
            if (eval(a[i][3]) > eval(a[i+1][3])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
        }
    } while (swapped);
}

function bubbleSort2(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][7]) < eval(a[i+1][7])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][7]) == eval(a[i+1][7])) {
            if (eval(a[i][4]) > eval(a[i+1][4])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            if (eval(a[i][4]) == eval(a[i+1][4])) {
               if (eval(a[i][3]) < eval(a[i+1][3])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
            }
        }
    } while (swapped);
}

function bubbleSort3(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][3]) < eval(a[i+1][3])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][3]) == eval(a[i+1][3])) {
            if (eval(a[i][1]) < eval(a[i+1][1])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            if (eval(a[i][1]) == eval(a[i+1][1])) {
               if (eval(a[i][2]) < eval(a[i+1][2])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
            

           

            }
         
        }
    } while (swapped);
}

function league_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").show("slow");
}
function proleague_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable2").show("slow");
}
function dalivesseason_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable4").show("slow");
}
function dalivesoverall_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable5").show("slow");
}
function daregulars_rankings(){
jQuery("#mytable").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable6").show("slow");
}

function insertpodloga(){

/*taking season numbers*/
if(jQuery(location).attr('href').indexOf('duelacademy')>-1){
var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('seasonnumbers').innerHTML;
var lista=new Array();
var seasonlista= new Array();
lista0= myIFrame.split("<br>");
var i=0;
for(i=0; i<lista0.length-1;i++){
seasonlista.push(lista0[i].split(","));
}
seasonlista.splice(0,1);
/*taking season numbers end*/

var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('rankings').innerHTML;
var lista=new Array();
var konacnalista= new Array();
lista= myIFrame.split("<br>");
var i=0;
for(i=0; i<lista.length-1;i++){
konacnalista.push(lista[i].split(","));
}


konacnalista.splice(0,1);
for(var j=0; j<konacnalista.length;j++){
konacnalista[j][3]=eval(konacnalista[j][1])+eval(konacnalista[j][2]);
var pts=eval(konacnalista[j][1])-eval(konacnalista[j][2]);
konacnalista[j][5]=pts;
if(pts<0){pts=0;}
konacnalista[j][4]=pts;
}
bubbleSort(konacnalista);

var myIFrame2= document.getElementById('podloga').contentWindow.document.getElementById('rankings4').innerHTML;
var lista2=new Array();
var konacnalista2= new Array();
lista2= myIFrame2.split("<br>");
var i=0;
for(i=0; i<lista2.length-1;i++){
konacnalista2.push(lista2[i].split(","));
}

konacnalista2.splice(0,1);
for(var j=0; j<konacnalista2.length;j++){
var pts=eval(10*konacnalista2[j][1])+eval(5*konacnalista2[j][2]);
konacnalista2[j][3]=pts;
if(pts<0){pts=0;}
konacnalista2[j][3]=pts;
}
bubbleSort3(konacnalista2);

var myIFrame3= document.getElementById('podloga').contentWindow.document.getElementById('rankings5').innerHTML;
var lista3=new Array();
var konacnalista3= new Array();
lista3= myIFrame3.split("<br>");
var i=0;
for(i=0; i<lista3.length-1;i++){
konacnalista3.push(lista3[i].split(","));
}

konacnalista3.splice(0,1);
for(var j=0; j<konacnalista3.length;j++){
var pts=eval(10*konacnalista3[j][1])+eval(5*konacnalista3[j][2]);
konacnalista3[j][3]=pts;
if(pts<0){pts=0;}
konacnalista3[j][3]=pts;
}
bubbleSort3(konacnalista3);




row=new Array();
cell=new Array();

row_num=konacnalista.length;
row_num2=konacnalista2.length;
row_num3=konacnalista3.length; //edit this value to suit
cell_num=6; //edit this value to suit
cell_num2=5;
cell_num3=5;

/*league rankings*/

tab=document.createElement('table');
tab.setAttribute('class','pretty-table');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode(seasonlista[0]);
cellnula0_naslov0.setAttribute('colspan','6');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="300px";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula2=document.createElement('td');
contnula2=document.createTextNode("WON");
cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula2.appendChild(contnula2);
rownula.appendChild(cellnula2);

cellnula2=document.createElement('td');
contnula2=document.createTextNode("LOST");
cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula2.appendChild(contnula2);
rownula.appendChild(cellnula2);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("PLAYED");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("PTS");
cellnula4.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);


/*dalives season rankings*/


tab=document.createElement('table');
tab.setAttribute('class','pretty-table2');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode(seasonlista[1]);
cellnula0_naslov0.setAttribute('colspan','5');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="280px !important";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("1st PLACE");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("2nd PLACE");
cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

cellnula6=document.createElement('td');
contnula6=document.createTextNode("PTS");
cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula6.appendChild(contnula6);
rownula.appendChild(cellnula6);


tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num2;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num2;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista2[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable4').appendChild(tab);





/*dalives overall rankings*/

tab=document.createElement('table');
tab.setAttribute('class','pretty-table2');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode("DA LIVE TOURNAMENT OVERALL RANKINGS");
cellnula0_naslov0.setAttribute('colspan','5');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="280px !important";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("1st PLACE");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("2nd PLACE");
cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

cellnula6=document.createElement('td');
contnula6=document.createTextNode("PTS");
cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula6.appendChild(contnula6);
rownula.appendChild(cellnula6);


tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num3;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num3;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista3[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable5').appendChild(tab);
}
else{ return false;}
}
</script>
<style id="wysiwyg_css" type="text/css">.wysiwyg {background: #0a0a0a;color: #7f7b7b;font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;}</style>
<span style="font-size:18px; font-family:impact;" id="masterleaguetitle1">Duel Academy's</span><br><span style=" font-size:40px; font-family:impact;" id="masterleaguetitle2">Rankings &amp; Scores</span><div id="rightside" style="width:50%;float:left; text-align:center; margin-top:10px;">
<center><input type="submit" onclick="league_rankings()" class="button3" value="League">&nbsp;&nbsp;&nbsp;
<input type="submit" onclick="proleague_rankings()" class="button3" value="Pro League">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="" class="button3" value="
"><br><br><input type="submit" onclick="dalivesseason_rankings()" class="button3" value="Lives
Season">&nbsp;&nbsp;&nbsp;
<input type="submit" onclick="dalivesoverall_rankings()" class="button3" value="Lives
Overall">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="daregulars_rankings()" class="button3" value="Regulars
Overall"></center><br></div>

NB:Kalo ga salah,kak mercurial juga pernah nanyain ini,kalo mau,bisa minta tolong kasihkan link utk ke masalah kak mercurial?

Makasih

coba ".indexOff('duelacademy')" nya diubah jadi link forum sakura.

kalo mau bikin kea gitu sih mesti bikin HTML-nya dulu sakuranya,html tablenya,kalo ga salah.

Kalau untuk masukkin text aja di bawahnya sih bisa kemungkinan pakek show hide aja.
Tapi kalo untuk masukkin html ane juga agak kurang ngerti.

Btw ini maksudnya kode yang dari mana ?

Code:

        <style type="text/css">
        .pretty-table
        {
          padding: 0;
          margin: 0;
          border-collapse: collapse;
          border: 1px solid #333;
          font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          color: #a6a6a6;
          background: #303030;
          width:inherit !important;
        }
        .pretty-table caption
        {
          caption-side: bottom;
          font-size: 0.9em;
          font-style: italic;
          text-align: right;
          padding: 0.5em 0;
        }
        .pretty-table th, .pretty-table td
        {
          border: 1px dotted #666;
          padding: 0.5em;
          text-align: left;
          color: #a6a6a6;
        }
        .pretty-table td+td+td+td+td+td+td+td+td{ color: #f9f469; }
        .pretty-table th[scope=col]
        {
          color: #000;
          background-color: #8fadcc;
          text-transform: uppercase;
          font-size: 0.9em;
          border-bottom: 2px solid #333;
          border-right: 2px solid #333;
        }
        .pretty-table th+th[scope=col]
        {
          color: #fff;
          background-color: #7d98b3;
          border-right: 1px dotted #666;
        }
        .pretty-table th[scope=row]
        {
          background-color: #b8cfe5;
          border-right: 2px solid #333;
        }
        .pretty-table tr.alt th, .pretty-table tr.alt td
        {
          color: #2a4763;
        }
        .pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
        {
          background-color: #464545;
          font-weight:bold;
          cursor:pointer;
        }
        .pretty-table2
        {
          padding: 0;
          margin: 0;
          border-collapse: collapse;
          border: 1px solid #333;
          font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          color: #a6a6a6;
          background: #303030;
        }
        .pretty-table2 caption
        {
          caption-side: bottom;
          font-size: 0.9em;
          font-style: italic;
          text-align: right;
          padding: 0.5em 0;
        }
        .pretty-table2 th, .pretty-table2 td
        {
          border: 1px dotted #666;
          padding: 0.5em;
          text-align: left;
          color: #a6a6a6;
        }
        .pretty-table2 td+td+td+td+td+td+td+td+td{ color: #f9f469; }
        .pretty-table2 th[scope=col]
        {
          color: #000;
          background-color: #8fadcc;
          text-transform: uppercase;
          font-size: 0.9em;
          border-bottom: 2px solid #333;
          border-right: 2px solid #333;
        }
        .pretty-table2 th+th[scope=col]
        {
          color: #fff;
          background-color: #7d98b3;
          border-right: 1px dotted #666;
        }
        .pretty-table2 th[scope=row]
        {
          background-color: #b8cfe5;
          border-right: 2px solid #333;
        }
        .pretty-table2 tr.alt th, .pretty-table2 tr.alt td
        {
          color: #2a4763;
        }
        .pretty-table2 tr:hover th[scope=row], .pretty-table2 tr:hover td
        {
          background-color: #464545;
          font-weight:bold;
          cursor:pointer;
        }
        .button3 {
          display: inline-block;
          text-decoration: none;
          padding: 10px 15px !important;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          position: relative;
          font-weight: bold;
         
         
          height:50px !important;
          -webkit-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          -moz-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          background: #303030 !important;
          width:100px;
          color:#1E7DA6;
        }
        .button3:active {
          -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          top: 3px;
          padding-bottom: 7px;
          background: #1E7DA6 !important;
        }
        .button3:hover {
          background: #1E7DA6 !important;
          color:black;
        }
        </style>
        <script>
        function bubbleSort(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][5]) < eval(a[i+1][5])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][5]) == eval(a[i+1][5])) {
                    if (eval(a[i][3]) > eval(a[i+1][3])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                }
            } while (swapped);
        }
        function bubbleSort2(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][7]) < eval(a[i+1][7])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][7]) == eval(a[i+1][7])) {
                    if (eval(a[i][4]) > eval(a[i+1][4])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    if (eval(a[i][4]) == eval(a[i+1][4])) {
                      if (eval(a[i][3]) < eval(a[i+1][3])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                    }
                }
            } while (swapped);
        }
        function bubbleSort3(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][3]) < eval(a[i+1][3])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][3]) == eval(a[i+1][3])) {
                    if (eval(a[i][1]) < eval(a[i+1][1])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    if (eval(a[i][1]) == eval(a[i+1][1])) {
                      if (eval(a[i][2]) < eval(a[i+1][2])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                   
                 
                    }
               
                }
            } while (swapped);
        }
        function league_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").show("slow");
        }
        function proleague_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable2").show("slow");
        }
        function dalivesseason_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable4").show("slow");
        }
        function dalivesoverall_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable5").show("slow");
        }
        function daregulars_rankings(){
        jQuery("#mytable").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable6").show("slow");
        }
        function insertpodloga(){
        /*taking season numbers*/
        if(jQuery(location).attr('href').indexOf('duelacademy')>-1){
        var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('seasonnumbers').innerHTML;
        var lista=new Array();
        var seasonlista= new Array();
        lista0= myIFrame.split("<br>");
        var i=0;
        for(i=0; i<lista0.length-1;i++){
        seasonlista.push(lista0[i].split(","));
        }
        seasonlista.splice(0,1);
        /*taking season numbers end*/
        var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('rankings').innerHTML;
        var lista=new Array();
        var konacnalista= new Array();
        lista= myIFrame.split("<br>");
        var i=0;
        for(i=0; i<lista.length-1;i++){
        konacnalista.push(lista[i].split(","));
        }
        konacnalista.splice(0,1);
        for(var j=0; j<konacnalista.length;j++){
        konacnalista[j][3]=eval(konacnalista[j][1])+eval(konacnalista[j][2]);
        var pts=eval(konacnalista[j][1])-eval(konacnalista[j][2]);
        konacnalista[j][5]=pts;
        if(pts<0){pts=0;}
        konacnalista[j][4]=pts;
        }
        bubbleSort(konacnalista);
        var myIFrame2= document.getElementById('podloga').contentWindow.document.getElementById('rankings4').innerHTML;
        var lista2=new Array();
        var konacnalista2= new Array();
        lista2= myIFrame2.split("<br>");
        var i=0;
        for(i=0; i<lista2.length-1;i++){
        konacnalista2.push(lista2[i].split(","));
        }
        konacnalista2.splice(0,1);
        for(var j=0; j<konacnalista2.length;j++){
        var pts=eval(10*konacnalista2[j][1])+eval(5*konacnalista2[j][2]);
        konacnalista2[j][3]=pts;
        if(pts<0){pts=0;}
        konacnalista2[j][3]=pts;
        }
        bubbleSort3(konacnalista2);
        var myIFrame3= document.getElementById('podloga').contentWindow.document.getElementById('rankings5').innerHTML;
        var lista3=new Array();
        var konacnalista3= new Array();
        lista3= myIFrame3.split("<br>");
        var i=0;
        for(i=0; i<lista3.length-1;i++){
        konacnalista3.push(lista3[i].split(","));
        }
        konacnalista3.splice(0,1);
        for(var j=0; j<konacnalista3.length;j++){
        var pts=eval(10*konacnalista3[j][1])+eval(5*konacnalista3[j][2]);
        konacnalista3[j][3]=pts;
        if(pts<0){pts=0;}
        konacnalista3[j][3]=pts;
        }
        bubbleSort3(konacnalista3);
        row=new Array();
        cell=new Array();
        row_num=konacnalista.length;
        row_num2=konacnalista2.length;
        row_num3=konacnalista3.length; //edit this value to suit
        cell_num=6; //edit this value to suit
        cell_num2=5;
        cell_num3=5;
        /*league rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode(seasonlista[0]);
        cellnula0_naslov0.setAttribute('colspan','6');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="300px";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula2=document.createElement('td');
        contnula2=document.createTextNode("WON");
        cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula2.appendChild(contnula2);
        rownula.appendChild(cellnula2);
        cellnula2=document.createElement('td');
        contnula2=document.createTextNode("LOST");
        cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula2.appendChild(contnula2);
        rownula.appendChild(cellnula2);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("PLAYED");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("PTS");
        cellnula4.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);
        /*dalives season rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table2');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode(seasonlista[1]);
        cellnula0_naslov0.setAttribute('colspan','5');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="280px !important";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("1st PLACE");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("2nd PLACE");
        cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        cellnula6=document.createElement('td');
        contnula6=document.createTextNode("PTS");
        cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula6.appendChild(contnula6);
        rownula.appendChild(cellnula6);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num2;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num2;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista2[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable4').appendChild(tab);
        /*dalives overall rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table2');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode("DA LIVE TOURNAMENT OVERALL RANKINGS");
        cellnula0_naslov0.setAttribute('colspan','5');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="280px !important";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("1st PLACE");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("2nd PLACE");
        cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        cellnula6=document.createElement('td');
        contnula6=document.createTextNode("PTS");
        cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula6.appendChild(contnula6);
        rownula.appendChild(cellnula6);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num3;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num3;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista3[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable5').appendChild(tab);
        }
        else{ return false;}
        }
        </script>
        <style id="wysiwyg_css" type="text/css">.wysiwyg {background: #0a0a0a;color: #7f7b7b;font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;}</style>
        <span style="font-size:18px; font-family:impact;" id="masterleaguetitle1">Duel Academy's</span><br><span style=" font-size:40px; font-family:impact;" id="masterleaguetitle2">Rankings &amp; Scores</span><div id="rightside" style="width:50%;float:left; text-align:center; margin-top:10px;">
        <center><input type="submit" onclick="league_rankings()" class="button3" value="League">&nbsp;&nbsp;&nbsp;
        <input type="submit" onclick="proleague_rankings()" class="button3" value="Pro League">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="" class="button3" value="
        "><br><br><input type="submit" onclick="dalivesseason_rankings()" class="button3" value="Lives
        Season">&nbsp;&nbsp;&nbsp;
        <input type="submit" onclick="dalivesoverall_rankings()" class="button3" value="Lives
        Overall">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="daregulars_rankings()" class="button3" value="Regulars
        Overall"></center><br></div>

Kalau misalnya mau show hidenya nih ane kasih contohnya pake html ini di widget nya

Code:

        <script type="text/javascript">
        function mytoggle(elm) {
          var module = document.getElementById(elm);
          if (module.style.display == "none") {
              module.style.display = "block";
          }
          else {
              module.style.display = "none";
          }
        }
        </script>
        <button onclick="javascript:mytoggle('hiddendiv');">Judul button</button>
        <div id="hiddendiv" style="display:none;">Hasil text.</div>


Itu cuma contoh belum di edit buttonnya, bisa kan edit sendiri ?

Pake script slideToggle aja

Jadi gini nih:

Code:

<!DOCTYPE html>
<html>
<head>
  <style>
 p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 //masukkan kode button
<tr style="font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;"><td colspan="6" style="background: #022053; color: #000; cursor:auto; width:750px !important;">LEAGUE SEASON 12 RANKINGS</td></tr>
<tr style="font-weight:bold"><td style="background: #022053; color: #000; cursor:auto;">RANK</td><td style="background: #022053; color: #000; cursor:auto;" width="300px">DUELIST NAME</td><td style="background: #022053; color: #000; cursor:auto;">WON</td><td style="background: #022053; color: #000; cursor:auto;">LOST</td><td style="background: #022053; color: #000; cursor:auto;">PLAYED</td><td style="background: #022053; color: yellow; cursor:auto;">PTS</td></tr>
<script>
    $("CLASS BUTTON").click(function () {
      $("CLASS TABLE").slideToggle("slow");
    });
</script>

</body>
</html>

baca di sini aja [You must be registered and logged in to see this link.]

slow bisa diganti jadi fast ato terserah kamu aja

Yes bisa juga pake htmlnya si kitsune

Oh iya,ane coba testing script yang ane kasih ternyata ga work.

Tak ada pilihan selain memilih kayak waktu di-klik kebawa ke link yang kita mau.

pasang a href aja,kalo bisa di-test di w3schools

Nih kalo mau slide yang kayak agan kitsune bilang pakai ini aja

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle3').click(function() {
   $('.toggle3').toggle('slow');
   return false;
});
});
</script>
<button href="#" id="toggle3">Animated Toggle</button><br /><br />
<div class="toggle3" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Sumber : [You must be registered and logged in to see this link.]

tommycoo wrote:Nih kalo mau slide yang kayak agan kitsune bilang pakai ini aja

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle3').click(function() {
   $('.toggle3').toggle('slow');
   return false;
});
});
</script>
<button href="#" id="toggle3">Animated Toggle</button><br /><br />
<div class="toggle3" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Sumber : [You must be registered and logged in to see this link.]

Oke,nanti sakura coba

Soalnya sakura lagi on via mobile Nanti sakura kabari kalo hasilnya memuaskan

yap silahkan aja di test kalo gak work nanti coba ane cariin lagi yang lain

Apa ini sudah solved ?

tommycoo wrote:Apa ini sudah solved ?

solved trima kasih.